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 stackoverflow.com/questions/2295496/convert-array-to-json — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jan 11, 2017 at 7: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
– Ruslan Abuzant, Commented Jan 11, 2017 at 7:38

Nina Scholz · Accepted Answer · 2017-01-11 07:52:10Z

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

edited Jan 11, 2017 at 7:52

answered Jan 11, 2017 at 7:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

void · Accepted Answer · 2017-01-11 07:44:36Z

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

Shubham · Accepted Answer · 2017-01-11 07:47:23Z

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

Collectives™ on Stack Overflow

How to modify Array of objects using JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related