Die Kartenfunktion funktioniert nicht mit empfangenem JSON (Fehler: Uncaught (im Versprechen) TypeError: datas.map ist keine Funktion)

Question

Call method DataTable(config); //Alles ist in Ordnung

Dann laden Sie JSON, Funktionsabrufer (apiUrl) //alles ist in Ordnung

Dann drucken Sie den JSON aus, den ich in der Konsole erhalten habe //alles ist in Ordnung

Dann habe ich versucht, Array.prototype.map() zu verwenden (davor habe ich lokale Daten verwendet) und dann bekam ich diese Fehlermeldung ....

Ungefangener (versprechender) TypeError: datas.map ist keine Funktion

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 
}

Vorher habe ich lokale Daten verwendet und daraus eine Tabelle erstellt. Alles war in Ordnung, aber im heruntergeladenen JSON passiert das.

Ich würde mich über Vorschläge zu diesem Fehler freuen, nicht nur über eine Lösung,

Lesen Sie auch die Ratschläge zu json对象没有functionTypeigenschaften

Und versuchen Sie, ein JSON-Objekt wie dieses zu destrukturieren

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);
})();