Question

我有一系列产品：

const products = {
    {
        id: item1,
        name: 'My product',
        price: 100
    },
    {
        id: item2,
        name: 'My other product',
        price: 200
    },
    {
        id: item3,
        name: 'My other other product',
        price: 150
    }
}

我还有一个订单状态，说明订单中的产品和数量。在这种情况下，顺序中有1个item1和2个item2：

const orderState = {
    item1: 1,
    item2: 2
}

如何在订单中呈现产品名称和次数？我使用React，但我认为vanilla JS是解决方案所需的全部内容。

我的HTML输出必须是：

<ul>
 <li>My product x1 = $1</li>
 <li>My other product x2 = $4</li>
</ul>

Answer 1

您存储数据的方式似乎给您带来了困难。首先，使产品数组成为实际数组：

const products = [
    {
        id: item1,
        name: 'My product',
        price: 100
    }, //...
];

此外，item1值是多少？这是某种实际的ID，比如整数吗？这就是您稍后用于识别产品的方法。

然后，对于“订单状态”，创建一个包含产品引用数组的对象。像这样：

const orderState = {
    products: [
        {
            productID: item1,
            quantity: 1
        },
        {
            productID: item2,
            quantity: 2
        }
    ]
}

现在您拥有更合理的数据结构，您可以更轻松地对该结构进行操作。有多种方法可以构建输出，如何执行此操作可能在很大程度上取决于您正在使用的其他工具（例如模板引擎等）。但是为了演示逻辑，让我们构建一个简单的字符串：

var output = '<ul>';

for (var i = 0; i < orderState.products.length; i++) {

    var product = {};
    for (var j = 0; j < products.length; j++) {
        if (products[j].id == orderState.products[i].id) {
            product = products[j];
            break;
        }
    }

    output += '<li>' + product.name + ' x' + orderState.products[i].quantity + ' = $' + (product.price * orderState.products[i].quantity) + '</li>';
}

output += '</ul>';

您可以根据需要进行重构和改进。例如，基于其id查找产品的逻辑可以提取到自己的函数中，或者甚至可以使用内置的JavaScript功能或框架功能简化为单行。（underscore.js对于这样的功能很有用。）

但基本思想是保持数据结构的合理组织。然后，对这些结构进行操作的代码变得微不足道。

Answer 2

使用以下解决方案，您可以根据问题陈述获取所选产品的名称。

let productsOrderedIds = Object.keys(orderState);
let proNames = [];
for(let pro of products) {
    if(productsOrderedIds.indexOf(pro.id) !== -1){
        proNames.push(pro.name);
    }
} 
console.log(proNames);

将“订单”与“产品”数组进行比较，并在订单中打印产品名称？

2 个答案: