Retrieve an object from an array containing multiple objects

Question

Retrieve an object from an array containing multiple objects

In my current project, I am working with an array of objects that look like this:

const values = [
    {
      clientType: "Client Type 1",
      value: 130
    },
    {
      clientType: "Client Type 2",
      value: 10
    },
    {
      clientType: "Client Type 3",
      value: -80
    },
    {
      clientType: "Client Type 4",
      value: -52
    }
  ]

My goal is to transform and group this array into a single object as shown below:

results = {
  "Client Type 1": 130,
  "Client Type 2": 10,
  "Client Type 3": -80,
  "Client Type 4": -52,
}

I am wondering if there is a direct way to achieve this using just one map function? Any insights would be greatly appreciated.

Thanks in advance.

javascript arrays javascript-objects

Answer 1

Answer №1

const data = [
    {
      customerType: "Customer Type A",
      amount: 130
    },
    {
      customerType: "Customer Type B",
      amount: 10
    },
    {
      customerType: "Customer Type C",
      amount: -80
    },
    {
      customerType: "Customer Type D",
      amount: -52
    }
  ]
  
const finalResult = data.reduce((total, {customerType, amount}) => ({ ...total, [customerType]: amount}), {})

console.log(finalResult)

Answer 2

const data = [
    {
      customerType: "Customer Type A",
      amount: 130
    },
    {
      customerType: "Customer Type B",
      amount: 10
    },
    {
      customerType: "Customer Type C",
      amount: -80
    },
    {
      customerType: "Customer Type D",
      amount: -52
    }
  ]
  
const finalResult = data.reduce((total, {customerType, amount}) => ({ ...total, [customerType]: amount}), {})

console.log(finalResult)

Answer 3

Answer №2

For this straightforward question or task, I will provide a clear and easy-to-understand solution.

const values = [{
      clientType: "Client Type 1",
      value: 130
    },
    {
      clientType: "Client Type 2",
      value: 10
    },
    {
      clientType: "Client Type 3",
      value: -80
    },
    {
      clientType: "Client Type 4",
      value: -52
    }
  ],
  // Iterate through the "values" object to create an object in the required format and return it.
  resultObj = values.reduce((a, c) => {
    // a: represents the object being constructed, initially empty {}
    // c: the current object from the "values" array
    a[c.clientType] = c.value;
    return a;
  }, {});

// This line is optional and just logs the result to the console
console.log(resultObj);

A quick note (but significant), you can only access an attribute on the resulting Object using bracket notation:
resultObj['Client Type 1'] // prints: 130

Find out more about the reduce method on MDN.

Answer 4

For this straightforward question or task, I will provide a clear and easy-to-understand solution.

const values = [{
      clientType: "Client Type 1",
      value: 130
    },
    {
      clientType: "Client Type 2",
      value: 10
    },
    {
      clientType: "Client Type 3",
      value: -80
    },
    {
      clientType: "Client Type 4",
      value: -52
    }
  ],
  // Iterate through the "values" object to create an object in the required format and return it.
  resultObj = values.reduce((a, c) => {
    // a: represents the object being constructed, initially empty {}
    // c: the current object from the "values" array
    a[c.clientType] = c.value;
    return a;
  }, {});

// This line is optional and just logs the result to the console
console.log(resultObj);

A quick note (but significant), you can only access an attribute on the resulting Object using bracket notation:
resultObj['Client Type 1'] // prints: 130

Find out more about the reduce method on MDN.

Answer 5

Answer №3

After some tinkering, I managed to get this code working smoothly:

const items = [
{
  product: "Product A",
  price: 200
},
{
  product: "Product B",
  price: 50
},
{
  product: "Product C",
  price: -30
},
{
  product: "Product D",
  price: -15
}
  ]

items.map(displayInfo);

function displayInfo(item) {
  return [item.product,item.price].join(" ");
}

Answer 6

After some tinkering, I managed to get this code working smoothly:

const items = [
{
  product: "Product A",
  price: 200
},
{
  product: "Product B",
  price: 50
},
{
  product: "Product C",
  price: -30
},
{
  product: "Product D",
  price: -15
}
  ]

items.map(displayInfo);

function displayInfo(item) {
  return [item.product,item.price].join(" ");
}

Answer 7

Answer №4

Give this a shot:

const data = [
  {
    type: "Type A",
    amount: 150,
  },
  {
    type: "Type B",
    amount: 20,
  },
  {
    type: "Type C",
    amount: -70,
  },
  {
    type: "Type D",
    amount: -42,
  },
];

const outcome = {};
for (let i = 0; i < data.length; i++) {
  outcome[data[i].type] = data[i].amount;
}

console.log("data", data);
// data [
//     { type: 'Type A', amount: 150 },
//     { type: 'Type B', amount: 20 },
//     { type: 'Type C', amount: -70 },
//     { type: 'Type D', amount: -42 }
//   ]

console.log("outcome", outcome);
//   outcome {
//     'Type A': 150,
//     'Type B': 20,
//     'Type C': -70,
//     'Type D': -42
//   }

Answer 8

Give this a shot:

const data = [
  {
    type: "Type A",
    amount: 150,
  },
  {
    type: "Type B",
    amount: 20,
  },
  {
    type: "Type C",
    amount: -70,
  },
  {
    type: "Type D",
    amount: -42,
  },
];

const outcome = {};
for (let i = 0; i < data.length; i++) {
  outcome[data[i].type] = data[i].amount;
}

console.log("data", data);
// data [
//     { type: 'Type A', amount: 150 },
//     { type: 'Type B', amount: 20 },
//     { type: 'Type C', amount: -70 },
//     { type: 'Type D', amount: -42 }
//   ]

console.log("outcome", outcome);
//   outcome {
//     'Type A': 150,
//     'Type B': 20,
//     'Type C': -70,
//     'Type D': -42
//   }

Retrieve an object from an array containing multiple objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for using the deferred method in ajax to enhance the efficiency of data loading from a php script

The HTML5 postMessage function often returns an undefined value

Displaying a binary PDF file in a web browser using JavaScript

php How can an array be empty?

What is the best way to temporarily bold a cell item within a table row for a specified duration of time?

Adding a child element in older versions of Internet Explorer browsers using

Displaying historical data on hover in a chart using Vue3 and Chart.js

The present URL of Next.js version 13

Is there an easy method to transmit JSON information by utilizing $window.open() with angularjs?

Guide to rendering JavaScript with pug/jade

What is the best way to transfer an excel file to a server using AngularJS in a Django project?

Manipulate values within an array when a checkbox is selected or deselected

Tips for appending a struct to an existing byte array in C++

Changing Background Color on Div Click

Modify the background color of a pseudo-element's property value dynamically

Retrieve ALL information from a third-party API request with a limit of 1000 calls

Troubleshooting: ReactJS- Bootstrap Value Issue Not Displaying When Changing Tabs

Posting a string using AJAX to the Java backend through JavaScript

Is there a method to divide an Array based on a specified filter criteria?

A guide on managing file uploads in Next.js with the help of Formidable