Convert an array of objects into an object where the keys are determined by the value of a specific

Question

Convert an array of objects into an object where the keys are determined by the value of a specific

I'm working with an array that looks like this:

const inventory = [
  { fruit: 'apple', quality: 'good', quantity: 10 },
  { fruit: 'banana', quality: 'average', quantity: 5 },
  { fruit: 'orange', quality: 'excellent', quantity: 12 },
];

If I want to retrieve information about the "banana" entry, I currently use:

inventory.find(item => item.fruit === 'banana')

However, I'd prefer to access it associatively, like this:

inventory.banana.quantity

To achieve this format, I need to transform my array into an object. I am looking for a simple ES6 solution or possibly utilizing Lodash. Any suggestions?

javascript ecmascript-6 lodash

Answer 1

Answer №1

const exampleObject = [{
    category: 'apple',
    type: 'fruit',
    price: 1
  },
  {
    category: 'banana',
    type: 'fruit',
    price: 3
  },
  {
    category: 'orange',
    type: 'fruit',
    price: 8
  },
];

const result = exampleObject.reduce((accumulator, current) => {
  accumulator[current.category] = current;
  return accumulator
}, {})

console.log(result)

Answer 2

const exampleObject = [{
    category: 'apple',
    type: 'fruit',
    price: 1
  },
  {
    category: 'banana',
    type: 'fruit',
    price: 3
  },
  {
    category: 'orange',
    type: 'fruit',
    price: 8
  },
];

const result = exampleObject.reduce((accumulator, current) => {
  accumulator[current.category] = current;
  return accumulator
}, {})

console.log(result)

Answer 3

Answer №2

Utilizing Object.fromEntries allows for the creation of the object, with destructuring aiding in extracting the key from the remaining parts of the initial object:

const example = [
  { identifier: 'apple', x: 'y', z: 1 },
  { identifier: 'banana', x: 'm', z: 3 },
  { identifier: 'orange', x: 'n', z: 8 },
];

let outcome = Object.fromEntries(example.map(({identifier, ...remaining}) => [identifier, remaining]));

console.log(outcome);

Answer 4

Utilizing Object.fromEntries allows for the creation of the object, with destructuring aiding in extracting the key from the remaining parts of the initial object:

const example = [
  { identifier: 'apple', x: 'y', z: 1 },
  { identifier: 'banana', x: 'm', z: 3 },
  { identifier: 'orange', x: 'n', z: 8 },
];

let outcome = Object.fromEntries(example.map(({identifier, ...remaining}) => [identifier, remaining]));

console.log(outcome);

Answer 5

Answer №3

To implement the _.keyBy() method from lodash, follow this example:

const sampleData = [
  { id: '123', name: 'John' },
  { id: '456', name: 'Jane' },
  { id: '789', name: 'Doe' },
];

const result = _.keyBy(sampleData, 'id');

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 6

To implement the _.keyBy() method from lodash, follow this example:

const sampleData = [
  { id: '123', name: 'John' },
  { id: '456', name: 'Jane' },
  { id: '789', name: 'Doe' },
];

const result = _.keyBy(sampleData, 'id');

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Convert an array of objects into an object where the keys are determined by the value of a specific

Answer №1

Answer №2

Answer №3

Similar questions

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

A JavaScript function that produces an array as an output

Encountered a problem while attempting to remove node version

The button similar to Facebook does not function properly when using fancybox

Typescript: Verifying the type of an interface

Ways to retrieve the child number using JavaScript or PHP

When using jQuery and Laravel, why does the element not appear when setting its display to block after receiving a response?

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

Steps to resolve the error message "The port 9876 has no listening server when karma is running"

Validation of decimal numbers in JavaScript without the presence of any other characters

The custom tooltip is not being displayed as intended

Dealing with a 404 Error in Node.js and Express Routing

A Foolproof Method to Dynamically Toggle HTML Checkbox in ASP.NET Using JavaScript

Issue encountered while attempting to load bootstrap in NodeJS

Transforming the output of a PHP script from an HTML table into an ion-list format tailored for the Ionic framework

Is the API providing a response in the form of an HTML document

Your request was denied by the Google Maps API server due to an invalid request. Please include the 'size' parameter in your request

The HTTP response object in Express does not provide any data in its return

Send the user back to the homepage without the need to refresh the page

Create a compass application using React-Native