Reduce nested array of objects to array of objects

Question

I have an array like

Const array=[
{
id:1,
name:"abc",
Address:[
 {
 City: "something",
 Country: "first country"
 },
 {
 City: "other city",
 Country: "country"
 }
 ]
},
{
...........
}
];

I have to display this nested array objects as flat key value list. So How to reduce this like below.

Reducedarray = [
 { Id: 1, name: "abc" },
 { City: "something", country: "first country"},
 { City: "other city", country: "country"},
 { Id: 2, name: "bbc" },
 { City: "bbcsomething", country: "fbbct country"},
 { City: "other city", country: "country"}
]

Using reducearray i will map with object keys and display as key value list in html.

Need to display as flat list using jsx like below

Id: 1 Name: abc City: first ity Country: firstcountry City: second city Country: second country Id:2 Name: another name ..... ...... ....

Can anyone help me on this plz.. is it possible with reduce only?

• Ezekiel: is it mandatory you use reducearray? or anything else is fine?
• krishna: Not accepting for loops and nested maps at reviewer end. He mentioned to use reduce for outer array. That is the confusion. Because even after reducing i have to show key value pair with jsx.
• Ezekiel: for loops can show key value pair, using for(x in y) loop, x is the key, but I understand you if not accepting nested map, tho i havent tried it, thinking about a way around it, seems sort of inefficient

Answer 1

Solution with reduce:

const data = [{ id: 1, name: "abc", Address: [{ City: "something", Country: "first country" }, { City: "other city", Country: "country" }] }, { id: 2, name: "dfe", Address: [{ City: "something1", Country: "second country" }, { City: "city", Country: "new country" }] }];
const Reducedarray = data.reduce((acc, { Address, ...rest }) => (
 [...acc, rest, ...Address]
), []);
console.log(Reducedarray );

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

const array= [
{
id:1,
name:"abc",
Address:[
 {
 City: "something",
 Country: "first country"
 },
 {
 City: "other city",
 Country: "country"
 }
 ]
},
];
const array2 = []
for(let el of array) {
 
 if(el.id) array2.push({id: el.id, name: el.name})
 
 if(el.Address) {
 
 for(let element of el.Address) {
 
 array2.push({ city: element.City, country: element.Country})
 }
 }
 
 
}
console.log(array2)

Answer 3

You could take a flat map with the destructured rest object and Address array.

const
 array = [{ id: 1, name: "abc", Address: [{ City: "something", Country: "first country" }, { City: "other city", Country: "country" }] }],
 result = array.flatMap(({ Address, ...o }) => [o, ...Address]);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

• krishna: Yeah but while fetching this array into jsx i need to map with keys right? Is it possible to get only with reduce? Need to display like flat list irrespective of nested array of objects
• Nina Scholz: do you get the wanted result? why reduce?
• Nina Scholz: PR ...........?
• krishna: Could you please check my jsx result how i need. Sorry i have not applied code tag for that
• krishna: I mean code reviewer not accepting all maps and for loops. He mentioned to use reduce😞