La fonction Map ne fonctionne pas avec le JSON reçu (erreur : Uncaught (promis) TypeError : datas.map n'est pas une fonction)

Question

Méthode d'appel DataTable(config); //Tout va bien

Puis chargez JSON, les récupérateurs de fonctions (apiUrl) // tout va bien

Puis imprimez le JSON que j'ai reçu dans la console //tout va bien

Ensuite, j'ai essayé d'utiliser Array.prototype.map() (avant cela, j'utilisais des données locales) et j'ai ensuite eu cette erreur....

Uncaught (promis) TypeError : datas.map n'est pas une fonction

DataTable(config);

const config = {                                       //ok
    parent: '#usersTable',
    apiUrl: "https://mock-api.shpp.me/mmykola/users"
};

async function fetchUsers(apiUrl) {                    //ok
    const response = await fetch(apiUrl);    
    return await response.json();
}

sync function DataTable(config) {
    let newData = await fetchUsers(config.apiUrl);    //ok
    console.log(newData["data"]);                     //ok

    newData.map((value) => {/*work with JSON create code for new table...../*});   //error here 
}

Avant cela, j'utilisais des données locales et créais une table à partir de celles-ci, tout allait bien, mais dans le JSON téléchargé, cela se produit.

Je serais heureux de recevoir des suggestions sur cette erreur, pas seulement une solution,

Lisez également les conseils sur les json对象没有functionpropriétés de type

Et essayez de déstructurer un objet json comme celui-ci

const {data} = newData;
    console.log(data);  // 一切正常，简单的对象数组

 data.map((value) => {/*work with JSON...../*});//错误与上述相同

Answer 1

Donc, d'après la réponse de l'API, vous n'avez pas de tableau, mais un objet.

{
  "data": {
    "1": {
      "name": "Kylie",
      "surname": "Wiegand",
      "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/85.jpg",
      "birthday": "2022-08-07T08:37:37.367Z"
    },
    ...

Vous devez donc parcourir toutes les propriétés de l'objet de données. Vous pouvez utiliser Object.values() pour convertir toutes les valeurs de propriété en tableaux, puis utiliser la méthode map.

async function fetchUsers(apiUrl) {                    
    const response = await fetch(apiUrl);    
    return await response.json();
}

async function DataTable(config) {
    let newData = await fetchUsers(config.apiUrl);                 
    const x = Object.values(newData.data).map((value) => { return value; });
    console.log(x.length);   
}

const config = {                                       
    parent: '#usersTable',
    apiUrl: "https://mock-api.shpp.me/mmykola/users"
};

(async function () {
  await DataTable(config);
})();