Fungsi peta tidak berfungsi dengan JSON yang diterima (ralat: Tidak ditangkap (dalam janji) TypeError: datas.map bukan fungsi)

Question

Call method DataTable(config); //Semuanya baik

Kemudian muatkan JSON, function fetchers(apiUrl) //semuanya baik

Kemudian cetak JSON yang saya terima dalam konsol //semuanya baik

Kemudian saya cuba menggunakan Array.prototype.map() (sebelum itu saya menggunakan data setempat) dan kemudian saya mendapat ralat ini....

Tidak ditangkap (dalam janji) TypeError: datas.map bukan fungsi

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 
}

Sebelum ini, saya menggunakan data tempatan dan mencipta jadual daripadanya, semuanya baik-baik saja, tetapi dalam JSON yang dimuat turun, ini berlaku.

Saya berbesar hati untuk mendapatkan cadangan tentang ralat ini, bukan sekadar penyelesaian,

Baca juga nasihat tentang json对象没有functionjenis sifat

Dan cuba hancurkan objek json seperti ini

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

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

Answer 1

Jadi daripada respons api, anda tidak mempunyai tatasusunan, tetapi objek.

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

Jadi anda perlu mengulangi semua sifat dalam objek data. Anda boleh menggunakan Object.values() untuk menukar semua nilai hartanah kepada tatasusunan dan kemudian menggunakan kaedah peta.

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