How to iterate through multiple object's and it's properties in javascript

Question

So currently I'm creating a website for learning purposes. I'm using SimpleCart for storing the items the user wants to purchase into localStorage. However, now I want to move the data off of localStorage and into my database. Currently I'm using Node.js to handle this. Here is a sample of the code I'm using to add it to my database.

function addToDBFood()
{
    var OrderArray = JSON.parse(localStorage.getItem("simpleCart_items"));

    var orderDetail = new Object();

    for (var id in OrderArray) {
        if (OrderArray.hasOwnProperty(id)) 
        {
            orderDetail.order_id = OrderArray.id;
            orderDetail.order_item = OrderArray.name;
            orderDetail.order_item_price = OrderArray.price;
            orderDetail.order_quantity = OrderArray.quantity ;

            var addToDB = new XMLHttpRequest();

            addToDB.open("POST", '/orderdetail', true);

            addToDB.setRequestHeader("Content-Type", "application/json");

            addToDB.send(JSON.stringify(orderDetail));
        }
    }
}

Currently the problem I'm facing is that I cannot get the property of each individual object, for example, if I console.log(OrderArray.id) I get undefined. The loop works, as far as I can tell because if I placed the console.log in the loop, it will loop for however many objects I have inside localStorage and return that number of undefined in the console. My question is, how do I go about getting the the value of the property of each and every object?

EDIT: If I were to run JSON.parse(localStorage.getItem("simpleCart_items")) it returns the following.

Re the edit: Post textual things (code, JSON, markup, etc.) as **text**, not as *pictures* of text. More: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Feb 19 '18 at 13:11

T.J. Crowder · Accepted Answer · 2018-02-19T08:51:25.827

OrderArray.id is looking for an id property on OrderArray, but your code appears to assume OrderArray is a container of some kind (probably an array, from the name). So you want to get the id property from each entry in OrderArray.

Without assuming it's an array (just in case), minimal changes to that code would be to do this to fill in orderDetail:

var entry = OrderArray[id];                  // <== Get this specific entry
orderDetail.order_id = entry.id;             // <== Use the entry
orderDetail.order_item = entry.name;         // ""
orderDetail.order_item_price = entry.price;  // ""
orderDetail.order_quantity = entry.quantity; // ""

There are other changes I'd make to that code:

If OrderArray is an array, for-in is not a good way to loop through it; see my answer here for lots of options for looping through arrays.
Even though it will work in your specific case, I wouldn't create a single object (assigned to orderDetail) and overwrite its properties in each loop. I'd create separate objects.
Obviously you can use any naming conventions in your own code you like, but I would strongly recommend not naming local variables with an initial capital (typically reserved for constructor functions). So orderArray rather than OrderArray.

So perhaps:

function addToDBFood() {
    var orderArray = JSON.parse(localStorage.getItem("simpleCart_items"));
    orderArray.forEach(function(entry) {
        var orderDetail = {
            order_id: orderArray.id,
            order_item: orderArray.name,
            order_item_price: orderArray.price,
            order_quantity: orderArray.quantity
        };
        var addToDB = new XMLHttpRequest();
        addToDB.open("POST", '/orderdetail', true);
        addToDB.setRequestHeader("Content-Type", "application/json");
        addToDB.send(JSON.stringify(orderDetail));
    });
}

...in an ES5 environment. In an ES2015+ environment, largely the same:

function addToDBFood() {
    const orderArray = JSON.parse(localStorage.getItem("simpleCart_items"));
    for (const entry of orderArray) {
        const orderDetail = {
            order_id: orderArray.id,
            order_item: orderArray.name,
            order_item_price: orderArray.price,
            order_quantity: orderArray.quantity
        };
        const addToDB = new XMLHttpRequest();
        addToDB.open("POST", '/orderdetail', true);
        addToDB.setRequestHeader("Content-Type", "application/json");
        addToDB.send(JSON.stringify(orderDetail));
    }
}

How to iterate through multiple object's and it's properties in javascript

1 Answers1