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"
}]

This might help you http://stackoverflow.com/questions/2295496/convert-array-to-json — Carsten Løvbo Andersen, Jan 11 '17 at 07:37
[There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) — Andreas, Jan 11 '17 at 07:37
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. — Ruslan Abuzant, Jan 11 '17 at 07:38

Nina Scholz · Answer 1 · 2017-01-11T07:52:10.743

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

score 0 · Answer 2 · answered Jan 11 '17 at 07:44

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

score 0 · Answer 3 · answered Jan 11 '17 at 07:47

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

How to modify Array of objects using JS?

3 Answers3