[英]Map parent array based on child array
I have an array where I've a name and details array that contains phone numbers and place objects.我有一个数组,其中包含电话号码和地点对象的名称和详细信息数组。 I am trying to separate the parent array by looping over the inner array.
我试图通过循环内部数组来分离父数组。 For example I have this array -
例如我有这个数组 -
const arr = [
{
id: 1,
name: 'Person 1',
details: [
{
phone: 9999999999,
place: 'Mumbai',
},
{
phone: 8888888888,
place: 'Pune'
}
]
},
{
id: 2,
name: 'Person 2',
details: [
{
phone: 7777777777,
place: 'Mumbai',
},
{
phone: 6666666666,
place: 'Pune'
}
]
}
]
I want to convert the array into the result array below, so I can sort, show, and list by ascending phone numbers.我想把数组转换成下面的结果数组,这样我就可以按电话号码升序排序、显示和列出。 I just need to convert the array to the below array result for now -
我现在只需要将数组转换为下面的数组结果 -
const result = [
{
id: 1,
name: 'Person 1',
details: [
{
phone: 9999999999,
place: 'Mumbai',
}
]
},
{
id: 1,
name: 'Person 1',
details: [
{
phone: 8888888888,
place: 'Pune'
}
]
},
{
id: 2,
name: 'Person 2',
details: [
{
phone: 7777777777,
place: 'Mumbai',
}
]
},
{
id: 2,
name: 'Person 2',
details: [
{
phone: 6666666666,
place: 'Pune'
}
]
}
]
Please help.请帮忙。
You can reduce the initial array to construct a new array.您可以减少初始数组以构造新数组。 For each iteration, you can map the
details
property of a person to a new array that will contain the phone
and place
, and additionally the id
and name
of that person.对于每次迭代,您可以将一个人的
details
属性映射到一个新数组,该数组将包含phone
和place
,以及该人的id
和name
。
const result = data.reduce((res, {id, name, details}) => { return res.concat(details.map(detail => ({ id, name, details: [detail] }))); }, []); console.log(result)
<script>const data=[{id:1,name:"Person 1",details:[{phone:9999999999,place:"Mumbai"},{phone:8888888888,place:"Pune"}]},{id:2,name:"Person 2",details:[{phone:7777777777,place:"Mumbai"},{phone:6666666666,place:"Pune"}]}];</script>
Above, instead of looping through the details
and appending to res
, I've used a shortcut by returning directly res
concatenated with the result of the map.上面,我没有遍历
details
并附加到res
,而是通过直接返回与地图结果连接的res
使用快捷方式。
Also, with the spread operator, you could do:此外,使用扩展运算符,您可以执行以下操作:
const result = data.reduce((res, {details, ...person}) => { return res.concat(details.map(detail => ({ details: [detail], ...person, }))); }, []); console.log(result)
<script>const data=[{id:1,name:"Person 1",details:[{phone:9999999999,place:"Mumbai"},{phone:8888888888,place:"Pune"}]},{id:2,name:"Person 2",details:[{phone:7777777777,place:"Mumbai"},{phone:6666666666,place:"Pune"}]}];</script>
const result = []
for(let i = 0; i < arr.length; i++){
for(let j = 0; j < arr[i].details.length; j++){
result.push({
...arr[i],
details: [arr[i].details[j]]
})
}
}
Using a for loop使用 for 循环
const arr = [
{
id: 1,
name: 'Person 1',
details: [
{
phone: 9999999999,
place: 'Mumbai',
},
{
phone: 8888888888,
place: 'Pune'
}
]
},
{
id: 2,
name: 'Person 2',
details: [
{
phone: 7777777777,
place: 'Mumbai',
},
{
phone: 6666666666,
place: 'Pune'
}
]
}
];
let result = [];
for(let i=0;i < arr.length;i++){
for(let j=0; j < arr[i].details.length;j++){
result.push({
id: arr[i].id,
name: arr[i].name,
details: arr[i].details[j]
});
}
}
console.log(result);
Simple forEach should do.简单的 forEach 应该可以。
const arr = [ { id: 1, name: "Person 1", details: [ { phone: 9999999999, place: "Mumbai" }, { phone: 8888888888, place: "Pune" } ] }, { id: 2, name: "Person 2", details: [ { phone: 7777777777, place: "Mumbai" }, { phone: 6666666666, place: "Pune" } ] } ]; const result = []; arr.forEach(row => { row.details.forEach(detail => { result.push({ "id": row.id, "name": row.name, "details": [detail] }); }) }); console.log(JSON.stringify(result, null, 2));
Here is my simple approach using reduce
:这是我使用
reduce
简单方法:
const result = arr.reduce((acc, entry) => {
const obj = []
entry.details.forEach(detail => {
obj.push({
...entry,
details: [
detail
]
})
});
return [...acc, ...obj];
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.