Javascript retrieving data from an array

Question

I'm failing to achieve something very simple. I can't retrieve specific data of an array. I've browsed through the documentation and similar threads on stack overflow but none seem to work.

For example:

[
  {
    id: 123,
    name: 'Name1',
  },
  {
    id: 456,
    name: 'Name2',
  },
  {
    id: 789,
    name: 'Name3',
  },
]

How could I possibly get all 'name' variables from each {} ?

Which methods / "ways" did you already try? Could you may add some code snippets? — Yannick, Dec 28 '21 at 08:26
You can loop over array and then use `. or []` property accessor to get desired properties value — Code Maniac, Dec 28 '21 at 08:27
What documentation/code have you tried? Did you look at MDN's documentation for [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) or [loops/iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement)? — Andy, Dec 28 '21 at 08:28
@Yannick I did try to use the forEach function: `Array.forEach(element => console.log(element))` but now I'm stuck at retrieving each 'name' variable — qxseb, Dec 28 '21 at 08:29
You should use an iterator such as forEach or for loop i.e., `array.forEach( function( object ){ console.log( object.name ); } )`. Using Map can be problematic as it should be used for data manipulation and generating a new array as described here (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Beside it is just unnecessary computation. — Mujeeb N., Dec 28 '21 at 08:32
you need to use like this Array.forEach(element => console.log(element.name)) if you want to retrieve each 'name' variable using for forEach function — Nazmul Hasan, Dec 28 '21 at 08:36
I don't understand why would anyone say that map is a wrong solution. OP wants to know name value for each array element. OP would need it to be in a variable to process later. — Lukasz, Dec 28 '21 at 08:42
I am not saying it is wrong I am saying it is not suitable for the given scenario, I cannot see what is done with the retrieved property. If one has to generate an array of names or has to (lets say) manipulate names then map is relevant otherwise it just adds an overhead on time and space complexity. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#when_not_to_use_map — Mujeeb N., Dec 28 '21 at 08:50
Thank you, everyone, for your help, I was able with all the answers to proceed and also learned new things about `.map` . Many thanks. — qxseb, Dec 28 '21 at 09:07

Deepak · Answer 1 · 2021-12-28T08:35:44.723

1

You can use forEach or map to get a specific property from the list of objects:

let data = [{
    id: 123,
    name: 'Name1',
  },
  {
    id: 456,
    name: 'Name2',
  },
  {
    id: 789,
    name: 'Name3',
  },
]

let names = []
data.forEach(element => names.push(element.name))
console.log(names)

names = data.map(element => element.name)

console.log(names)

edited Dec 28 '21 at 08:35

answered Dec 28 '21 at 08:27

Deepak

2,660
2
8
23

Lukasz · Answer 2 · 2021-12-28T08:42:29.070

0

You simply need to use .map (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

The following code should do the job.

   const names = yourArray.map(e=> e.name)

edited Dec 28 '21 at 08:42

answered Dec 28 '21 at 08:29

Lukasz

1,807
8
12

Javascript retrieving data from an array

2 Answers2