What is the best way to choose all elements from an array based on their key and then combine their values?

Question

What is the best way to choose all elements from an array based on their key and then combine their values?

Currently, I am working on an application that allows users to read articles and take quizzes. Each article is assigned to a unique category with its own _id. Quiz attempts are stored in a separate table that references the articles, which in turn reference the categories.

To analyze quiz attempts, I have created an array of objects by looping through the data:

const userScoreArray = [];
   for(let i = 0; i < data[1].length; i++) {
     userScoreArray.push({[data[1][i]['dataValues']['article_id']]: data[1][i]['dataValues']['score']  }) // overall
   }

This array now contains quiz attempts per category like this:

[
{4: 5},
{4: 1},
{3: 6},
{5: 0}
// {category: score}
]

The challenge now is to extract objects with key "4" from the array, add their values together, and repeat the process for objects with key "5". While a loop might work, it's a bit overwhelming. Any suggestions on a more efficient approach?

javascript arrays object multidimensional-array

Answer 1

Answer №1

To efficiently extract and compare numbers for addition, you can utilize the Array.reduce iterator along with Object.keys() and Object.values().

let dataset = [
{4: 5},
{4: 1},
{3: 6},
{5: 0}
// { key: value }
];

const calculateTotalFor = num => {
  return dataset.reduce((sum, obj) => {
    return sum + (Object.keys(obj)[0] == num ? Object.values(obj)[0] : 0);
  }, 0);
}

console.log(calculateTotalFor(4))

Answer 2

To efficiently extract and compare numbers for addition, you can utilize the Array.reduce iterator along with Object.keys() and Object.values().

let dataset = [
{4: 5},
{4: 1},
{3: 6},
{5: 0}
// { key: value }
];

const calculateTotalFor = num => {
  return dataset.reduce((sum, obj) => {
    return sum + (Object.keys(obj)[0] == num ? Object.values(obj)[0] : 0);
  }, 0);
}

console.log(calculateTotalFor(4))

Answer 3

Answer №2

Here is an example of how you can utilize the reduce method:

const array = [{ 4: 5 }, { 4: 1 }, { 3: 6 }, { 5: 0 }];
const accArray = array.reduce((acc, obj) => {
  if (obj[4] ?? obj[5]) {
    acc += Object.values(obj)[0];
  }
  return acc;
 }, 0);

console.log(accArray); // 6

If you want more information on the reduce() method, you can refer to this MDN link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

When using reduce(), each iteration provides access to an accumulator, current element, and current index. In the example above, the initial accumulator value is set to zero. During each iteration, we check if the object contains a key equal to 4 or 5, and if true, we add the object's value to the accumulator before returning it (as per the reduce method behavior).

Note: The nullish coalescing operator (??) was used as a precaution in case you need to use 0 as a key ({0: any_value}), as the logical OR operator (||) works with falsy values.

Answer 4

Here is an example of how you can utilize the reduce method:

const array = [{ 4: 5 }, { 4: 1 }, { 3: 6 }, { 5: 0 }];
const accArray = array.reduce((acc, obj) => {
  if (obj[4] ?? obj[5]) {
    acc += Object.values(obj)[0];
  }
  return acc;
 }, 0);

console.log(accArray); // 6

If you want more information on the reduce() method, you can refer to this MDN link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

When using reduce(), each iteration provides access to an accumulator, current element, and current index. In the example above, the initial accumulator value is set to zero. During each iteration, we check if the object contains a key equal to 4 or 5, and if true, we add the object's value to the accumulator before returning it (as per the reduce method behavior).

Note: The nullish coalescing operator (??) was used as a precaution in case you need to use 0 as a key ({0: any_value}), as the logical OR operator (||) works with falsy values.

What is the best way to choose all elements from an array based on their key and then combine their values?

Answer №1

Answer №2

Similar questions

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

What is the process for including a JavaScript file in an HTML document?

Can you show me how to condense this using the ternary operator?

Delete items within the first 10 minutes of shutting it down

Snatching the lesson found within an iframe

Using Spring MVC and Thymeleaf to dynamically load new HTML pages on ajax calls

Retrieving an attribute through the act of clicking a button

Which framework should be used: client-side or server-side?

jQuery click event not working post Ajax request returned a 403 error

Substitute the string (3-11-2012) with a different date layout (3 november 2012)

Unexpected Issues with Page Refresh in AngularJS

Loop through an array of div IDs and update their CSS styles individually

Nextjs introduces an innovative "OnThisDay" functionality, leveraging getServerSideProps and Date.now() to provide real-time information

React Router malfunctioning on production environment when integrated with an Express backend

Troubleshooting Problem with MVC Ajax Requests

Tips for utilizing the onload function in jquery

Tips for obtaining the output of an asynchronous function that contains a query within a loop

The content of a Puppeteer page mysteriously disappears when transferred to another function

Ways to retrieve JSON string from responsetext in JavaScript

Is it possible to include three sorting states in jQuery DataTables: ASC, DESC, and NO_SORT?