Group and count the nested json response - Angular

Question

Im trying to bind value in Angular Material table, before that i need to process the GET response v

trying to achieve like below(just for understanding)

my faulty code

let filterByLocation = data.reduce((r, { group: location.country, ...object }) => {
    var finalArry = r.find(o => o.location === location);
    if (!finalArry) r.push(temp = { location, locationObj: [] });
    finalArry.locationObj.push(object);
    return r;
}, []);

console.log(filterByLocation);

thanks to @Nishant Dixit for his working snippet

const finalResponse = data.response.reduce((r, {
  location: {
    country: group
  },
  ...object
}) => {
  r[group] = r[group] || {
    location: group,
    locationObj: []
  };
  r[group].locationObj.push(object);
  return r;
}, {});

console.log(finalResponse)



const data = {
  "totalRec": 5,
  "response": [
  {
      "employee": {
        "uid": 1,
        "empName": "Jade"
      },
      "location": {
        "country": "UK",
        "subLocation": "London"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 2,
        "empName": "Mike"
      },
      "location": {
        "country": "UK",
        "subLocation": "Manchester"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Liya"
      },
      "location": {
        "country": "UK",
        "subLocation": "Southampton"
      },
      "department": {
        "sector": "HR"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "IT"
      }
    },
    {
      "employee": {
        "uid": 3,
        "empName": "Brad"
      },
      "location": {
        "country": "USA",
        "subLocation": "Texas"
      },
      "department": {
        "sector": "NON-IT"
      }
    }
  ]
};

but the problem is i'm getting result like

UK : {
location : "UK"
....
}

in html, i don't want to explicitly mention UK with dot operation like below, instead row.location

<ng-container matColumnDef="facility">
<mat-header-cell *matHeaderCellDef mat-sort-header> Facility</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.UK.location}} </mat-cell>
</ng-container>

could someone tell me how to convert this output like

location: {
country : 'UK'
}

or any random name like

obj: {
location: 'UK'
//rest of values for grouping
}

fiddle

Thanks to every one

Could you please update your post with response json? It would be easier for us to understand. — Dusayanta Prasad, Jul 01 '21 at 06:26
That's how reduce is expected to return the response. I would rather create a new object iterating through the key and value. — Dusayanta Prasad, Jul 01 '21 at 07:51
Refer this post https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects .Its trying to achieve the same thing. — Dusayanta Prasad, Jul 01 '21 at 07:55

score 1 · Accepted Answer · answered Jul 03 '21 at 22:04

You can do something like this:

const countryMap = {};
data.response.forEach(item => {
   countryMap[item.location.country] = [ ...( countryMap[item.location.country] || [] ), item];
});

Now, this is how the countryMap will look like:

Now, further to map it to the format you want, you can do this:

const mappedData = Object.entries(countryMap).map(entry => ({
   location: entry[0],
   response: entry[1]
}));

This will produce mappedData in this format:

Group and count the nested json response - Angular

1 Answers1