在接收到JSON(await fetch)之后,map方法无法处理它,(error Uncaught(in promise)TypeError:datas.map不是函数)[关闭]

e1xvtsh3  于 2023-08-08  发布在  其他
关注(0)|答案(1)|浏览(173)

**已关闭。**此问题需要debugging details。它目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答这个问题。
5天前关闭。
Improve this question
调用方法DataTable(* config *);//一切正常
then load JSON,function fetchers(apiUrl)//all is ok
然后在控制台中打印我收到我的JSON //一切正常
然后我尝试Array.prototype.map()(之前我使用本地数据),出现此错误....
Uncatch(in promise)TypeError: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);  // all is ok simple array of object

 data.map((value) => {/*work with JSON...../*});//the error is the same as above

ukxgm1gy

ukxgm1gy1#

因此,查看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);
})();

相关问题