Merge array of objects inside loop into new object

Question

Trying to create a new object, and then join all the objects from nested values from a JSON file.

The JSON data is rather large, so have taken a sample, and called it var items

Problem I am having is that the nested data is not updating the new object.

var items = [
    {
    "id": 11,
    "title": "Fruit Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Fruit order for 1 person",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Melon",
            "otherName": "Watermelon"
        },
        {
            "itemName": "Apple",
            "otherName": "Red apple"
        }
    ]

},
{
    "id": 12,
    "title": "Canned Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Canned order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Tomatoes",
            "otherName": "Diced tomato"
        }
    ]
},
{
    "id": 13,
    "title": "Dairy Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Dairy Order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": []
}
]
;

var copyItems = [];


for (let i = 0; i < items.length; i++) {
items[i].allItems = items[i].items;
  copyItems.push(items[i])
}

console.log(copyItems);


var copyItems = copyItems.map(function(elem){
    return elem.allItems;
}).join(",");

console.log(`These are the final items ${copyItems}`);

I am able to create the new object, and add the nested arrays to this. However I am trying to get the allItems object to display the information like the following:

[
    {
    "id": 11,
    "allItems": "Melon, Apple",
    "title": "Fruit Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Fruit order for 1 person",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Melon",
            "otherName": "Watermelon"
        },
        {
            "itemName": "Apple",
            "otherName": "Red apple"
        }
    ]

},
{
    "id": 12,
    "allItems": "Tomatoes",
    "title": "Canned Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Canned order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Tomatoes",
            "otherName": "Diced tomato"
        }
    ]
},
{
    "id": 13,
    "allItems": "",
    "title": "Dairy Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Dairy Order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": []
}
]

Here is my JSFiddle: https://jsfiddle.net/buogdvx9/6/

Javascript is still a language I am learning and working through, and some things still catch me out.

Thank you.

Clarify, please, which output do you expect. Some examples would be nice. — Xeelley
– Xeelley, Commented Oct 29, 2021 at 7:04
It is not clear what the expected output is. Your code seems to aim for one string output, listing all item names. But then you provide us with a an array of objects which has the additional property. Not clear which of the two you want. — trincot
– trincot, Commented Oct 29, 2021 at 7:08

Terry Lennox · Accepted Answer · 2021-10-29 07:20:18Z

1

You can use Array.map() to create the new array, then using some destructuring to create each new element in this array.

We create the allitems property on each new element by first mapping the sub items array to get a list of subitem names, then using Array.join() to create a comma separated string.

The arrow function you see as the first argument to Array.map is another way of writing function(args) { .. }.

const items = [ { "id": 11, "title": "Fruit Test", "releaseDateTime": "2021-10-21T10:50:00+09:30", "mainContent": "Fruit order for 1 person", "storeNames": [ "Store 1" ], "items": [ { "itemName": "Melon", "otherName": "Watermelon" }, { "itemName": "Apple", "otherName": "Red apple" } ]  }, { "id": 12, "title": "Canned Test", "releaseDateTime": "2021-10-21T10:50:00+09:30", "mainContent": "Canned order for 2 people", "storeNames": [ "Store 1" ], "items": [ { "itemName": "Tomatoes", "otherName": "Diced tomato" } ] }, { "id": 13, "title": "Dairy Test", "releaseDateTime": "2021-10-21T10:50:00+09:30", "mainContent": "Dairy Order for 2 people", "storeNames": [ "Store 1" ], "items": [] } ];

const result = items.map(({ id, ...rest}) => { 
    return { 
      id,
      allItems: rest.items.map(el => el.itemName).join(', '), 
      ...rest
    };
});

console.log(result)

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

edited Oct 29, 2021 at 7:20

answered Oct 29, 2021 at 7:10

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

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

2 Comments

JS_basic_knowledge Over a year ago

Thank you for the quick reply. This is exactly what I was after. This may be asking too much, but because I am still learning, the arrow in JS is still a little hard for me to follow. Is it possible to break it down so I can learn how you came to the outcome? And try the same with other examples I create? Your help has been very much appreciated either way.

Terry Lennox Over a year ago

Oh yes surely. I will update the answer!

vaira · Accepted Answer · 2021-10-29 07:23:36Z

Since you only want to update the existing object, using forEach to loop over each item in array, then loop over the prosperity with a map operator to get the array with itemName.

  items.forEach((obj) => {
      
      obj.allItems = obj.items.map((item) => item.itemName)
    });
    
    console.log(items)

Simple example:

   // iterating over the items
 for (let i = 0; i < items.length; i++) {
  
    let currentItem = items[i];
  
    currentItem.allItems = []; // adding new empty array
  
    for (let j = 0; j < currentItem.items.length; j++) {
      
        currentItem.allItems.push(currentItem.items[j].itemName);
    }

}

Working Example:

var items = [
    {
    "id": 11,
    "title": "Fruit Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Fruit order for 1 person",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Melon",
            "otherName": "Watermelon"
        },
        {
            "itemName": "Apple",
            "otherName": "Red apple"
        }
    ]

},
{
    "id": 12,
    "title": "Canned Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Canned order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": [
        {
            "itemName": "Tomatoes",
            "otherName": "Diced tomato"
        }
    ]
},
{
    "id": 13,
    "title": "Dairy Test",
    "releaseDateTime": "2021-10-21T10:50:00+09:30",
    "mainContent": "Dairy Order for 2 people",
    "storeNames": [
        "Store 1"
    ],
    "items": []
}
]
;
// since you only want to update the existing object, using map to loop over each item in array
items.forEach((obj) => {
  // using map to create the new array of just itemNames
  obj.allItems = obj.items.map((item) => item.itemName)
});

console.log(items)

Nitheesh · Accepted Answer · 2021-10-29 07:14:24Z

Just use the combination of Array.map and Array.join

Logic

Since you want to create a new array, run Array.map on the parent array.
On each nodes in the parent return the whole node with one extra key allItems.
For allItems create a new array from items array in each node and join then with space

var items = [{"id":11,"title":"Fruit Test","releaseDateTime":"2021-10-21T10:50:00+09:30","mainContent":"Fruit order for 1 person","storeNames":["Store 1"],"items":[{"itemName":"Melon","otherName":"Watermelon"},{"itemName":"Apple","otherName":"Red apple"}]},{"id":12,"title":"Canned Test","releaseDateTime":"2021-10-21T10:50:00+09:30","mainContent":"Canned order for 2 people","storeNames":["Store 1"],"items":[{"itemName":"Tomatoes","otherName":"Diced tomato"}]},{"id":13,"title":"Dairy Test","releaseDateTime":"2021-10-21T10:50:00+09:30","mainContent":"Dairy Order for 2 people","storeNames":["Store 1"],"items":[]}];
const newItems = items.map(node => ({ ...node, allItems: node.items.map(item => item.itemName).join(" ")}));
console.log(newItems);

Collectives™ on Stack Overflow

Merge array of objects inside loop into new object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related