Operating with JavaScript arrays and objects

Question

Operating with JavaScript arrays and objects

My JavaScript array/object consists of the following data:

[
  {
    "name": "A",
    "selected_color": "Red"
  },
  {
    "name": "B",
    "selected_color": "Green"
  },
  {
    "name": "C",
    "selected_color": "Blue"
  },
  {
    "name": "D",
    "selected_color": "Red"
  }
]

What steps should I take to transform it into the desired format below?

[
  {
    "color": "Red",
    "count": "2"
  },
  {
    "color": "Green",
    "count": "1"
  },
  {
    "color": "Blue",
    "count": "1"
  }
]

I aim to filter values based on the 'selected_color' key and keep track of how many times each specific color was selected.

javascript multidimensional-array javascript-objects

Answer 1

Answer №1

Optimize with .reduce method

const data = [
  {
    "name": "X",
    "color_selected": "Yellow"
  },
  {
    "name": "Y",
    "color_selected": "Blue"
  },
  {
    "name": "Z",
    "color_selected": "Yellow"
  }
];

const result = data.reduce((acc, current) => {
  const {color_selected} = current;
  const colorObject = acc.find(({color}) => color === color_selected );

  if(colorObject) {
    colorObject.quantity++;
  } else {
    acc.push({color: color_selected, quantity: 1});
  }

  return acc;
  
}, []);

console.log(result);
/*

[
  { color: 'Yellow', quantity: 2 },
  { color: 'Blue', quantity: 1 }
]

*/

Answer 2

Optimize with .reduce method

const data = [
  {
    "name": "X",
    "color_selected": "Yellow"
  },
  {
    "name": "Y",
    "color_selected": "Blue"
  },
  {
    "name": "Z",
    "color_selected": "Yellow"
  }
];

const result = data.reduce((acc, current) => {
  const {color_selected} = current;
  const colorObject = acc.find(({color}) => color === color_selected );

  if(colorObject) {
    colorObject.quantity++;
  } else {
    acc.push({color: color_selected, quantity: 1});
  }

  return acc;
  
}, []);

console.log(result);
/*

[
  { color: 'Yellow', quantity: 2 },
  { color: 'Blue', quantity: 1 }
]

*/

Answer 3

Answer №2

If you want to organize the data by color, you can achieve this using the groupBy function like so:

let items = [
{
    "name": "X",
    "selected_color": "Orange"
},
{
    "name": "Y",
    "selected_color": "Yellow"
},
{
    "name": "Z",
    "selected_color": "Red"
},
{
    "name": "W",
    "selected_color": "Orange"
}
];

let groupByColor = (arr, key) => {
    return arr.reduce((result, item) => {
        (result[item[key]] = result[item[key]] || []).push(item);
        return result;
    }, {});
};

let groupedItems = groupByColor(items, "selected_color");
let organizedData = Object.keys(groupedItems).map(color => ({'color': color, 'count': groupedItems[color].length}) );

console.log(organizedData);

Answer 4

If you want to organize the data by color, you can achieve this using the groupBy function like so:

let items = [
{
    "name": "X",
    "selected_color": "Orange"
},
{
    "name": "Y",
    "selected_color": "Yellow"
},
{
    "name": "Z",
    "selected_color": "Red"
},
{
    "name": "W",
    "selected_color": "Orange"
}
];

let groupByColor = (arr, key) => {
    return arr.reduce((result, item) => {
        (result[item[key]] = result[item[key]] || []).push(item);
        return result;
    }, {});
};

let groupedItems = groupByColor(items, "selected_color");
let organizedData = Object.keys(groupedItems).map(color => ({'color': color, 'count': groupedItems[color].length}) );

console.log(organizedData);

Operating with JavaScript arrays and objects

Answer №1

Answer №2

Similar questions

Proper method for validating Jwt

The AJAX call for fetching logged in users is coming back as undefined

I'm puzzled as to why a div tag suddenly becomes invisible when I attempt to link it with a v-for directive in my code

Refreshing a Node.js server page upon receiving a JSON update

Unspecified OrbitControls Compatibility Issue between Angular2 and Three.js

Looking to prevent printing and saving a webpage directly from the file menu using JQUERY or JavaScript

Remove the active class from a list item using History.js

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Issue encountered while constructing my application (utilizing the "yarn run build" command and in Vercel)

Unusual HTML Structure (content misplaced or out of order?)

Retrieving objects from JSON data

How to hide an image in the React carousel display

A program that saves numerous data from a JSON dictionary into an array

What is the best way to transform an array of objects into MenuItems for a Material-UI Select component?

Error parsing data in the $.ajaxSetup() function of JQuery

Tips for utilizing JavaScript functions within Vue directives?

Convert JSON data into an HTML table with custom styling

What are the best methods for calculating the total of multi-dimensional arrays with specified conditions?

I am having trouble adding multiple items on different occasions - is it something to do with JQUERY

The Quivering Quandaries of Implementing Jquery Accordions