如何在 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]

}]

现在如何

1. 按用户数排序 products

2. 将product键中的产品 ID 转换为对象

3. 排序products键id

Answer 1

使用此代码更新您的数据对象var data = Object.keys(response.users).map( userId => {var tmp = {}tmp.id&nbsp; &nbsp; &nbsp; &nbsp;= userIdtmp.name&nbsp; &nbsp; &nbsp;= response.users[userId][0].nametmp.mode&nbsp; &nbsp; &nbsp;= response.users[userId][1].modetmp.products = response.users[userId][1].fkProductsIds.sort().map((pId) => {&nbsp; &nbsp; let ret = {id: '', name: ''};&nbsp; &nbsp; ret.id = pId;&nbsp; &nbsp; let productById = response.products.filter((productIdx) => pId==Object.keys(productIdx)[0] );&nbsp; &nbsp; if(productById && productById.length) {&nbsp; &nbsp; &nbsp; &nbsp; ret.name = productById[0][pId];&nbsp; &nbsp; }&nbsp; &nbsp; 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) => {&nbsp; var elem = response.products.find(elem => elem[id]);&nbsp; return {id : id, name: elem[id]}}var data = Object.keys(response.users)&nbsp; &nbsp; &nbsp; &nbsp; .map( userId =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: userId,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: response.users[userId][0].name,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mode: response.users[userId][1].mode,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; products: response.users[userId][1].fkProductsIds.sort().map(getProductById)&nbsp; &nbsp; &nbsp; &nbsp; })).sort((a, b) => b.products.length - a.products.length)console.log(data);