JavaScript outputs an array containing a collection of objects

Question

JavaScript outputs an array containing a collection of objects

[
    {'id': 123, 'name': 'apples', 'total': 30},
    {'id': 541, 'name': 'oranges', 'total': 42},
    {'id': 300, 'name': 'bananas', 'total': 18}
]

How can I display the contents of this array in the following format:

Apples: 30
Oranges: 42
Bananas: 18

I attempted

let myArray = [{
    'id': 123,
    'name': 'apples',
    'total': 30
  },
  {
    'id': 541,
    'name': 'oranges',
    'total': 42
  },
  {
    'id': 300,
    'name': 'bananas',
    'total': 18
  }
]
console.log(JSON.stringify(myArray.map(a => a.name)))

however, this is not what I intended to achieve.

javascript arrays sorting

Answer 1

Answer №1

You can utilize the spread syntax along with Object.assign to efficiently create an object from an array.

const information = [{'id': 123, 'name': 'apples', 'total': 30},{'id': 541, 'name': 'oranges', 'total': 42},{'id': 300, 'name': 'bananas', 'total': 18}]

const capitalize = str => str[0].toUpperCase() + str.slice(1)
const outcome = Object.assign(...information.map(({name, total}) => ({[capitalize(name)]: total})))
console.log(outcome)

Answer 2

You can utilize the spread syntax along with Object.assign to efficiently create an object from an array.

const information = [{'id': 123, 'name': 'apples', 'total': 30},{'id': 541, 'name': 'oranges', 'total': 42},{'id': 300, 'name': 'bananas', 'total': 18}]

const capitalize = str => str[0].toUpperCase() + str.slice(1)
const outcome = Object.assign(...information.map(({name, total}) => ({[capitalize(name)]: total})))
console.log(outcome)

Answer 3

Answer №2

To successfully process each item in the array, you will need to iterate through it

let items = [{
    'id': 123,
    'name': 'apples',
    'total': 30
  },
  {
    'id': 541,
    'name': 'oranges',
    'total': 42
  },
  {
    'id': 300,
    'name': 'bananas',
    'total': 18
  }
]

items.forEach((item) => {

  // perform operations on data
  let id = item.id;
  let name = item.name;
  let total = item.total;

  console.log(`${name}: ${total}`);

  // or output in a div/form using innerHtml etc.
});

Answer 4

To successfully process each item in the array, you will need to iterate through it

let items = [{
    'id': 123,
    'name': 'apples',
    'total': 30
  },
  {
    'id': 541,
    'name': 'oranges',
    'total': 42
  },
  {
    'id': 300,
    'name': 'bananas',
    'total': 18
  }
]

items.forEach((item) => {

  // perform operations on data
  let id = item.id;
  let name = item.name;
  let total = item.total;

  console.log(`${name}: ${total}`);

  // or output in a div/form using innerHtml etc.
});

Answer 5

Answer №3

One way to achieve this is by implementing the following code snippet:

var items = [
    {'id': 123, 'name': 'apples', 'quantity': 30},
    {'id': 541, 'name': 'oranges', 'quantity': 42},
    {'id': 300, 'name': 'bananas', 'quantity': 18}
]

console.log(items.map(item => ({[item['name'].charAt(0).toUpperCase() + item['name'].slice(1)]: item['quantity']})));

Answer 6

One way to achieve this is by implementing the following code snippet:

var items = [
    {'id': 123, 'name': 'apples', 'quantity': 30},
    {'id': 541, 'name': 'oranges', 'quantity': 42},
    {'id': 300, 'name': 'bananas', 'quantity': 18}
]

console.log(items.map(item => ({[item['name'].charAt(0).toUpperCase() + item['name'].slice(1)]: item['quantity']})));

Answer 7

Answer №4

Your list will look something along these lines:

var vegetables = [
    {'id': 123, 'name': 'carrots', 'quantity': 25},
    {'id': 541, 'name': 'broccoli', 'quantity': 38},
    {'id': 300, 'name': 'spinach', 'quantity': 20}
]

You can iterate through the array using a for loop.

for(i=0; i<vegetables.length; i++)

{
    console.log(vegetables[i].name + " : " + vegetables[i].quantity);
}

This will give you the desired output.

https://i.sstatic.net/wfNxC.png

Answer 8

Your list will look something along these lines:

var vegetables = [
    {'id': 123, 'name': 'carrots', 'quantity': 25},
    {'id': 541, 'name': 'broccoli', 'quantity': 38},
    {'id': 300, 'name': 'spinach', 'quantity': 20}
]

You can iterate through the array using a for loop.

for(i=0; i<vegetables.length; i++)

{
    console.log(vegetables[i].name + " : " + vegetables[i].quantity);
}

This will give you the desired output.

https://i.sstatic.net/wfNxC.png

Answer 9

Answer №5

here is another way to achieve the same result

const list=[
    {'id': 987, 'name': 'grapes', 'total': 25},
    {'id': 456, 'name': 'pears', 'total': 36},
    {'id': 789, 'name': 'cherries', 'total': 50}
]

const updatedList=Object.assign(...list.map(item=> ({[item.name.charAt(0).toUpperCase() + item.name.slice(1)]:item.total})))

console.log(updatedList);

Answer 10

here is another way to achieve the same result

const list=[
    {'id': 987, 'name': 'grapes', 'total': 25},
    {'id': 456, 'name': 'pears', 'total': 36},
    {'id': 789, 'name': 'cherries', 'total': 50}
]

const updatedList=Object.assign(...list.map(item=> ({[item.name.charAt(0).toUpperCase() + item.name.slice(1)]:item.total})))

console.log(updatedList);

JavaScript outputs an array containing a collection of objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

React Native: Changing Props Triggers Touch Event Cancellation

Nonlinear Scaling in D3.js Line Chart

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

What could be causing the delay in response times from these unpredictable APIs within the Express server?

Create a unique Bootstrap 5 carousel featuring a single progress bar

React-Tooltip trimming

Next.js presents a challenge with micro frontend routing

Can you explain the significance of module.exports? And what is the reasoning behind naming it "module"?

A potential issue of a race condition may arise with the cursor when utilizing Promise.all

What steps are required to add a basic Java 'class' instance representing a jQuery implementation in jQuery?

What is the most efficient way to loop through nested JSON using jQuery in one go?

Exporting from Blender to three.js can sometimes result in misaligned object positions

Retrieve JSON information by utilizing variable string interpolation

AJAX call error: Invocation not permitted

Encountering a Mongoose issue while attempting to load model files from a separate Mean.js project using the require function

Is it possible for Node.js to execute individual database operations within a single function atomically?

How can I send and retrieve multiple variables in a URL using WordPress?

applying multiple conditions to filter data in javascript

Determine the daily volume of emails sent from the "no-reply email" address using the Nodemailer library

Can you explain the purpose of FunctionConstructor in typeScript?