Shopping List app HELP

Hey, guys. I’m making a Shopping List app (modified version of Watch and Code course to-do app), and I’m stuck. Console tells me that shoppingList is not defined although it IS defined right on line 1. Therefore I can’t access the functions in the variable like displayShoppingList, addToShoppingList etc. My error is probably very simple but I can’t locate it, could you help me out pls? Also any comments on the existing code are VERY much welcome.
Code’s below:
var shoppingList ={
list: [‘milk’,‘beer’,‘sugar’],
displayShoppingList : function(){
if (this.list.length>0) {
for (var x=0;x<list.length;x++){
if (this.list[x].isBought===true) {
console.log(’(x)’+this.list[x].item);
}
else {
console.log (’( )’+this.list[x].item);
}
}
}
else {
console.log (‘Your shopping list is empty’);
}
},
addToShoppingList : function (item){
this.list.push({
item: item,
isBought: false,
itemCounter: 1
});
this.displayShoppingList();
},
changeShoppingList : function(place, newItem) {
this.list[place].item=newItem;
this.displayShoppingList();
},
makeItemBought : function(place){
this.list[place].isBought=!this.list[place].isBought;
this.displayShoppingList();
},
deleteFromShoppingList : function(place){
this.list.splice(place, 1);
this.displayShoppingList();
},
toggleAllItems : function(){
for (var y=0;y<list.length;y++) {
this.list[y].isBought = true;
}
this.displayShoppingList();
},
};

//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)

Hey. Thanks for your help, but the problems stays =( As for this.items[x] - I’d like to access this.list[x].item, which exists -

addToShoppingList : function (item){
this.list.push({
item: item,
isBought: false,
itemCounter: 1
});

I beautified my code with Lint, here it is:

var shoppingList = {
    list: ['milk', 'beer', 'sugar'],
    displayShoppingList: function() {
        if (this.list.length > 0) {
            for (var x = 0; x < this.list.length; x++) {
                if (this.list[x].isBought === true) {
                    console.log('(x)' + this.list[x].item);
                } else {
                    console.log('( )' + this.list[x].item);
                }
            }
        } else {
            console.log('Your shopping list is empty');
        }
    },
    addToShoppingList: function(item) {
        this.list.push({
            item: item,
            isBought: false,
            itemCounter: 1
        });
        this.displayShoppingList();
    },
    changeShoppingList: function(place, newItem) {
        this.list[place].item = newItem;
        this.displayShoppingList();
    },
    makeItemBought: function(place) {
        this.list[place].isBought = !this.list[place].isBought;
        this.displayShoppingList();
    },
    deleteFromShoppingList: function(place) {
        this.list.splice(place, 1);
        this.displayShoppingList();
    },
    toggleAllItems: function() {
        for (var y = 0; y < this.list.length; y++) {
            this.list[y].isBought = true;
        }
        this.displayShoppingList();
    },
};

//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)

Done it, but when I try, for example, “shoppingList.displayShoppingList()”, the console still gives me “VM4933:1 Uncaught ReferenceError: shoppingList is not defined
at :1:1”
As it isn’t able to see the very first variable for some reason. Do you have any ideas why it’s happening?

The thing is I am using Plunker for this project. I’ve checked now, when I place “shoppingList.displayShoppingList()” after the code it works, but when I call it from Chrome console - it gives the error I’ve told you about. It should work like this or am I doing a mistake?
Code:

var shoppingList = {
    list: [{
            item: 'milk',
            isBought: false,
            itemCounter: 1
        },
        {
            item: 'beer',
            isBought: false,
            itemCounter: 1
        },
        {
            item: 'sugar',
            isBought: false,
            itemCounter: 1
        }
    ],
    displayShoppingList: function() {
        if (this.list.length > 0) {
            for (var x = 0; x < this.list.length; x++) {
                if (this.list[x].isBought === true) {
                    console.log('(x)' + this.list[x].item);
                } else {
                    console.log('( )' + this.list[x].item);
                }
            }
        } else {
            console.log('Your shopping list is empty');
        }
    },
    addToShoppingList: function(item) {
        this.list.push({
            item: item,
            isBought: false,
            itemCounter: 1
        });
        this.displayShoppingList();
    },
    changeShoppingList: function(place, newItem) {
        this.list[place].item = newItem;
        this.displayShoppingList();
    },
    makeItemBought: function(place) {
        this.list[place].isBought = !this.list[place].isBought;
        this.displayShoppingList();
    },
    deleteFromShoppingList: function(place) {
        this.list.splice(place, 1);
        this.displayShoppingList();
    },
    toggleAllItems: function() {
        for (var y = 0; y < this.list.length; y++) {
            this.list[y].isBought = true;
        }
        this.displayShoppingList();
    },
};

shoppingList.displayShoppingList() // this works, but if I comment out this line and call it from Chrome console it gives the error

Aaaah, got it, thanks a lot! I finally figured that out.

1 Like