How can I extract an array of objects from a response in Angular?

Question

How can I extract an array of objects from a response in Angular?

Arrange array of objects from the received data.

Here is the data that I received.

[ {name:someName, value:20},
  {name:"", value:21}
  {name:someName, value:25}
  {name:someName , value:27}
  {name:"", value:21}
  {name:someName, value:20}
]

I am looking to group it in the following way.

 [    {name:someName, value:20},
      {name:"", value:42}
      {name:someName, value:25}
      {name:someName , value:27}          
      {name:someName, value:20}
    ]

I attempted to achieve this using filter and reduce functions in JavaScript.

javascript angular typescript

Answer 1

Answer №1

If you're looking to condense your code, you can use the reduce function like this:

const data = [ 
  {name: 'someName', value:20},
  {name: "", value:21},
  {name: 'someName1', value:25},
  {name: 'someName' , value:27},
  {name: "", value:21},
  {name: 'someName1', value:20},
];

const group = (data) =>

data.reduce((acc, { name, value }) => {

const item = acc.find((el) => el.name === name);

if (item) item.value += value;

else acc.push({ name, value });

return acc;
}, []);

console.log(group(data));

If you only want to group empty names find should be:

const item = acc.find((el) => el.name === name && !name);

Remember, empty strings are considered falsy values.

Answer 2

If you're looking to condense your code, you can use the reduce function like this:

const data = [ 
  {name: 'someName', value:20},
  {name: "", value:21},
  {name: 'someName1', value:25},
  {name: 'someName' , value:27},
  {name: "", value:21},
  {name: 'someName1', value:20},
];

const group = (data) =>

data.reduce((acc, { name, value }) => {

const item = acc.find((el) => el.name === name);

if (item) item.value += value;

else acc.push({ name, value });

return acc;
}, []);

console.log(group(data));

If you only want to group empty names find should be:

const item = acc.find((el) => el.name === name && !name);

Remember, empty strings are considered falsy values.

Answer 3

Answer №2

To streamline the process, convert the data to a Map and then utilize Array.prototype.map along with reduce method to aggregate the groups:

const data = [
  { name: 'a', value: 20 },
  { name: '', value: 21 },
  { name: 'a', value: 25 },
  { name: 'b', value: 27 },
  { name: '', value: 21 },
  { name: 'c', value: 20 },
];

console.log(
  [
    ...data
      .reduce(
        (result, item) =>
          result.set(
            item.name,
            (result.get(item.name) || []).concat(item),
          ),
        new Map(),
      )
      .values(),
  ].map((items) =>
    items.reduce(
      (result, item) =>
        console.log(result, item) || {
          name: item.name,
          value: item.value + result.value,
        },
    ),
  ),
);

Answer 4

To streamline the process, convert the data to a Map and then utilize Array.prototype.map along with reduce method to aggregate the groups:

const data = [
  { name: 'a', value: 20 },
  { name: '', value: 21 },
  { name: 'a', value: 25 },
  { name: 'b', value: 27 },
  { name: '', value: 21 },
  { name: 'c', value: 20 },
];

console.log(
  [
    ...data
      .reduce(
        (result, item) =>
          result.set(
            item.name,
            (result.get(item.name) || []).concat(item),
          ),
        new Map(),
      )
      .values(),
  ].map((items) =>
    items.reduce(
      (result, item) =>
        console.log(result, item) || {
          name: item.name,
          value: item.value + result.value,
        },
    ),
  ),
);

How can I extract an array of objects from a response in Angular?

Answer №1

Answer №2

Similar questions

The Javascript array does not function like a typical array

Adjust the height of a div in JQuery to fit new content after specifying a height previously

Intellisense for dispatch types in Redux Toolkit

Guide on how to bypass IDM when downloading a PDF file through a GET request

``Can someone provide guidance on how to showcase the validation check result for a text-field in the snackbar using Vuet

Encountered an error while attempting to install the @typescript-eslint/eslint-plugin

AFrame: keeping an element's world position and rotation intact while reparenting

What steps can be taken to resolve the mouse-pointer problem?

Do server-side or client-side rendering render dynamic routes in Next.js?

The Datetimepicker component outputs the date in datetime format rather than a timestamp

What is the best way to transfer data from a database query to Vue?

Retrieving information from a .json file using TypeScript

Troubleshooting dynamic route issues in Angular 6 when making changes in *ngFor

Step-by-Step Guide: Crafting a Non-Ajax Popup Chat Application

Printing Apex Oracle reports using Internet Explorer

Swapping out data points using JQuery

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

Disappearing Cloned Form Fields in jQuery

Angular API snapshot error: The type 'IJobs' does not match the expected type 'IJobs[]'

What is the process for validating multiple check boxes using the reactive forms module?