Get a distinct selection of properties in an array of objects using ES6

Question

Get a distinct selection of properties in an array of objects using ES6

I have an array of animals:

animals = [
 {name:"Dog", color_id:1, color:"Red" ....},
 {name:"Cat", color_id:2, color: "Blue"....}, 
 {name:"Fish", color_id:3, color:"Purple"...}, 
 {name:Mouse, color_id:2, color:"Blue" ...}
]

My goal is to create a list of unique colors:

colorList = [{value:1, label:"Red"}, {value:2, color:"Blue"}, {value:3, color:"Purple"}]

I attempted to do this using the following code snippet, but it did not give me the desired results:

animals.forEach(function(currAnimal){
      var i = propertyTypeOptions.findIndex(animals => animals.value == colorList.value);
      if(i <= -1){

        propertyTypeOptions.push({value: currAnimal.color_id, label:  currAnimal.color});
      }
    })

javascript arrays

Answer 1

Answer №1

By tracking colors and their corresponding color_ids, we can ensure each color is only added once:

const animals = [
 {name:"Dog", color_id:1, color:"Red" },
 {name:"Cat", color_id:2, color: "Blue"}, 
 {name:"Fish", color_id:3, color:"Purple"}, 
 {name:'Mouse', color_id:2, color:"Blue" }
];
const seenColors = new Set();

const output = animals.reduce((a, { color_id, color }) => {
  if (!seenColors.has(color)) {
    a.push({ color_id, color });
    seenColors.add(color);
  }
  return a;
}, []);

console.log(output);

Answer 2

By tracking colors and their corresponding color_ids, we can ensure each color is only added once:

const animals = [
 {name:"Dog", color_id:1, color:"Red" },
 {name:"Cat", color_id:2, color: "Blue"}, 
 {name:"Fish", color_id:3, color:"Purple"}, 
 {name:'Mouse', color_id:2, color:"Blue" }
];
const seenColors = new Set();

const output = animals.reduce((a, { color_id, color }) => {
  if (!seenColors.has(color)) {
    a.push({ color_id, color });
    seenColors.add(color);
  }
  return a;
}, []);

console.log(output);

Answer 3

Answer №2

One technique involves utilizing the reduce method to condense the array into an object. Subsequently, you can utilize Object.values to transform the object back into an array.

let animals = [{"name":"Dog","color_id":1,"color":"Red"},{"name":"Cat","color_id":2,"color":"Blue"},{"name":"Fish","color_id":3,"color":"Purple"},{"name":"Mouse","color_id":2,"color":"Blue"}]

let colorList = Object.values(animals.reduce((c, {color,color_id}) => {
  if (!c[color]) c[color] = {label: color,value: color_id};
  return c;
}, {}));

console.log(colorList);

Answer 4

One technique involves utilizing the reduce method to condense the array into an object. Subsequently, you can utilize Object.values to transform the object back into an array.

let animals = [{"name":"Dog","color_id":1,"color":"Red"},{"name":"Cat","color_id":2,"color":"Blue"},{"name":"Fish","color_id":3,"color":"Purple"},{"name":"Mouse","color_id":2,"color":"Blue"}]

let colorList = Object.values(animals.reduce((c, {color,color_id}) => {
  if (!c[color]) c[color] = {label: color,value: color_id};
  return c;
}, {}));

console.log(colorList);

Get a distinct selection of properties in an array of objects using ES6

Answer №1

Answer №2

Similar questions

Utilizing directive scope variables to generate dynamic templates

Setting response query correctly in Solr using AJAX

Guide to identifying rows in an array that match a particular month and year

Interval set does not refresh an integer

Enhance the original array of a recursive treeview in VueJS

Monitoring user engagement using Socket.io and Firebase

Does anyone have an idea of the origin of the item in this ajax .each function?

Utilize Node.js to compress folders and save them locally by zipping and downloading

What is the method for specifying a .php page as the html source when using Ext.Panel?

`The value of an array containing specific class elements is lost when accessed within a setTimeout

Troubleshooting Axios Error while Sending Data in MERN Stack Application

Leveraging jQuery in Content Scripts for Chrome Extensions

AngularJS: Sending form data to an external server results in an error due to restricted URI access

Enhance your TypeScript arrays using custom object equality functions

What are the methods for altering the material of a glTF model using THREE.js?

The pagination of SESSION Arrays does not automatically halt once all the arrays have been exhausted

"Enhance Your Search Input with Dynamic Suggestions from JSON Data Integrated with

Merge dates and values seamlessly in Google Sheets

PHP: Ensuring only one date occurrence within a multi-dimensional array

Exception thrown when accessing an index outside the range of an array