地图功能无法与接收到的JSON一起使用(错误:未捕获的(在promise中)TypeError:datas.map不是一个函数)
P粉419164700
P粉419164700 2023-09-18 16:49:17
0
1
606

调用方法 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...../*});//错误与上述相同

P粉419164700
P粉419164700

全部回复(1)
P粉310931198

所以从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);
})();
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板