Using Javascript to organize an array of objects based on a specific condition

Question

Using Javascript to organize an array of objects based on a specific condition

Having an array of objects structured as follows:

obj = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3},
        {'name': 'Sam', 'age': 19, 'gender': 'male', 'color':'red', 'position':2},
        {'name': 'Harry', 'age': 16, 'gender': 'male', 'color':'red', 'position':1},
        {'name': 'Charles', 'age': 19, 'gender': 'male', 'color':'blue', 'position':2},
        {'name': 'Fred', 'age': 21, 'gender': 'male', 'color':'blue', 'position':3},
        {'name': 'Mike', 'age': 23, 'gender': 'male', 'color':'blue', 'position':1}]

The goal is to sort the objects in ascending order by position for each color. The expected output should be:

 obj = [{'name': 'Harry', 'age': 16, 'gender': 'male', 'color':'red', 'position':1},
        {'name': 'Sam', 'age': 19, 'gender': 'male', 'color':'red', 'position':2},
        {'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3},
        {'name': 'Mike', 'age': 23, 'gender': 'male', 'color':'blue', 'position':1}
        {'name': 'Charles', 'age': 19, 'gender': 'male', 'color':'blue', 'position':2},
        {'name': 'Fred', 'age': 21, 'gender': 'male', 'color':'blue', 'position':3}]

Attempted approach:

unique_colors = ['red', 'blue'];
for (var i in unique_colors){
  obj.forEach(function(x){
  if (i === x.colors){
  obj.sort((a,b) => a.position - b.position);
}
}
});

It didn't yield the desired results. Seeking assistance and guidance to rectify the issue. Thank you for your help. I'm still learning Javascript.

javascript arrays sorting javascript-objects

Answer 1

Answer №1

To find the index of a specific color and compare it, you can utilize the indexOf function.

let objects = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3},
        {'name': 'Sam', 'age': 19, 'gender': 'male', 'color':'red', 'position':2},
        {'name': 'Harry', 'age': 16, 'gender': 'male', 'color':'red', 'position':1},
        {'name': 'Charles', 'age': 19, 'gender': 'male', 'color':'blue', 'position':2},
        {'name': 'Fred', 'age': 21, 'gender': 'male', 'color':'blue', 'position':3},
        {'name': 'Mike', 'age': 23, 'gender': 'male', 'color':'blue', 'position':1}];
        
let availableColors = ['red','blue']

objects.sort((a,b) => {
  let indexA = availableColors.indexOf(a.color);
  let indexB = availableColors.indexOf(b.color) ;
  return indexA === indexB ? a.position-b.position : indexA - indexB 
});

console.log(objects);

Answer 2

To find the index of a specific color and compare it, you can utilize the indexOf function.

let objects = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3},
        {'name': 'Sam', 'age': 19, 'gender': 'male', 'color':'red', 'position':2},
        {'name': 'Harry', 'age': 16, 'gender': 'male', 'color':'red', 'position':1},
        {'name': 'Charles', 'age': 19, 'gender': 'male', 'color':'blue', 'position':2},
        {'name': 'Fred', 'age': 21, 'gender': 'male', 'color':'blue', 'position':3},
        {'name': 'Mike', 'age': 23, 'gender': 'male', 'color':'blue', 'position':1}];
        
let availableColors = ['red','blue']

objects.sort((a,b) => {
  let indexA = availableColors.indexOf(a.color);
  let indexB = availableColors.indexOf(b.color) ;
  return indexA === indexB ? a.position-b.position : indexA - indexB 
});

console.log(objects);

Answer 3

Answer №2

Here is a custom sorting algorithm:

const obj = [{
    name: "Tom",
    age: 17,
    gender: "male",
    color: "red",
    position: 3
  },
  {
    name: "Sam",
    age: 19,
    gender: "male",
    color: "red",
    position: 2
  },
  {
    name: "Harry",
    age: 16,
    gender: "male",
    color: "red",
    position: 1
  },
  {
    name: "Charles",
    age: 19,
    gender: "male",
    color: "blue",
    position: 2
  },
  {
    name: "Fred",
    age: 21,
    gender: "male",
    color: "blue",
    position: 3
  },
  {
    name: "Mike",
    age: 23,
    gender: "male",
    color: "blue",
    position: 1
  },
];

const result = obj.sort((a, b) => {
  if (a.color === b.color) {
    return a.position - b.position;
  } else return a.color - b.color;
});

console.log(result);

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Answer 4

Here is a custom sorting algorithm:

const obj = [{
    name: "Tom",
    age: 17,
    gender: "male",
    color: "red",
    position: 3
  },
  {
    name: "Sam",
    age: 19,
    gender: "male",
    color: "red",
    position: 2
  },
  {
    name: "Harry",
    age: 16,
    gender: "male",
    color: "red",
    position: 1
  },
  {
    name: "Charles",
    age: 19,
    gender: "male",
    color: "blue",
    position: 2
  },
  {
    name: "Fred",
    age: 21,
    gender: "male",
    color: "blue",
    position: 3
  },
  {
    name: "Mike",
    age: 23,
    gender: "male",
    color: "blue",
    position: 1
  },
];

const result = obj.sort((a, b) => {
  if (a.color === b.color) {
    return a.position - b.position;
  } else return a.color - b.color;
});

console.log(result);

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Using Javascript to organize an array of objects based on a specific condition

Answer №1

Answer №2

Similar questions

Using pg-promise to insert a UUID into the database

What are some tips for managing the hover effect using CSS3?

Using vue.js to compute properties for each object element

Choosing an option from a dropdown menu by extracting information from JSON content

Using async and await for uploading images

Utilizing the `theme` property in makeStyles with Material-UI

The validation feature in ASP.NET MVC does not seem to be functioning properly while using

jQuery problem: Unable to access a property that is undefined

What are the top JavaScript widget libraries for a measurement reporting web application?

Troubleshooting issues with AngularJS routing

Tips for displaying "No Results" without causing any lag in the browser

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

"An issue with Angular Http Get causing Status 0 to be consistently returned when using ng

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Running Jest encounters errors when there is ES6 syntax present in the node modules of a create-react-app project

Converting JSON object to a string

Retrieving the values of multiple selected options from various select fields simultaneously

A continuous jQuery method for updating select option values

The props in Vue 3 are not functioning as expected in child components even after being bound correctly, resulting in undefined values in the child component

Connect tinyMCE to knockout.js