Why do I get [object Object] instead of the object property value?

Question

I am trying to create an unordered list of food items that show once I click a button. I am trying to display the name of each item only. However instead of showing the item names, I am getting an unordered list with each item displaying [object Object].

image of four bullet points stating object Object

How can I display the list item names in my list instead of [object Object]?

let groceryList = [
{name: "banana", price: 5},
{name: "milk", price: 3},
{name: "bread", price: 1},
{name: "chips", price: 2}
]

let ul = document.getElementById("itemList")
let btn = document.getElementById("btn")

btn.addEventListener("click", function () {
     for (let i = 0; i < groceryList.length; i++) {
         let item = groceryList[i]
         let li = document.createElement("li")
         li.appendChild(document.createTextNode(item))
         ul.appendChild(li)
     }
        
 })

because you are stroing an object into a string and it runs toString(). You need to reference the properties of the object to get the text .createTextNode(item.name) — epascarello
– epascarello, Commented Aug 19, 2022 at 15:22
The object is managed in memory, so its native representation is [object Object]. You may want to stringify it: li.appendChild(document.createTextNode(JSON.stringify(item))) — Mesi Rendón
– Mesi Rendón, Commented Aug 19, 2022 at 15:23

queerthoughts · Accepted Answer · 2022-08-19 15:24:39Z

2

Where you say:

let item = groceryList[i]

That returns an object and thus displays as [object Object]. You can access the properties of this object with groceryList[i].name and groceryList[i].price; that will return a string or number respectively.

answered Aug 19, 2022 at 15:24

queerthoughts

708 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sashini Hettiarachchi · Accepted Answer · 2022-08-19 15:42:58Z

0

let item = groceryList[i] return whole object, if you want to access the value of name or price, you should access it by using key of that value.

let groceryList = [
{name: "banana", price: 5},
{name: "milk", price: 3},
{name: "bread", price: 1},
{name: "chips", price: 2}
]


 
 groceryList.forEach(item => {
  console.log("item", item)
  //To access the name
  console.log("name", item.name)
  //To access the price
  console.log("price", item.price)
 })

answered Aug 19, 2022 at 15:42

Sashini Hettiarachchi

1,7262 gold badges13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Why do I get [object Object] instead of the object property value?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related