我正在尝试创建一个下拉菜单，用于存储餐馆菜单中的项目，使用vanilla JavaScript传递一组对象

Question

I am getting no errors but when I click the drop down menu I want it to display the name of the item and the price.

Instead it just displays [object Object].

I have tried appending itemList.item[i] but get the error TypeError: Cannot read property '0' of undefined

/*

///Food Items 

*/
/*Constructor which stores the items on the menu*/
function Item (item, price) {
    this.item = item;
    this.price = price;
}

var iOne = new Item('Peene Primviera', 14.60);
var iTwo = new Item('Fillet Steak', 20.00);
var iThree = new Item('Fillet Steak', 20.00);



var foodSelection = document.getElementById('menu');
var itemList = [
    {iOne},
    {iTwo},
    {iThree}
];

var itemName = itemList.name;

//Add the Options to the DropDownList.
for (var i = 0; i <= itemList.length; i++) {
    foodSelection.options.add(new Option(itemList[i]));
};

The result I want is just to display the name of the item and the price of the item in the drop down list

Answer 1

the [Object object] is there because you convert an object to a string which is done by calling Object.toString() returning [Object object] by defaul

There are some problems in your code, see the comment in the snippets

 /* ///Food Items */ /*Constructor which stores the items on the menu*/ function Item (item, price) { this.item = item; this.price = price; } var iOne = new Item('Peene Primviera', 14.60); var iTwo = new Item('Fillet Steak', 20.00); var iThree = new Item('Fillet Steak', 20.00); var foodSelection = document.getElementById('menu'); var itemList = [ iOne, // you don't need to surround these with {} iTwo, iThree ]; var itemName = itemList.name; for (var i = 0; i < itemList.length; i++) { // here using <= is not good because i goes to 3 while your index goes up to 2 (start at 0) var item = itemList[i] var value = item.item + " (" + item.price +")" foodSelection.options.add(new Option(value)); // by default creating a string from a object create [Object object] // so you need to create the string yourself }; 

 <select id="menu"></select> 

as mention by ths in comments, replacing

for (var i = 0; i < itemList.length; i++) {...}

by

var count = itemList.length
for (var i = 0; i < count; i++) {...}

give some better performance as the second expression in for loop is recalculated every time BUT you seem to be starting with js and don't need to be preocupated by this unless you loop over thousands of elements

---

another way to do it is to create a toString in Item

 /* ///Food Items */ /*Constructor which stores the items on the menu*/ function Item (item, price) { this.item = item; this.price = price; this.toString = function() { return this.item + " (" + this.price +")" } } var iOne = new Item('Peene Primviera', 14.60); var iTwo = new Item('Fillet Steak', 20.00); var iThree = new Item('Fillet Steak', 20.00); var foodSelection = document.getElementById('menu'); var itemList = [ iOne, iTwo, iThree ]; var itemName = itemList.name; for (var i = 0; i < itemList.length; i++) { var item = itemList[i] foodSelection.options.add(new Option(item)); // calling item.toString() behind the hood }; 

 <select id="menu"></select> 

Answer 2

ItemList[i] will return an Item object. You now want to display the name of that object (which I believe is the item attribute). So you have a list of Item objects, you can use array notation to index elements inside of that. However trying to index ItemList.item[i] would not make any sense, unless ItemList was an object containing and item attribute that was an array. I would try this line:

foodSelection.options.add(new Option(itemList[i].item));

Note that this will only display the item name. Now you need to append the price onto it.

foodSelection.options.add(new Option(itemList[i].item +" " +itemList[i].price));

You also will need to make a change to how you are adding Objects to your ItemList Array.

var itemList = [
    {iOne},
    {iTwo},
    {iThree}
];

This is essentially saying you want an array of objects that contain an Item object inside of them. In other words, you do not want to surround the elements of the array with {} the object notation indicators.

In stead, populate your array like so:

var itemList = [
    iOne,
    iTwo,
    iThree
];

Answer 3

The main issue is surrounding the instances of the Item class into { and } ( {iOne} ), this actually will create a new object that has one attribute named the same as the variable name ( {iOne} => iOne is the attribute's name) thus there's no attribute called 0 .

In order to bypass that, you'll simply populate the itemList array without the curly braces like so :

var itemList = [
    iOne,
    iTwo,
    iThree
];

And now you can iterate through that array as usuall :

 /*Constructor which stores the items on the menu*/ function Item(item, price) { this.item = item; this.price = price; } const iOne = new Item('Peene Primviera', 14.60), iTwo = new Item('Fillet Steak', 20.00), iThree = new Item('Fillet Steak', 20.00), foodSelection = document.getElementById('menu'), itemList = [ iOne, iTwo, iThree ]; itemList.forEach(i => { const o = document.createElement('option'); o.value = i.price; o.textContent = `${i.item} ${i.price}$`; foodSelection.options.add(o); }); 

 <select id="menu"></select> 

Answer 4

new Option expects strings and you are passing in an object. Reference the text

foodSelection.options.add(new Option(itemList[i].item));

and if you want the value

var opt = itemList[i]
foodSelection.options.add(new Option(opt.item, opt.price));