JavaScript Grouping Arrays

Question

JavaScript Grouping Arrays

I am working with an array and need to filter it by both Country and Service.

So far, I have successfully filtered the array by Country. Now, I want to achieve the same filtering process based on the Service as well.

Here is a snippet of the array:

[
   {
      "Country":"CHINA",
      "details":"V2020",
      "Service":"BUSINESS",
   },
   {
      "Country":"CHINA",
      "details":"V3030",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Bus-Trip",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Comm-Trip",
      "Service":"COMMUNICATION",
   },

   ];

Currently, I have used the following code to filter the data by country:

let objectData = Data.reduce(function (acc,cur) {  
    if (!acc[cur.Country])
    acc[cur.Country] =  { data : []};
    acc[cur.Country].data.push(cur)
    return acc;
},
{} );

Although this code effectively filters the array by country, my goal now is to filter by both country and service SIMULTANEOUSLY. The desired result should be structured like below:

  [
    {
        Country :"CHINA",
        Services : [
             {"name":"BUSINESS", data : [{"details":"V2020"},{"details":"V3030"}]},
        ] 
       },
       {
        Country :"USA" , 
         Services : [
             {"name":"BUSINESS", data : [{"details":"Bus-Trip20"}]},
             {"name":"COMMUNICATION", data : [{"details":"Comm-Trip30"}]},

        ] 
       },
       
   ]

javascript

Answer 1

Answer №1

There are two main steps in this algorithm: creating the data and then formatting it correctly.
To collect the data, use the Array#reduce method. If there is a key in the result object for a particular country, create a property with that key, set the country, and initialize an empty array for services.
Check if there is a service property for each entry. If not, create a new property with the service name and an empty data array. Then push the details into this array.
Retrieve an array from the created result object using Object.values.
Lastly, since services are also objects, iterate over them using Array#forEach and Object.values to convert them all into arrays.

let data = [
   {
      "Country":"CHINA",
      "details":"V2020",
      "Service":"BUSINESS",
   },
   {
      "Country":"CHINA",
      "details":"V3030",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Bus-Trip",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Comm-Trip",
      "Service":"COMMUNICATION",
   }
];

let res = Object.values(data.reduce((acc, cur) => {
    if (!acc[cur.Country]) {
        acc[cur.Country] = {Country: cur.Country, Services: []};
    }
    if (!acc[cur.Country].Services[cur.Service]) {
        acc[cur.Country].Services[cur.Service] = {name: cur.Service, data: []};
    }
    acc[cur.Country].Services[cur.Service].data.push({details: cur.details});
    return acc;
}, {}));

res.forEach(obj => {
   obj.Services = Object.values(obj.Services);
});

console.log(res);

Answer 2

There are two main steps in this algorithm: creating the data and then formatting it correctly.
To collect the data, use the Array#reduce method. If there is a key in the result object for a particular country, create a property with that key, set the country, and initialize an empty array for services.
Check if there is a service property for each entry. If not, create a new property with the service name and an empty data array. Then push the details into this array.
Retrieve an array from the created result object using Object.values.
Lastly, since services are also objects, iterate over them using Array#forEach and Object.values to convert them all into arrays.

let data = [
   {
      "Country":"CHINA",
      "details":"V2020",
      "Service":"BUSINESS",
   },
   {
      "Country":"CHINA",
      "details":"V3030",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Bus-Trip",
      "Service":"BUSINESS",
   },
   {
      "Country":"USA",
      "details":"Comm-Trip",
      "Service":"COMMUNICATION",
   }
];

let res = Object.values(data.reduce((acc, cur) => {
    if (!acc[cur.Country]) {
        acc[cur.Country] = {Country: cur.Country, Services: []};
    }
    if (!acc[cur.Country].Services[cur.Service]) {
        acc[cur.Country].Services[cur.Service] = {name: cur.Service, data: []};
    }
    acc[cur.Country].Services[cur.Service].data.push({details: cur.details});
    return acc;
}, {}));

res.forEach(obj => {
   obj.Services = Object.values(obj.Services);
});

console.log(res);

JavaScript Grouping Arrays

Answer №1

Similar questions

validation using ajax and php

Finding the best way to transfer text between DIV elements?

Challenge with executing javascript library (photo sphere viewer)

Struggling with loading react storybook

Encountering an ENOENT error while attempting to incorporate a style guide into next.js (react)

What is the method for asynchronously loading a javascript file that includes an ajax call?

Can you provide tips on how to center the title on the page?

Dates comparison causing Firestore security rules issue

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery

How can we maintain line breaks in Textfields when using React-Admin and Material UI?

Is there an easy method to verify if the local storage is devoid of any data?

Using Ajax to invoke a C# webmethod

Ways to retrieve information from a POST request

Issue encountered during Express installation for Node.js

Error Alert: React Native object cannot be used as a React child within JSON, leading to an Invariant Violation

Submenu animation that "bursts onto the scene"

Extract data from JSON object on the server side

JavaScript property counterparts

Tips for consolidating all functions into a single file for ReactJS inheritance:

Tips for correcting a React (functional component) error: "Signup Error: TypeError: Cannot read properties of null (reading 'protocol')"