How do I access object properties in a for loop in javascript?

Question

I can't find anything that explains clearly what is wrong and what I should do.

I have this array:

const pages = [
{ 
    url: "/",
    page: 'pages/home.html',
    title: "Home" },
{ 
    url: "/recordings",
    page:'pages/recordings.html',
    title: "Recordings" },
{ 
    url: "/editions",
    page: 'pages/editions.html',
    title: "Editions" },
{ 
    url: "/videos",
    page: 'pages/videos.html',
    title: "Videos" },
]

I'm trying to loop it through with a for loop. page.url returns "undefined" in the console. But the "Test URL" console log returns a url string as expected. Why? What do I do? I want the page.url in the foor loop.

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)
for (page in pages) {

    console.log("Page: " + page)
    console.log("Page URL: " + page.url)
}

Did you notice that when you console.log `page` you get the index, not the object? — Mark, May 23 '18 at 19:29
Possible duplicate of [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — Mark, May 23 '18 at 19:30

Nina Scholz · Answer 1 · 2018-05-23T19:37:37.063

You could use a for ... of statement, where you get the element of the array instead of the index by using a for ... in statement.

const pages = [{ url: "/", page: 'pages/home.html', title: "Home" }, { url: "/recordings", page: 'pages/recordings.html', title: "Recordings" }, { url: "/editions", page: 'pages/editions.html', title: "Editions" }, { url: "/videos", page: 'pages/videos.html', title: "Videos" }];

for (var page of pages) {
    console.log("Page: " + page.page);
    console.log("Page URL: " + page.url);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 1 · Answer 2 · answered May 23 '18 at 19:32

for..in is a method for iterating over "enumerable" properties of an object.

With arrays using for..in reveals the indexes:

const pages=[{url:"/",page:'pages/home.html',title:"Home"},{url:"/recordings",page:'pages/recordings.html',title:"Recordings"},{url:"/editions",page:'pages/editions.html',title:"Editions"},{url:"/videos",page:'pages/videos.html',title:"Videos"}]

for (let index in pages) {
  console.log(index);
  console.log(pages[index].page);
}

for..of can be used to iterate over "iterable" collections. This acts like a .forEach() function:

const pages=[{url:"/",page:'pages/home.html',title:"Home"},{url:"/recordings",page:'pages/recordings.html',title:"Recordings"},{url:"/editions",page:'pages/editions.html',title:"Editions"},{url:"/videos",page:'pages/videos.html',title:"Videos"}]

for (let page of pages) {
  console.log(page);
  console.log(page.page);
}

score 0 · Answer 3 · answered May 23 '18 at 19:31

0

page would be index here...

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)
for (page in pages) {

    console.log("Page: " + pages[page])
    console.log("Page URL: " +pages[page].url)
}

answered May 23 '18 at 19:31

Sree

374
2
10

score 0 · Answer 4 · answered May 23 '18 at 19:31

This is because for in is meant to iterate through a key, value object. page is just the key of the array which is 0,1,2,3,.. so you would need to do

console.log("Pages: " + pages)
console.log("Test URL: " + pages[1].url)

for (var key in pages) {

    console.log("Page: " + pages[key])
    console.log("Page URL: " + pages[key].url)
}

score 0 · Answer 5 · answered May 23 '18 at 19:34

On the first case you are accesing the first element of the array, and in that element access the property with the '.url':

console.log("Test URL: " + pages[1].url)

on the second case you get undefined because:

The for...in statement iterates over the enumerable properties of an object. For each distinct property, statements can be executed.

pages is a array not a object, you need to iterate over the array, you can use foreach for that:

pages.forEach( function (page)
{
   console.log("Page: " + page)
   console.log("Page URL: " + page.url)
});

hope it helps!

Gaurav Priyadarshi · Answer 6 · 2018-05-23T20:02:38.763

0

When we iterate array of objects(as you are trying) using for/in statement loop for each iteration it returns index that's why you are not getting the result as you are expecting. Following are the code which solve your problem.

for (page in pages) {   
  console.log("Page: " + page)//here it will print index
  console.log("Page URL: " + page.url)
}

edited May 23 '18 at 20:02

answered May 23 '18 at 19:50

Gaurav Priyadarshi

124
9

How do I access object properties in a for loop in javascript?

6 Answers6