Unable to get indexOf to work for Array function - see bottom. Always get -1 and I've tried a million variations. Using IndexOf as part of Splice

Dougal · February 13, 2021, 7:31pm

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>My Very First Web Page</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
 <body>
<h1>My Bakery List</h1>
    <ol id="bakeryList">
    </ol>
    <input id="bakeryItemNameInput"placeholder="Input Bakery Item"type="text"/>
    <input id="bakeryItemCostInput"placeholder="Input Bakery Item Cost"type="text"/>
    <button id="addItemButton"> Add Bakery Item</button>
    <p></p>
    <input id="bakeryItemNameInputMod"placeholder="Input Bakery Item to Mod"type="text"/>
    <input id="modifyCostInput"placeholder="New Cost of Bakery Item"type="text"/>
    <button id="modifyCostButton"> Modify Cost</button>
<script>
    var bakery = [];
        function redrawList(){
        var list = $("#bakeryList");
        list.html("");
        $.each(bakery,function(index,value){
            $("<li/>").text(value.name+", "+value.cost+" Euro").appendTo(list);
        });
    }redrawList();
        $("#addItemButton").click(function(){
        var bakeryItemName = $("#bakeryItemNameInput").val();
        var bakeryItemCost = $("#bakeryItemCostInput").val();
        var bakeryObject = {name:bakeryItemName,cost:parseInt(bakeryItemCost)};
        bakery.push(bakeryObject);
        console.log(bakery);
        redrawList();
     });
     var bakery = [];
     function redrawModList(){
         var list = $("#bakeryList");
         list.html("");
         $.each(bakery,function(index,value){
           $("<li/>").text(value.name+", "+value.cost+" Euro").appendTo(list);
       });
   };
    $("#modifyCostButton").click(function(){
        var bakeryItemToChange = $("#bakeryItemNameInputMod").val();
        var modifyBakeryItemCost = $("#modifyCostInput").val();
        var bakeryObjectMod = {name:bakeryItemToChange,cost:parseInt(modifyBakeryItemCost)};
        var x = bakery.indexOf({bakeryObjectMod});
        bakery.splice(x,1,{name:bakeryItemToChange,cost:parseInt(modifyBakeryItemCost)});
        console.log(x); //always -1
        redrawList();
    });

    </script>
    </body>
    </html>

Not sure why this message field didn’t put in my entire code block

Malik · February 13, 2021, 7:46pm

Hi @Dougal,

There are two issues over here.

First of all,
You are wrapping your object with another object to compare. The structure of the end result object has two wrapped curly braces which is not what you intend to do.

Your code with the your intent should be –
var x = bakery.indexOf(bakeryObjectMod);

However, this also wont lead you to find the object in the array even if it has the same properties and values. That leads me to the second point –

Second,
You cannot compare objects directly in javascript.

For example –

var a = {
  name: "boo",
  nickname: "shoo",
  }

var b  = {
  name: "boo",
 nickname: "shoo"
  }

console.log(a == b ); //renders false
console.log(a === b ); //renders false

Why is this so? Javascript takes each object as a different instance. It compares with the reference in memory and not with the contents of the object. Unlike primitives (Strings, numbers, bools etc) .
You can research more about it in-depth if you would like to. Perhaps this link would help to get you started –https://medium.com/javascript-in-plain-english/comparing-objects-in-javascript-ce2dc1f3de7f

Hope this gives you an idea.

To compare objects in an array I would suggest using the “name” property as the primary way of comparison for each object in your example instead of comparing the entire object directly.

Hope this helps.

Happy learning!

Dougal · February 15, 2021, 5:37pm

Tks Malik

I’ll work on it again later.

In the meantime I have another issue that I don’t know why I’m getting this error on Question 40. Everything seems fine to me.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>My Very First Web Page</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
 <body>
<script>
var phonebook = {
    Carlos: 22334455,
    Gabba: 95959595,
    Ivo: 97950795,
    Fabrice: 12345678
}
var name = prompt("Enter name:");
If (name in phonebook) { **//keep getting uncaught syntax error: unexpected token '{' on this line**
    let numb = phonebook[name];
    console.log("The Phone Number for "+name+" is "+numb);
}
else {
    console.log("We have not stored a number for" +name);
}
</script>
</body>
</html>

