如何在 JS 中格式化 API JSON 響應數組 object？

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

Output

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 轉換為 object
3. 按id對products鍵進行排序

預期的

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

如您所見，所有用戶都按他們擁有的products數量排序，並且用戶products鍵中的對象也按id排序。

Answer 1

使用此代碼更新您的數據 object

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

您可以將sort方法與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);

Answer 3

按產品長度排序：

 const 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] }]; data.sort((a,b) => a.products.length - b.products.length); console.log(data)