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

我正在

ReactJS

中创建一个仪表板，并使用

axios

进行API调用

API响应

const响应={
用户：{
144: [
{
姓名：“奥利维亚”，
},
{
模式：“c7”，
fkProductsIds:[3,2]
}
],
168: [
{
姓名：“吉尔”，
},
{
模式：“p9”，
fkProductsIds:[1,4,5,3]
}
],
202: [
{
姓名：“大卫”，
},
{
模式：“p9”，
fkProductsIds:[5,1,2]
}
]
},
产品：[
{1:“PSM”}，
{2:“FP”}，
{3:“F2”}，
{4:“Mark4”}，
{5:“阿斯特里德”}，
]
}

我想将这个响应转换成一个数组，这样我就可以轻松地使用这个数据在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>
  )
}

现在如何

按

产品的数量对用户进行排序

将

product

键中的产品ID转换为对象

按

id

预期的

const数据=[
{
身份证号码：168，
姓名：“吉尔”，
模式：“p9”，
产品：[
{id:1，名称：“PSM”}，
{id:3，名称：“F2”}，
{id:4，名称：“Mark”}，
{id:5，名称：“Astrid”}
]
},
{
id:202，
姓名：“大卫”，
模式：“p9”，
产品：[
{id:1，名称：“PSM”}，
{id:2，名称：“FP”}，
{id:5，名称：“Astrid”}
]
},
{
id:144，
姓名：“奥利维亚”，
模式：“c7”，
产品：[
{id:2，名称：“FP”}，
{id:3，名称：“F2”}，
]
}
]

---

如您所见，所有用户都按其拥有的

产品

的数量进行排序，而

产品

内的对象也按

id

进行排序

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

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

---

您可以将

sort

方法与

map

结合使用

const response={用户：{144:[{name:“Olivia”}，{mode:“c7”，fkProductsIds:[3,2]}]，168:[{name:“Jill”}，{mode:“p9”，fkProductsIds:[1,4,5,3]}，{name:“David，}，{mode mode:“p9”，fkProductsIds:[5,1,2]}，产品：[{1:“PSM”}，{2:“FP}，{3:{F2 4:“Mark4:}，}，{
getProductById=（id）=>{
var elem=response.products.find（elem=>elem[id]）；
返回{id:id，name:elem[id]}
}
var data=Object.keys（response.users）
.map（userId=>
({
id:userId，
名称：响应。用户[userId][0]。名称，
模式：响应。用户[userId][1]。模式，
产品：response.users[userId][1].fkProductsIds.sort（）.map（getProductById）
})).sort（（a，b）=>b.products.length-a.products.length）
控制台日志（数据）

您是否尝试使用Array.sort函数进行排序？如果我在

forEach

函数中使用

sort

方法，If将对productIds数组进行排序，但我希望用户按照他们首先拥有的产品数量进行排序。