Dougal · February 15, 2021, 5:34pm

Spending too much time on this and spinning my wheels. You’re going to have to spell it out for this D.A. Malik
I’ve managed to get my updated item inside the array but I need to get my update inside squirrily brackets.


 var bakery = [];
     function redrawModList(){
         var list = $("#bakeryList");
         list.html("");
         $.each(bakery,function(index,value){
           $("<li/>").text(value.name+", "+value.cost+" Euro").appendTo(list);
       });
   };
    $("#modifyCostButton").click(function(){
        var bakeryItemToChange = $("#bakeryItemNameInputMod").val();
        var modifyBakeryItemCost = $("#modifyCostInput").val();
        var bakeryObjectMod = {
            name:bakeryItemToChange,
            cost:parseInt(modifyBakeryItemCost)
        };
        var x = bakery.indexOf(bakeryObjectMod);
        bakery.splice(x,1,????.parseInt(modifyBakeryItemCost));
        console.log(bakery);
        redrawList();
    });

Malik · February 15, 2021, 5:39pm

You are using a capital I for “if”. Use smaller case “I” please.

Malik · February 15, 2021, 5:57pm

Hi,
I’ve already to told you above that you need not compare objects directly, yet over here -

You are trying to locate the object by passing in the entire object. This is completely incorrect.

For the interest of your time, I have updated your code and pasted below.,

Please take reference from it and analyse what I have done.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>My Very First Web Page</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
 <body>
<h1>My Bakery List</h1>
    <ol id="bakeryList">
    </ol>
    <input id="bakeryItemNameInput"placeholder="Input Bakery Item"type="text"/>
    <input id="bakeryItemCostInput"placeholder="Input Bakery Item Cost"type="text"/>
    <button id="addItemButton"> Add Bakery Item</button>
    <p></p>
    <input id="bakeryItemNameInputMod"placeholder="Input Bakery Item to Mod"type="text"/>
    <input id="modifyCostInput"placeholder="New Cost of Bakery Item"type="text"/>
    <button id="modifyCostButton"> Modify Cost</button>
<script>
    var bakery = [];

    function redrawList(){
        var list = $("#bakeryList");
        list.html("");
        $.each(bakery,function(index,value){
            $("<li/>").text(value.name+", "+value.cost+" Euro").appendTo(list);
        });
    }
    redrawList();


     function redrawModList(){
         var list = $("#bakeryList");
         list.html("");
         $.each(bakery,function(index,value){
           $("<li/>").text(value.name+", "+value.cost+" Euro").appendTo(list);
       });
   };

   $("#addItemButton").click(function(){
        var bakeryItemName = $("#bakeryItemNameInput").val();
        var bakeryItemCost = $("#bakeryItemCostInput").val();
        var bakeryObject = {name:bakeryItemName,cost:parseInt(bakeryItemCost)};
        bakery.push(bakeryObject);
        console.log(bakery);
        redrawList();
     });


    $("#modifyCostButton").click(function(){
        var bakeryItemToChangeName = $("#bakeryItemNameInputMod").val();
        var modifyBakeryItemCost = $("#modifyCostInput").val();
        // var bakeryObjectMod = {
        //     name:bakeryItemToChange,
        //     cost:parseInt(modifyBakeryItemCost)
        // };
        var newBakery = [];
        bakery.forEach(bakeryItemAlreadySaved => {
            if (bakeryItemAlreadySaved.name == bakeryItemToChangeName){
                var bakeryObjectMod = {};
                bakeryObjectMod.name = bakeryItemToChangeName
                bakeryObjectMod.cost= parseInt(modifyBakeryItemCost)
                newBakery.push(bakeryObjectMod)
            }else{
                newBakery.push(bakeryItemAlreadySaved)
            }
        });
        // var x = bakery.indexOf(bakeryObjectMod);
        // bakery.splice(x,1,????.parseInt(modifyBakeryItemCost));
        console.log(newBakery, "new bakery");
        bakery =newBakery;
        redrawModList();
    });
    </script>
    </body>
    </html>

Hope this helps.