I have an array of json object and I cant pop an element javascript

Question

Good day guys, I have an array of json in the first part of the program it would look like this:

var jsonToSaveToDB = [
        {
            ProductID: null,
            Quantity: null,
            TotalPrice: null
        }
    ];

Later on the program, I have a function that will populate that array with json and as a result, it would look like this:

var jsonToSaveToDB = [

  {
        ProductID: 1,
        Quantity: 4,
        TotalPrice: 12.80
    },
    {
        ProductID: 2,
        Quantity: 2,
        TotalPrice: 12.80
    },

    ..... other elements of the array

    {
        ProductID: null,
        Quantity: null,
        TotalPrice: null
    }
];

and I want to popup the last element of the array.Because, All the value of that last element was null.

But the catch is, I can't pop an element from that array. If you want to see my code structure.

It would look like this:

<script>
var jsonToSaveToDB = [
    {
        ProductID: null,
        Quantity: null,
        TotalPrice: null
    }
];

///some codes....
//....
$(document).ready(function(){

   function checkoutNow() {

        $.each(carted_prods, function (index, element) {
            var newObj = {
                ProductID: parseInt(element.itemID),
                Quantity: parseInt(element.itemQuantity),
                TotalPrice: parseFloat(element.itemPrice)
            };
            jsonToSaveToDB.unshift(newObj);
        });

        console.log(jsonToSaveToDB);

        if (jsonToSaveToDB.length > 0) {
            $.ajax({
                url: '/POS/POS/CheckoutProducts',
                data: { json: JSON.stringify(jsonToSaveToDB) },
                contentType: "application/json",
                success: function (result) {
                    console.log(result);
                }
            });
        }


        //console.log("Checkout now.");
    }

});

</script>

Answer 1

If the issue that you're facing in jsonToSaveToDB array is that you're always getting null values for ProductID, Quantity, TotalPrice in the last element of the array, you can easily remove them using jsonToSaveToDB.pop() .

If you don't know where the position of the object element in the array jsonToSaveToDB , then you can filter them out from the array.

jsonToSaveToDB.filter(obj => obj.ProductID !== null)

I hope this helps. Let me know if you have any doubts.

Answer 2

I would suggest not to initialise the array of object properties with null values at the beginning. Set initially

var jsonToSaveToDB =[] 

and

function checkoutNow() {
    $.each(carted_prods, function (index, element) {
        if(element.itemID || element.itemQuantity || element.itemPrice){
            var newObj = {
                ProductID: parseInt(element.itemID),
                Quantity: parseInt(element.itemQuantity),
                TotalPrice: parseFloat(element.itemPrice)
            };
            jsonToSaveToDB.unshift(newObj);
        }
   });
   ... Other codes
}

This code will add the contents in the array without the null object value. And add a check in the $.each loop

(if(element.itemID || element.itemQuantity || element.itemPrice))

That if any one value is present in the element, add it to the array. You can customise further according to the needs.Hope this helps.

Answer 3

I already found an answer to my questions, the carted_prods variable was an array of json it contains an element with a null value which by the time that it goes to the $.each() it will populate a NaN so i use this code to filter out the element that doesn't have a null and NaN

 jsonToSaveToDB = jsonToSaveToDB.filter(obj => !isNaN(obj.ProductID));
 jsonToSaveToDB = jsonToSaveToDB.filter(obj => obj.ProductID != null)