如何在 JS 中格式化对数组对象的 API JSON 响应？

Question

我正在创建一个仪表板ReactJS，我正在使用它axios来进行 API 调用。API 响应const response = {  users: {    144: [      {        name: "Olivia",      },      {        mode: "c7",        fkProductsIds: [ 3, 2 ]      }    ],    168: [      {        name: "Jill",      },      {        mode: "p9",        fkProductsIds: [ 1, 4, 5, 3 ]      }    ],    202: [      {        name: "David",      },      {        mode: "p9",        fkProductsIds: [ 5, 1, 2 ]      }    ]  },  products: [    { 1: "PSM" },    { 2: "FP" },    { 3: "F2" },    { 4: "Mark4" },    { 5: "Astrid" },  ]}我想将此响应转换为数组，以便我可以轻松地使用此数据在 UI 的列表中显示。我已经尝试过的是render(){  // --> Logic start  var data = Object.keys(response.users).map( userId => {    var tmp = {}    tmp.id       = userId    tmp.name     = response.users[userId][0].name    tmp.mode     = response.users[userId][1].mode    tmp.products = response.users[userId][1].fkProductsIds    return tmp  })  // <-- Logic end  return(    <ul> { data.map(user=><UserRow user={user} />) } </ul>  )}输出data = [{    "id": "144",    "name": "Olivia",    "mode": "c7",    "products": [3, 2]  }, {    "id": "168",    "name": "Jill",    "mode": "p9",    "products": [1, 4, 5, 3]  }, {    "id": "202",    "name": "David",    "mode": "p9",    "products": [5, 1, 2]}]现在如何按用户数排序 products将product键中的产品 ID 转换为对象排序products键id

Answer 1

使用此代码更新您的数据对象

var data = Object.keys(response.users).map( userId => {

var tmp = {}

tmp.id       = userId

tmp.name     = response.users[userId][0].name

tmp.mode     = response.users[userId][1].mode

tmp.products = response.users[userId][1].fkProductsIds.sort().map((pId) => {

    let ret = {id: '', name: ''};

    ret.id = pId;

    let productById = response.products.filter((productIdx) => pId==Object.keys(productIdx)[0] );

    if(productById && productById.length) {

        ret.name = productById[0][pId];

    }

    return ret;

});

return tmp

})

Answer 2

您可以将sortmethod 与map.

const response = { users: { 144: [ { name: "Olivia", }, { mode: "c7", fkProductsIds: [ 3, 2 ] } ], 168: [ { name: "Jill", }, { mode: "p9", fkProductsIds: [ 1, 4, 5, 3 ] } ], 202: [ { name: "David", }, { mode: "p9", fkProductsIds: [ 5, 1, 2 ] } ] }, products: [ { 1: "PSM" }, { 2: "FP" }, { 3: "F2" }, { 4: "Mark4" }, { 5: "Astrid" }, ] }

getProductById = (id) => {

  var elem = response.products.find(elem => elem[id]);

  return {id : id, name: elem[id]}

}

var data = Object.keys(response.users)

        .map( userId => 

          ({

            id: userId, 

            name: response.users[userId][0].name, 

            mode: response.users[userId][1].mode, 

            products: response.users[userId][1].fkProductsIds.sort().map(getProductById)

        })).sort((a, b) => b.products.length - a.products.length)

console.log(data);