CODEWITHSUNDEEP
javascriptjqueryarrayssplice
Richard Legg
Richard Legg

Reputation: 181

Javascript function to add to or splice array

I have two buttons, each button adds an array to the array orderArray. This works fine and the array is displayed as a html table. When the table is output a button is also created. This buttons purpose is to remove the array associated with it, and hence remove a line from the table.

This works fine, but after removing part of the array with .splice it is not possible to then add more to the array, it just throws "cannot read property length".

You can see in the console that the array is spliced and that the length value is correct but the error still persists. I am clearly not getting something here, as I thought that as the loop calls myArray.length it would get the right length every time.

Here is the js:

var orderArray = [];
var orderNumber = 0;
var theOrder = [];
var total = 0;

function orderUpdate(item,price){
    theOrder = [item, price];
    orderArray[orderNumber] = theOrder;
    orderNumber++;
}

function makeTable(myArray) {
    var result = "<table border=2 id=orderTable>";
    console.log(myArray.length);
    for(var i = 0; i < myArray.length; i++) {
        result += "<tr id='row" + i + "'>";
        for(var j = 0; j < myArray[i].length; j++){
            result += "<td>" + myArray[i][j] + "</td>";

        }
        result += "<td><button onclick='removeLine(" + i + ")'>Remove</button></td></tr>";
    }
    result += "</table>";
    console.log(myArray);
    return result;
}

$( "#LongB" ).click(function() {
    orderUpdate("Long Black", 2.50);
    $("#ordered").html(makeTable(orderArray));
});

$( "#FlatW" ).click(function() {
    orderUpdate("Flat White", 3.50);
    $("#ordered").html(makeTable(orderArray));
});

function removeLine(arrayIndex){
    orderArray.splice(arrayIndex, 1);
    console.log(orderArray);
    $("#ordered").html(makeTable(orderArray));
}

and the html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSPOS</title>
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>

</head>
<body>

<button id="LongB">Long Black</button>
<button id="FlatW">Flat White</button>
<h3>Ordered:</h3>
<div id="ordered"></div>

<script src="js/stuff.js"></script>
</body>
</html>

and here it is as a fiddle.

Upvotes: 1

Views: 219

Answers (2)

guest271314
guest271314

Reputation: 1

Try substituting orderArray.push(theOrder); for orderArray[orderNumber] = theOrder;

function orderUpdate(item,price){
    theOrder = [item, price];
    orderArray.push(theOrder);
    // orderNumber++;
}

jsfiddle https://jsfiddle.net/purnrntr/2/

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10683

This is because you are increasing the orderNumber when you add new item but when you remove the item you forgot to decrease the orderNumber so you got the error because index doesn't exists in array:-

function removeLine(arrayIndex){
orderArray.splice(arrayIndex, 1);
console.log(orderArray);
 orderNumber--; //add this line
$("#ordered").html(makeTable(orderArray));
}

Demo

Upvotes: 2

Related Questions