循环通过 Object 并得到 output 到 HTML

Question

我在理解 Javascript 的哪一点用于循环通过下面的 object 到然后 output 到 Z4C4AD5FCA2E78AAAF4000 时遇到了一些麻烦。 目的是将 output 中的值从 object 转到页面上，例如 HTML Z29C2C02A361C9D70254EZCD2。

{
   "lineItems":{
      "physicalItems":[
         {
            "id":70,
            "productId":362,
            "name":"Sample Product 1 ",
            "sku":"290909",
            "quantity":1,
            "isTaxable":true,
            "discounts":[

            ],
            "discountAmount":0,
            "listPrice":130,
            "salePrice":130,
            "extendedListPrice":130,
            "extendedSalePrice":130,
            "extendedComparisonPrice":130,
            "categories":[

            ],
            "type":"physical",
            "variantId":593
         },
         {
            "id":69,
            "productId":383,
            "name":"Sample Product",
            "sku":"280910",
            "quantity":1,
            "isTaxable":true,
            "discounts":[

            ],
            "discountAmount":0,
            "listPrice":350,
            "salePrice":350,
            "extendedListPrice":350,
            "extendedSalePrice":350,
            "extendedComparisonPrice":350,
            "categories":[

            ],
            "type":"physical",
            "variantId":685
         }
      ],
      "digitalItems":[

      ],
      "giftCertificates":[

      ]
   }
}

HTML Output 需要

PhysicalItems 1 - Sample Product 1
SalePrice 1 - 130
PhysicalItems 2 - Sample Product
SalePrice 2 - 350

对此的任何帮助将不胜感激。 谢谢

Answer 1

您最干净的选择是使用像 mustache.js 或 handlebarsjs 这样的模板框架。

但是，使用 ES6 JavaScript 您可以执行以下操作：

const lineItems = require("./lineItems.json");

/**
* @param {string} type
*/
const createMarkupFor = type => {

const markup = `
   <ul>
       ${lineItems[type].map((lineItem, index) => (`
            <li>
                PhysicalItems ${index + 1} - Sample Product ${lineItem.name}
             </li>
             <li>
                SalesPrice ${index + 1} - ${lineItem.salePrice}
             </li>
        `))}
    </ul>`
    
    document.body.innerHTML = markup;
};

createMarkupFor("physicalItems");