Javascript 循环对象并将输出转换为HTML

我很难理解使用哪一位Javascript循环下面的对象，然后输出到HTML。其目的是将对象中的值输出到页面上，类似于HTML输出

{
   "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输出

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

---

在此方面的任何帮助都将不胜感激。谢谢

您最干净的选择是使用一个模板框架，比如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");

constlineitems=require（“./lineItems.json”）；
/**
*@param{string}类型
*/
const createMarkupFor=type=>{
常量标记=`

${lineItems[type].map（（lineItem，index）=>(`

PhysicalItems${index+1}-示例产品${lineItem.name}


售价${index+1}-${lineItem.salePrice}

`))}
`
document.body.innerHTML=标记；
};
createMarkupFor（“物理术语”）；

到目前为止您尝试了什么？您可以使用以下方法：通过obj['lineItems']['physicalItems']循环，谢谢@Kudlas的回复