地圖功能無法與接收的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);
})();