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

        ] 
       },
       
   ]

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Capture data from a Telegram bot and store it in a Google Sheet

I am trying to use a spreadsheet through a Telegram bot as a TODO list so that when I input something on my phone, it is saved in the spreadsheet. (I'm following this tutorial https://www.youtube.com/watch?v=XoTpdxbkGGk, which seems accurate with Goog ...

The Javascript Switch statement is experiencing some functional issues

I am facing an issue where I need to handle different scenarios based on a decimal value, and I thought of using a Switch/case statement for this purpose. However, the code is not working as expected. Below is the snippet of code in question: var spread ...

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

I came across this code on the internet http://jsfiddle.net/bvotcode/owhq5jat/ When I select a new item, the old item is replaced by the new item. How can I add more items without replacing them when I click "dropdown list"? Thank you <select id=&qu ...

Validation of JSON Failed

Encountered a 400 Bad Request error while attempting to POST an answer using Postman, it appears to be a validator issue. Despite multiple attempts, I have yet to resolve this issue. Below are details of the JSON data being sent in the POST request along w ...

Is there a way to link Dom $(this) from a different function?

Could you please review this code and advise on how I can bind $(this) in an external function within a DOM event? $(".adder").on("click", function(){ updateText(); }); function updateText(){ $(this).next(".mapper").html("Got You!"); } <scrip ...

Utilize Jquery to locate and update the text of all div elements that have an empty id attribute

I need help with a task involving a list of divs, some with ids and some without. My goal is to identify all the divs within a specific class that have empty ids and change their inner text to say "no data available". Can this be done? My attempt using $( ...

Is it possible to use null and Infinity interchangeably in JavaScript?

I've declared a default options object with a max set to Infinity: let RANGE_DEFAULT_OPTIONS: any = { min: 0, max: Infinity }; console.log(RANGE_DEFAULT_OPTIONS); // {min: 0, max: null} Surprisingly, when the RANGE_DEFAULT_OPTIONS object is logged, i ...

Troubleshooting: Resolving issues with Vue's global EventBus in my project

I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from th ...

The select2 does not show the selected information

My select2 is not selecting the value when in edit mode. You can view my data here. Upon clicking the edit data button, it should select "settings" as the parent's value, but unfortunately, it's not working. You can see the issue here. Modal Sc ...

Error encountered while attempting to convert CSV file: InvalidStateError

I've implemented a JavaScript function to be triggered by the 'onclick' event of an HTML button: function exportReportData2() { if ($("#Report").val() != "") { var screenParametersList = buildScreenParameters(); var ...

Using the return statement to set a value from a callback function in TypeScript

As I retrieve data from an array of class People, each person has an attendance list represented by Observable<any[]>. // Defining the Person class class Person { id: number; name: string; attendance: Observable<any[]>; // Represents ...

endless refreshing material ui accordion

Facing an issue with infinite rerender while trying to create a controlled accordion component using Material UI accordion. Here is the code snippet, any insights on why this could be causing an infinite rerender? const [expanded, setExpanded] = React.us ...

Adjustable Cursor - modify size while in motion at high speeds

I've designed a unique custom cursor and I am looking to enhance its functionality by adjusting its scale dynamically during fast movements. Similar to the cursor on this website: Example.com Here is my custom cursor for reference: CodeSandBox What ...

Having difficulty updating the state with editorState retrieved from the server in ReactJs when using draftJs

Incorporating a rich text editor into React using draftJs has been successful. The editorState data is converted to raw data, stringified, and sent to the server for rendering on the front end. However, I am facing challenges in updating the editorState ...

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

The error message shows: "Unable to retrieve property 'opts' from an undefined source in google-auth-library"

My current task involves retrieving tokens from Google for a specific user. Here is the code snippet I'm using: const util = require('util'); return util.promisify(oauth2Client.getToken, {context: oauth2Client})(googleToken).then(tokens ...

Having difficulty accessing a public array item within chained AXIO transactions in VUE

I am currently facing an issue with a chained AXIOS call that is triggered from an array. The challenge I am encountering is ensuring that the second call completes before the first one initiates another API request, which seems to be working fine so far. ...

Resolving the dilemma of complete form validation in Jquery

I'm currently working on a PHP form that is being validated with jQuery. In this form, there is a radio button list. If the user clicks "Yes," then the textbox related to that radio button should not be validated. However, if the user clicks "No," the ...

The function is not triggered when the select tag is changed

I'm currently working on implementing a drop-down menu using the <select> element in HTML. Here is the code snippet I have so far: <select id="Parameter1" onchange="function1()"> <option value = "0105" name = "Frequency">Frequency ...

Having difficulty processing information retrieved from an ajax request in jQuery

Upon making a request to the server and converting the retrieved data into a table format, I utilize jQuery's .html() function to display it on the webpage. However, despite the data being visible on the page, I encounter issues when attempting to man ...