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)
}

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)
}

• javascript
• object
• for-loop
• properties

• 1 Did you notice that when you console.log page you get the index, not the object? – Mark Commented May 23, 2018 at 19:29
• Possible duplicate of Loop through an array in JavaScript – Mark Commented May 23, 2018 at 19:30

6 Answers 6

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; }

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);
}

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)
}

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)
}

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!

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)
}