Traversing trough array of objects in javascript

Question

I'm kinda new in JavaScript, I know that there are different ways how to traverse array of objects, but I found a tutorial and didn't get this ${person.name} part. Code is:

let personData = [
  { name: "Dylan", age: 31 },
  { name: "Hannah", age: 17 },
  { name: "Dollan", age: 39 },
  { name: "Elle", age: 3 },
];

function loadTableData(personData) {
  for (let person of personData) {
    dataHtml += `<tr><td>${person.name}</td><td>${person.age}</td></tr>`;
  }
}

I tried to understand what exactly is happening so I put `${personData.name}` to console and I get "undefined" = $3 My question is, why this works fine within for loop, but in console I'm getting undefined?

What don't you understand about `person.name`? `person` is the current object in the loop, and `person.name` is the value of the `name` property. So when `person == {name: 'Dylan', age: 31 }`, `person.name == 'Dylan'` — Barmar, Nov 21 '21 at 14:30
The `person` variable is local to the loop, it's created by `for (let person of personData)`. So it's not defined if you just type `person.name` in the console. — Barmar, Nov 21 '21 at 14:31
In your loop you write `person.name`, not `personData.name`. — Bergi, Nov 21 '21 at 14:33
Learn how to use the debugger, so you can stop the code and then "step through" every line. https://developer.chrome.com/docs/devtools/javascript/ Then you can just type `debugger()` in the code, and reload the page with the console opened (F12). — Rickard Elimää, Nov 21 '21 at 14:33
What is `dataHtml`? You neither declare, initialise nor use it. — Bergi, Nov 21 '21 at 14:34
Inside of your `for` loop add `console.log(person.name);`... I think it'll clear your confusion up for you. Or in console you would need to select an index like this: `personData[0].name` to see it outside of the loop. — maxshuty, Nov 21 '21 at 14:34
Try in your console: personData[0].name and see what happens. What the for...of does is take each item of array and select a item as the variable you choose. If you have chosen for (let potato of pensonData) it would work as well. Potato would have been the name of the each object that only exists within the for loop. — guilfer, Nov 21 '21 at 14:36
Does this answer your question? [What does this symbol mean in JavaScript?](https://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript) — Randy Casburn, Nov 21 '21 at 14:38

score 1 · Accepted Answer · answered Nov 21 '21 at 14:35

From your example, personData is the array of objects, to access each item you access it inside the loop with a local variable person. Console will log undefined for ${personData.name} instead you can access an item of the array through index, try this ${personData[0].name} which will print the vale of name property in your first item.

score 0 · Answer 2 · answered Nov 21 '21 at 14:45

0

If you iterate over the personData object, you will get undefined with your given code. You can try the following:

personData.forEach(function (person ) {
     dataHtml += `<tr><td>${person.name}</td><td>${person.age}</td></tr>`;
});

answered Nov 21 '21 at 14:45

Abdus Salam Azad

5,087
46
35

Traversing trough array of objects in javascript

2 Answers2