[英]How to format API JSON response to an array object in JS?
I am creating a dashboard in ReactJS
and I am using axios
to make API calls.我正在
ReactJS
中创建仪表板,并且我正在使用axios
进行 API 调用。
API Response 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" },
]
}
I want to convert this response to an array so that I can easily use this data to show in a list on UI.我想将此响应转换为一个数组,以便我可以轻松地使用此数据在 UI 上的列表中显示。
What I already have tried is我已经尝试过的是
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 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]
}]
Now how to现在如何
products
products
数量对用户进行排序product
key to objectproduct
密钥中的产品 ID 转换为 objectproducts
key by id
id
对products
键进行排序Expected预期的
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" },
]
}
]
As you can see, all users are sorted by the number of products
they own and objects inside products
key of users is also sorted by id
.如您所见,所有用户都按他们拥有的
products
数量排序,并且用户products
键中的对象也按id
排序。
Update your data object with this code使用此代码更新您的数据 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
})
You could use sort
method in combination with map
.您可以将
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);
sort by products length:按产品长度排序:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.