Arranging Data in Arrays using Angular 4 GroupBy Feature

Question

Arranging Data in Arrays using Angular 4 GroupBy Feature

I'm working with an array structured like this:

var data = [
  {
    student: "sam",
    English: 80,
    Std: 8
  },
  {
    student: "sam",
    Maths: 80,
    Std: 8
  },
  {
    student: "john",
    English: 80,
    Std: 8
  },
  {
    student: "john",
    Maths: 80,
    Std: 8
  }
];

My goal is to calculate the total marks for a specific student, regardless of subject (in this case, student 'sam').

To achieve this, I plan to filter the data array by student name and then iterate through the filtered data entries to calculate the total marks for that student.

I am wondering if there is a groupBy function available in TypeScript similar to SQL that could simplify this task.

javascript angular typescript group-by

Answer 1

Answer №1

To achieve this task, one can utilize a simple reduce method on the array. The reduce function will loop through each item in the array and apply the provided predicate function to it. Each iteration should output the accumulator object/array/value.

If you are unsure about the desired data structure, you have the flexibility to control it by manipulating the function passed to reduce.

  studentScores = this.data.reduce((accumulator, item) => {
    const key = Object.keys(item)
      .filter(k => k !== 'student')
      .filter(k => k !== 'Std')[0];
    const prevValue = accumulator[item.student] || 0;
    const studentName = item.student;
    accumulator[studentName] = prevValue + item[key];
    return accumulator;
  }, {});

You can find a functional example on StackBlitz at https://stackblitz.com/edit/angular-xcjzzf

Answer 2

To achieve this task, one can utilize a simple reduce method on the array. The reduce function will loop through each item in the array and apply the provided predicate function to it. Each iteration should output the accumulator object/array/value.

If you are unsure about the desired data structure, you have the flexibility to control it by manipulating the function passed to reduce.

  studentScores = this.data.reduce((accumulator, item) => {
    const key = Object.keys(item)
      .filter(k => k !== 'student')
      .filter(k => k !== 'Std')[0];
    const prevValue = accumulator[item.student] || 0;
    const studentName = item.student;
    accumulator[studentName] = prevValue + item[key];
    return accumulator;
  }, {});

You can find a functional example on StackBlitz at https://stackblitz.com/edit/angular-xcjzzf

Answer 3

Answer №2

To organize the data, utilize a dictionary. You can easily group items by creating a map, but since the names are changing, the task becomes challenging. Check out this link to view the code in action: stackblitz.

Answer 4

To organize the data, utilize a dictionary. You can easily group items by creating a map, but since the names are changing, the task becomes challenging. Check out this link to view the code in action: stackblitz.

Arranging Data in Arrays using Angular 4 GroupBy Feature

Answer №1

Answer №2

Similar questions

Highchart encountering issues with multiple Y axes

When the window is scrolled to 50%, I would like to load some additional data

Are you looking for a way to prevent the default behavior of an event in angular-ui-router 1.0.x? Check out

Highlighting menu elements when landing on a page and making another menu element bold upon clicking in WordPress

My code cannot send a POST request successfully, even though it works fine in Postman

What is the process for changing the border color of a material selection?

Choose options with selectize.js including option separators

React/React Hooks: Want to initiate input validation when a user deselects a checkbox

What is the best way to confirm checkbox selection based on MySQL data?

Can dates in the form of a String array be transmitted from the server to the client?

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

using Angular and RxJS to filter out an element from an array

Having trouble with npm global installation? Encountering the error message "Error: EACCES: permission denied

What are the steps to create two frames using Twitter Bootstrap?

What is the best way to utilize unique slash commands in Slack threads?

Unexpected TypeError when using Response.send()

Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Integrate the elements from the <template> section into the designated <slot> area

How can I prevent the enter key from working with Twitter Typeahead?

Retrieve a text and save it into a variable