How to modify Array of objects using JS?

Question

I have data that contains array objects and some objects contains arrays of objects like below:

Original :

[{
 "order": 1,
 "product": "A",
 "item": "A"
 }, {
 "order": 1,
 "product": "B",
 "item": "B"
 },
 {
 "order": 14,
 "product": "C",
 "item": "C",
 "lists": [{
 "order": 1,
 "product": "C1",
 "item": "c1"
 }, {
 "order": 1,
 "product": "c2",
 "item": "c3"
 }]
 }, {
 "order": 1,
 "product": "d",
 "item": "d"
 }, {
 "order": 72,
 "product": "e",
 "item": "e",
 "lists": [{
 "order": 2,
 "product": "e1",
 "item": "e1"
 }, {
 "order": 6,
 "product": "e2",
 "item": "e2"
 }]
 }, {
 "order": 1,
 "product": "e3",
 "item": "e3"
 }
]

I want to change the data like array of objects same as below,

Modified:

[{
 "order": 1,
 "product": "A",
 "item": "A"
}, {
 "order": 1,
 "product": "B",
 "item": "B"
}, {
 "order": 14,
 "product": "C",
 "item": "C"
}, {
 "order": 1,
 "product": "C1",
 "item": "c1"
}, {
 "order": 1,
 "product": "c2",
 "item": "c3"
}, {
 "order": 1,
 "product": "d",
 "item": "d"
}, {
 "order": 72,
 "product": "e",
 "item": "e"
}, {
 "order": 2,
 "product": "e1",
 "item": "e1"
}, {
 "order": 6,
 "product": "e2",
 "item": "e2"
}, {
 "order": 1,
 "product": "e3",
 "item": "e3"
}]

• Carsten Løvbo Andersen: This might help you stackoverflow.com/questions/2295496/convert-array-to-json
• Nina Scholz: have you tried something?
• Andreas: There's no such thing as a "JSON Object"
• Ruslan Abuzant: IMHO actually, JSON is mainly used to represent a set of values and not to manipulate them. Yes, what you want to is doable but it would be more convenient to do all re-arrangements in your computing layer (PHP, Ruby, Python) and get the JSON string ready to present/render.

Answer 1

You could use Array#reduce and check for lists and concat a new array with the actual values and the lists items, otherwise take the actual element.

var data = [{ order: 1, product: "A", item: "A" }, { order: 1, product: "B", item: "B" }, { order: 14, product: "C", item: "C", lists: [{ order: 1, product: "C1", item: "c1" }, { order: 1, product: "c2", item: "c3" }] }, { order: 1, product: "d", item: "d" }, { order: 72, product: "e", item: "e", lists: [{ order: 2, product: "e1", item: "e1" }, { order: 6, product: "e2", item: "e2" }] }, { order: 1, product: "e3", item: "e3" }],
 flat = data.reduce(function (r, a) {
 return r.concat(a.lists && [{ order: a.order, product: a.product, item: a.item }].concat(a.lists) || a);
 }, []);
console.log(flat);

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

Answer 2

Parse the array, then check if it has a list key or not, if it has then concatenate the list in the new array and delete the lists key and push the element itself otherwise just directly push the element.

var parsedData = [];
// Iterate through data array
data.forEach(function(el) {
 // If it doesnt have a list key directly push the element
 if (!el.hasOwnProperty("lists"))
 parsedData.push(el);
 // If it has a list key
 else {
 // Concat the list to the parsedData
 parsedData = parsedData.concat(el.lists);
 delete el.lists;
 // And push current item after deleting the list.
 parsedData.push(el);
 }
});

Live Code

var data = [{
 "order": 1,
 "product": "A",
 "item": "A"
 }, {
 "order": 1,
 "product": "B",
 "item": "B"
 },
 {
 "order": 14,
 "product": "C",
 "item": "C",
 "lists": [{
 "order": 1,
 "product": "C1",
 "item": "c1"
 }, {
 "order": 1,
 "product": "c2",
 "item": "c3"
 }]
 }, {
 "order": 1,
 "product": "d",
 "item": "d"
 }, {
 "order": 72,
 "product": "e",
 "item": "e",
 "lists": [{
 "order": 2,
 "product": "e1",
 "item": "e1"
 }, {
 "order": 6,
 "product": "e2",
 "item": "e2"
 }]
 }, {
 "order": 1,
 "product": "e3",
 "item": "e3"
 }
];
var parsedData = [];
// Iterate through data array
data.forEach(function(el) {
 // If it doesnt have a list key directly push the element
 if (!el.hasOwnProperty("lists"))
 parsedData.push(el);
 // If it has a list key
 else {
 // Concat the list to the parsedData
 parsedData = parsedData.concat(el.lists);
 delete el.lists;
 // And push current item after deleting the list.
 parsedData.push(el);
 }
});
document.write(JSON.stringify(parsedData));

Answer 3

This snippet might help you.

var data = [{
 "order": 1,
 "product": "A",
 "item": "A"
 }, {
 "order": 1,
 "product": "B",
 "item": "B"
 },
 {
 "order": 14,
 "product": "C",
 "item": "C",
 "lists": [{
 "order": 1,
 "product": "C1",
 "item": "c1"
 }, {
 "order": 1,
 "product": "c2",
 "item": "c3"
 }]
 }, {
 "order": 1,
 "product": "d",
 "item": "d"
 }, {
 "order": 72,
 "product": "e",
 "item": "e",
 "lists": [{
 "order": 2,
 "product": "e1",
 "item": "e1"
 }, {
 "order": 6,
 "product": "e2",
 "item": "e2"
 }]
 }, {
 "order": 1,
 "product": "e3",
 "item": "e3"
 }
];
var newObj = [];
data.forEach(function (val) {
 if(val.hasOwnProperty("lists")) {
 var lists = val.lists;
 
 delete val["lists"];
 
 newObj.push(val);
 
 lists.forEach(function (valList) {
 newObj.push(valList);
 });
 } else {
 newObj.push(val);
 }
});
console.log(JSON.stringify(newObj));