Shopping List app HELP


#1

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)


#2
  1. On the line for (var x=0;x<list.length;x++){, you’re not using this. shoppingList.toggleAllItems has this problem too (I think that’s the only other place).
  2. On the lines with console.log, this.items[x].item doesn’t exist. this.items is an array of items, so this.items[x] is the item you want.

Also, if you code indented in your editor? If it’s not, I highly recommend indenting things to make it easier to read (for you and other people who look at your code). Also it’s a good idea to put spaces between certain things like keywords and brackets. For instance,

for (var x=0;x<this.list.length;x++){

would probably look better like this:

for (var x = 0; x < this.list.length; x++) {

It’s easy to not format code while you’re in the moment translating your thoughts into computer-speak, but good formatting makes it easier to scan through and see what’s going on. And of course there are preferences for how to format code, but it’s generally always a good idea to give your code some whitespace to let it “breathe”.

Also when pasting code here on the forum, make a new line, add ```javascript, make a new line and paste your code, then add ``` on another new line. This will make the code show up nicely on the forum.

Hope I helped!


#3

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)

#4

Ah, I see. In that case you want to change each item in your list array from strings to objects. So change this:

list: ['milk', 'beer', 'sugar'],

to something like this:

list: [
    {
      item: 'milk',
      isBought: false,
      itemCounter: 1
    },
    {
      item: 'beer',
      isBought: false,
      itemCounter: 1
    },
    {
      item: 'sugar',
      isBought: false,
      itemCounter: 1
    }
  ],

That way the items that you start out with are the same format as items that get added in addToShoppingList.


#5

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?


#6

Are you running shoppingList.displayShoppingList() before or after the line that shoppingList starts on? You’ll need to call any functions on shoppingList after it’s been defined and everything.

If that’s not it can you post the exact code that errors? You’re right that the function call should work.


#7

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

#8

The problem is using the console. Plunker (and sites like it) run the code in their own closures and such, meaning that variables you make in the editor isn’t (easily) accessible through the console.

So you can use console.log in your code and it’ll come up in the console, but the console doesn’t have access to your code*.

* - The console can still access the code technically, but doing that isn’t going to be straightforward and it isn’t a convenient way to debug.


#9

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