Organize the main array by subgroup values and merge corresponding fields

Question

Organize the main array by subgroup values and merge corresponding fields

I am having difficulty grouping an array with its sub-array. Here is the original array I am working with:

var people = [
  {
    name: "Bob",
    age: "20",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  },
  {
    name: "Mary",
    age: "21",
    car: {
      colour: "Orange",
      size: "Small",
      rpm: "20"
    }
  },
  {
    name: "Janet",
    age: "22",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  }
];

My goal is to group the data by the color of the car object in this specific format:

var cars = [
  {
    colour: "Blue",
    size: "Big",
    rpm: "380",
    people: [{ name: "Bob", age: "20" }, { name: "Janet", age: "22" }]
  },
  {
    colour: "Orange",
    size: "Small",
    rpm: "20",
    people: [{ name: "Mary", age: "21" }]
  }
];

As a newcomer to JavaScript, any assistance or suggestions you can offer would be greatly appreciated. I am open to using external libraries if necessary.

EDIT In response to @ths, I managed to extract the car object into the main array successfully using the following code:

resultArray = [];

people.forEach(function(people) {
    let carObj = people.car;
    console.log("TCL: carObj", carObj)
    carObj["people"] = people;
    resultArray.push(carObj);
  });

However, I encountered difficulties when trying to merge the arrays based on different car types.

javascript arrays

Answer 1

Answer №1

var people = [
  {
    name: "Bob",
    age: "20",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  },
  {
    name: "Mary",
    age: "21",
    car: {
      colour: "Orange",
      size: "Small",
      rpm: "20"
    }
  },
  {
    name: "Janet",
    age: "22",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  }
];

let carMap = {};

people.forEach(p => {
  const carKey = `${p.car.colour}-${p.car.size}-${p.car.rpm}`;
  
  if (carKey in carMap) {
    carMap[carKey].people.push({
      name: p.name,
      age: p.age
    });
  } else {
    carMap[carKey] = {
      ...p.car,
      people: [{
        name: p.name,
        age: p.age
      }]
    };
  }
})

console.log(Object.values(carMap));

Create a mapping of cars to people by combining the attributes of each car. Retrieve the values of the carMap at the end.

Answer 2

var people = [
  {
    name: "Bob",
    age: "20",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  },
  {
    name: "Mary",
    age: "21",
    car: {
      colour: "Orange",
      size: "Small",
      rpm: "20"
    }
  },
  {
    name: "Janet",
    age: "22",
    car: {
      colour: "Blue",
      size: "Big",
      rpm: "380"
    }
  }
];

let carMap = {};

people.forEach(p => {
  const carKey = `${p.car.colour}-${p.car.size}-${p.car.rpm}`;
  
  if (carKey in carMap) {
    carMap[carKey].people.push({
      name: p.name,
      age: p.age
    });
  } else {
    carMap[carKey] = {
      ...p.car,
      people: [{
        name: p.name,
        age: p.age
      }]
    };
  }
})

console.log(Object.values(carMap));

Create a mapping of cars to people by combining the attributes of each car. Retrieve the values of the carMap at the end.

Answer 3

Answer №2

Utilizing the .reduce technique offers a way to restructure arrays into objects containing arrays with a modified format:

  var people = [
        {
            name: "Bob",
            age: "20",
            car: {
                colour: "Blue",
                size: "Big",
                rpm: "380"
            }
        },
        {
            name: "Mary",
            age: "21",
            car: {
                colour: "Orange",
                size: "Small",
                rpm: "20"
            }
        },
        {
            name: "Janet",
            age: "22",
            car: {
                colour: "Blue",
                size: "Big",
                rpm: "380"
            }
        }
    ];

    const generateId = (object) => Object.keys(object).map(key => key + object[key]).join('-');

    var personByCar = Object.values(people.reduce((acc, person) => {
        // Uniquely identify the car properties:
        const carId = generateId(person.car);
        // Append the people property to contain relevant persons
        if(!acc.hasOwnProperty(carId)){
            acc[carId] = {...person.car, people: []};
        }
        // Include the person
        acc[carId].people.push({person});
        return acc;
    }, {}));

    console.log(personByCar)

For further details on reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Answer 4

Utilizing the .reduce technique offers a way to restructure arrays into objects containing arrays with a modified format:

  var people = [
        {
            name: "Bob",
            age: "20",
            car: {
                colour: "Blue",
                size: "Big",
                rpm: "380"
            }
        },
        {
            name: "Mary",
            age: "21",
            car: {
                colour: "Orange",
                size: "Small",
                rpm: "20"
            }
        },
        {
            name: "Janet",
            age: "22",
            car: {
                colour: "Blue",
                size: "Big",
                rpm: "380"
            }
        }
    ];

    const generateId = (object) => Object.keys(object).map(key => key + object[key]).join('-');

    var personByCar = Object.values(people.reduce((acc, person) => {
        // Uniquely identify the car properties:
        const carId = generateId(person.car);
        // Append the people property to contain relevant persons
        if(!acc.hasOwnProperty(carId)){
            acc[carId] = {...person.car, people: []};
        }
        // Include the person
        acc[carId].people.push({person});
        return acc;
    }, {}));

    console.log(personByCar)

For further details on reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Organize the main array by subgroup values and merge corresponding fields

Answer №1

Answer №2

Similar questions

Creating a lineup of products

The child_process module has yet to be loaded

modify the color of a box within a grid upon clicking it

Send both queries using JSON

What is the process for transferring multiple files using a read stream in Node.js?

Saving additional user information within the users' data

The useState function does not trigger a re-render

Making If Statements Easier

Step-by-step guide for setting up CodeMirror

Finding the maximum number of elements in an array using PHP

What is the best way to turn off ajax functionality when detecting IE8?

Trouble with locating newly created folder in package.json script on Windows 10

Determining when a message has been ignored using php

Tips on setting a value to zero in Angular when there is no input

What is the best way to condense a touchmove event listener in JavaScript?

Updating the DOM after scrolling using jQuery

When the enter key is pressed, shift the text to a different input field

outputting random selections from an array

The baguetteBox.js malfunctioning issue is causing the controls to appear at the bottom of the page

What is the best way to dynamically hide a textbox in JSP based on the selection of a