Convert arrays inside arrays into objects by utilizing the keys of each object for the arrays

Question

Convert arrays inside arrays into objects by utilizing the keys of each object for the arrays

I am looking to transform the current data structure:

[ { sectionName: 'SectionOne',
    ingredients: [ {ingredient: 'sugar'}, {ingredient: 'flour'} ]},
  { sectionName: 'SectionTwo',
    ingredients: [ {ingredient: 'eggs'}, {ingredient: 'water'} ] },
 ]

into this new format:

{ SectionOne:
       { sectionName: 'SectionOne',
         ingredients: {
           sugar: { ingredient: 'sugar' },
           flour: { ingredient: 'flour' }
          }
        },
{ SectionTwo:
       { sectionName: 'SectionTwo',
         ingredients: {
           eggs: { ingredient: 'eggs' },
           water: { ingredient: 'water' }
          }
        },

 }

In essence, I aim to utilize the object keys from each array to create an object.

An example of the data structure can be found on this jsfddle along with my attempt at achieving this transformation.

Despite trying methods like lodash or vanillaJS, I have only succeeded in converting the outer array. Recursively applying _.mapKeys(), for loops, or similar techniques to reach the desired structure has proven challenging. I believe there may be a simple solution that is eluding me at the moment.

Your assistance on this matter would be greatly appreciated!

javascript arrays database object data-structures

Answer 1

Answer №1

To populate an array and create your own objects easily, you can use the map function in JavaScript:

const data = [ 
  { sectionName: 'SectionOne',
    ingredients: [ {ingredient: 'sugar'}, {ingredient: 'flour'} ]},
  { sectionName: 'SectionTwo',
    ingredients: [ {ingredient: 'eggs'}, {ingredient: 'water'} ] },
 ];
 
const res = Object.assign(...data.map(el => ({ // for each element
  [el.sectionName]: {
    sectionName: el.sectionName,
    ingredients: Object.assign(...el.ingredients.map(e => ({[e.ingredient]: e}))) // assign each object within the array
    }
  })))

console.log(res)
console.log(res.SectionOne.ingredients.sugar)

The notation [something] is used to generate a key where the name is the value of the variable something. The spread operator three dots ... splits an array into individual elements as if they were separated by commas.

Answer 2

To populate an array and create your own objects easily, you can use the map function in JavaScript:

const data = [ 
  { sectionName: 'SectionOne',
    ingredients: [ {ingredient: 'sugar'}, {ingredient: 'flour'} ]},
  { sectionName: 'SectionTwo',
    ingredients: [ {ingredient: 'eggs'}, {ingredient: 'water'} ] },
 ];
 
const res = Object.assign(...data.map(el => ({ // for each element
  [el.sectionName]: {
    sectionName: el.sectionName,
    ingredients: Object.assign(...el.ingredients.map(e => ({[e.ingredient]: e}))) // assign each object within the array
    }
  })))

console.log(res)
console.log(res.SectionOne.ingredients.sugar)

The notation [something] is used to generate a key where the name is the value of the variable something. The spread operator three dots ... splits an array into individual elements as if they were separated by commas.

Answer 3

Answer №2

Check out this efficient solution using the reduce method. There's always room for improvement:

const parts = [
  { partName: 'PartOne',
    items:
      [
        {item: 'hammer'},
        {item: 'screwdriver'}
      ]
  },
  { partName: 'PartTwo',
    items:
      [
        {item: 'nails'}, {item: 'tape'}
      ]
  },
];

const finalResult = parts.reduce((acc, curr) => {
  const itemsObj = curr.items.reduce((accumulator, item) => {
    accumulator[item.item] = {
      item: item.item
    };
    return accumulator;
  }, {});

  var partObject = {
    partName: curr.partName,
    items: itemsObj
  }
  acc[curr.partName] = partObject;
  return acc;

}, {});

console.log(finalResult);

Answer 4

Check out this efficient solution using the reduce method. There's always room for improvement:

const parts = [
  { partName: 'PartOne',
    items:
      [
        {item: 'hammer'},
        {item: 'screwdriver'}
      ]
  },
  { partName: 'PartTwo',
    items:
      [
        {item: 'nails'}, {item: 'tape'}
      ]
  },
];

const finalResult = parts.reduce((acc, curr) => {
  const itemsObj = curr.items.reduce((accumulator, item) => {
    accumulator[item.item] = {
      item: item.item
    };
    return accumulator;
  }, {});

  var partObject = {
    partName: curr.partName,
    items: itemsObj
  }
  acc[curr.partName] = partObject;
  return acc;

}, {});

console.log(finalResult);

Convert arrays inside arrays into objects by utilizing the keys of each object for the arrays

Answer №1

Answer №2

Similar questions

Querying MySQL database for variable values in JavaScript

I am looking to amalgamate a pair of scripts into a single cohesive work

Emails are failing to send through NodeMailer, specifically on the production server

Searching for a specific element in jQuery by querying a string

Utilizing AngularJs to connect server-generated HTML content to an iframe

Change the ng-model of the initial controller when a button is clicked in a separate controller

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

"Step-by-Step Guide: Implementing a Modal Popup Form in Angular with NgBootstrap and FormsModule

Accessing JSON data from an external file using AngularJS's $http method

Continuously encountering the 403 Forbidden error when making a POST request to the

Removing a row element from an array

Ways to populate a database with information

Detecting iFrame Scroll Events

Ways to designate as not defined or remove specific sections

Data input via $_POST method during the submission of a web application is failing to

Issue: failure of child element - the provided path is incorrect: "users/[object Object]", when implementing Firebase with Next.js

Expanding mongoDB database by utilizing a Java endpoint using JavaScript

Having trouble receiving JSON/JSONP correctly

Switch the style of a set of thumbnail images when clicked

The module demoApp could not be instantiated because of an error stating that the module demoApp is not accessible