javascript - 如何在javascript中迭代多个对象及其属性

Question

所以目前我正在创建一个用于学习目的的网站。我正在使用SimpleCart 用于将用户想要购买的商品存储到 localStorage 中。但是，现在我想将数据从 localStorage 移至我的数据库中。目前我正在使用 Node.js 来处理这个问题。这是我用来将其添加到数据库的代码示例。

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));
        }
    }
}

目前我面临的问题是我无法获取每个单独对象的属性，例如，如果我 console.log(OrderArray.id) 我得到未定义的值。据我所知，该循环是有效的，因为如果我将 console.log 放入循环中，它将循环遍历 localStorage 中的所有对象，并在控制台中返回该数量的 undefined object 。我的问题是，如何获取每个对象的属性值？

编辑:如果我要运行 JSON.parse(localStorage.getItem("simpleCart_items")) 它会返回 following .

Answer 1

OrderArray.id 正在寻找 OrderArray 上的 id 属性，但您的代码似乎假定 OrderArray是某种容器(从名称来看可能是一个数组)。因此，您希望从 OrderArray 中的每个条目获取 id 属性。

不假设它是一个数组(以防万一)，对该代码的最小更改就是填充 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; // ""

<小时/>

我还会对该代码进行其他更改:

1. 如果 OrderArray 是一个数组，则 for-in 不是循环遍历它的好方法；请参阅my answer here用于循环数组的许多选项。

2. 即使它适用于您的特定情况，我也不会创建单个对象(分配给 orderDetail)并在每个循环中覆盖其属性。我会创建单独的对象。

3. 显然，您可以在自己的代码中使用任何您喜欢的命名约定，但我强烈建议不要使用首字母大写命名局部变量(通常为构造函数保留)。所以 orderArray 而不是 OrderArray。

也许:

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));
    });
}

...在 ES5 环境中。在 ES2015+ 环境中，基本相同:

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));
    }
}