Combining arrays of objects using JSON format in JavaScript

Question

Combining arrays of objects using JSON format in JavaScript

Here is an example of a JSON file:

[
  {
    "stores": [ 
        {
          "name" : "My store",
          "location" : "NY"
         },
         { 
          "name" : "Other store",
          "location" : "FL"
         },
         {
          "name" : "My other store",
          "location" : "NY"
         }
     ],
  },
  {
    "stores": [ 
        {
          "name" : "Another My store",
          "location" : "NY"
         },
         { 
          "name" : "Some Other store",
          "location" : "FL"
         },
         {
          "name" : "Secondary store",
          "location" : "NY"
         }
     ],
  }
]

The goal is to combine the data into one single array:

[
        {
          "name" : "My store",
          "location" : "NY"
         },
         { 
          "name" : "Other store",
          "location" : "FL"
         },
         {
          "name" : "My other store",
          "location" : "NY"
         },
         {
          "name" : "Another My store",
          "location" : "NY"
         },
         { 
          "name" : "Some Other store",
          "location" : "FL"
         },
         {
          "name" : "Secondary store",
          "location" : "NY"
         }
]

I am currently working on a loop to achieve this, but I am unsure how to group all the items together:

const input = [
  {
    "stores": [ 
        {
          "name" : "My store",
          "location" : "NY"
         },
         { 
          "name" : "Other store",
          "location" : "FL"
         },
         {
          "name" : "My other store",
          "location" : "NY"
         }
     ],
  },
  {
    "stores": [ 
        {
          "name" : "Another My store",
          "location" : "NY"
         },
         { 
          "name" : "Some Other store",
          "location" : "FL"
         },
         {
          "name" : "Secondary store",
          "location" : "NY"
         }
     ],
  }
];

let grouped = []
input.forEach(item => {
    const store = Object.keys(item.stores)
  console.log(store)
})

javascript arrays json

Answer 1

Answer №1

Utilize the Array#flatMap() method:

function combineStores(array) {
  // Transform each element to its 'stores' array, then flatten all of them
  return array.flatMap(element => element.stores);
}

Give it a go:

console.config({ maximize: true });

function combineStores(array) {
  return array.flatMap(element => element.stores);
}

const input = [
    {
        stores: [
            { name: 'My store', location: 'NY' },
            { name: 'Other store', location: 'FL' },
            { name: 'My other store', location: 'NY' }
        ]
    },
    {
        stores: [
            { name: 'Another My store', location: 'NY' },
            { name: 'Some Other store', location: 'FL' },
            { name: 'Secondary store', location: 'NY' }
        ]
    }
];

console.log(combineStores(input))

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 2

Utilize the Array#flatMap() method:

function combineStores(array) {
  // Transform each element to its 'stores' array, then flatten all of them
  return array.flatMap(element => element.stores);
}

Give it a go:

console.config({ maximize: true });

function combineStores(array) {
  return array.flatMap(element => element.stores);
}

const input = [
    {
        stores: [
            { name: 'My store', location: 'NY' },
            { name: 'Other store', location: 'FL' },
            { name: 'My other store', location: 'NY' }
        ]
    },
    {
        stores: [
            { name: 'Another My store', location: 'NY' },
            { name: 'Some Other store', location: 'FL' },
            { name: 'Secondary store', location: 'NY' }
        ]
    }
];

console.log(combineStores(input))

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 3

Answer №2

const storesData = [
  {
    stores: [
      {
        name: "Best Buy",
        location: "CA",
      },
      {
        name: "Target",
        location: "TX",
      },
      {
        name: "Walmart",
        location: "NY",
      },
    ],
  },
  {
    stores: [
      {
        name: "Apple Store",
        location: "CA",
      },
      {
        name: "Home Depot",
        location: "TX",
      },
      {
        name: "Costco",
        location: "NY",
      },
    ],
  },
];

// Initialize the result array with an empty `stores` property
const result = [{stores: []}]
// Iterate through each object in the storesData array
storesData.forEach(object => {
  // For each object, retrieve the `stores` property and 
  // append its contents to `result[0].stores`
  result[0].stores.push(...object.stores);
})
console.log(result);

Answer 4

const storesData = [
  {
    stores: [
      {
        name: "Best Buy",
        location: "CA",
      },
      {
        name: "Target",
        location: "TX",
      },
      {
        name: "Walmart",
        location: "NY",
      },
    ],
  },
  {
    stores: [
      {
        name: "Apple Store",
        location: "CA",
      },
      {
        name: "Home Depot",
        location: "TX",
      },
      {
        name: "Costco",
        location: "NY",
      },
    ],
  },
];

// Initialize the result array with an empty `stores` property
const result = [{stores: []}]
// Iterate through each object in the storesData array
storesData.forEach(object => {
  // For each object, retrieve the `stores` property and 
  // append its contents to `result[0].stores`
  result[0].stores.push(...object.stores);
})
console.log(result);

Combining arrays of objects using JSON format in JavaScript

Answer №1

Answer №2

Similar questions

Children can easily access multiple items within a list by using the ul tag

Ways to circumvent ng switch and create a component based on type

Notification of array being converted to a string

A simple way to deactivate a React component (or the onClick event itself) using the onClick event

Data is successfully being stored in an array in AngularJS, however, it is not appearing in the user interface

What could be the reason for Object.assign failing to update a key in my new object?

JSON data parsing error: The field "item" does not contain a value

Guide to setting up a backend system using AJAX, PHP, and MySQL to handle dynamic video sources in conjunction with Google TV Templates

Exploring threejs to project onto a cylindrical surface

Tips for adjusting image hues in Internet Explorer?

Next.js- The requested resource is missing the 'Access-Control-Allow-Origin' header

Tips for verifying the input field with specific requirements in Angular 6

Modifying the color of a header through clicking on a specific anchor link

In the world of web development with JavaScript, jQuery, and EasyUI, we often encounter situations where the parameter

Add a variable from a callback function in AJAX's success response

What is the proper way to configure QuoteName settings in Json.Net?

Refusing to cease downloading music on the local server through the embedded audio element

Transform the jQuery Mobile slider into a jQuery UI slider and update the text

Serializing a JSON object to a C# class

Locate XML attribute in VS code and substitute it with the product of the current value and a