地图功能无法与接收到的JSON一起使用（错误：未捕获的（在promise中）TypeError：datas.map不是一个函数）

Question

调用方法 DataTable(config); //一切正常

然后加载JSON，函数fetchers(apiUrl) //一切正常

然后在控制台打印我收到的JSON //一切正常

然后我尝试使用Array.prototype.map()（在此之前我使用的是本地数据），然后出现了这个错误....

未捕获（承诺中）类型错误：datas.map 不是函数

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 
}

在此之前，我使用本地数据并从中创建了一个表，一切都很好，但是在下载的JSON中，出现了这种情况。

我会很高兴得到关于这个错误的建议，而不仅仅是解决方案，

也请阅读关于json对象没有function类型属性的建议

并尝试像这样解构一个json对象

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

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

Answer 1

所以从api响应中看，你没有一个数组，而是一个对象。

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

所以你需要遍历数据对象中的所有属性。你可以使用Object.values()将所有属性值转换为数组，然后使用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);
})();