将javascript数组转换为HTML并追加到表中

debugcn 发表于 Dev

用户3456188

我有这个javascript / array ...

var prodPrice = { // quantity prices, lowest no. is min qty
   "11580294ce6c41e574c7e9efe063bf01": {
      minqty: 1,
      name: "Diamond Pillar",
      imageURL: "",
      bigImageURL: "",
      prices: [
         {price: 79.96, qty: 1},
         {price: 75.96, qty: 10},
         {price: 72.16, qty: 25},
         {price: 70.36, qty: 50},
         {price: 68.60, qty: 100}
      ]
   },
   "49f398d1cce9093be484eb5afa1c5ed9": {
      minqty: 1,
      name: "Diamond Pillar",
      imageURL: "",
      bigImageURL: "",
      prices: [
         {price: 119.96, qty: 1},
         {price: 113.96, qty: 10},
         {price: 108.26, qty: 25},
         {price: 105.56, qty: 50},
         {price: 102.92, qty: 100}
      ]
   }
}

我想从上面的数组中获取价格，或者将它们作为额外的行附加到另一个表上，或者像这样创建一个全新的表...

                1       10      25       50       100
Diamond Pillar  79.96   75.96   72.16    70.36    68.60
Diamond Pillar  119.96  113.96  108.26   105.56   102.92

我希望这是有道理的-一如既往的感谢

刚果民主共和国

您可以尝试我的快速解决方案（如果需要，您可以重构我的代码）：

var keys = Object.keys(prodPrice);

(function () {
   var body = document.body,
      tbl = document.createElement("table"),
      firstTableRow = tbl.insertRow(0);
   firstTableRow.insertCell(-1);
   for (key in keys) {
      if (undefined !== prodPrice[keys[key]].prices) {
         var i = 0,
            tr = tbl.insertRow(1),
            priceLen = prodPrice[keys[key]].prices.length;
         tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].name));
         if(0 < priceLen) {
            for (i = 0; i < priceLen; i++) {
               if(undefined !== prodPrice[keys[key]].prices[i].price) {
                  if (0 == key) {
                     firstTableRow.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].qty));
                  }
                  tr.insertCell(-1).appendChild(document.createTextNode(prodPrice[keys[key]].prices[i].price));
               }
            }
         }
      }
      body.appendChild(tbl);
   }
})();

您可以在jsfiddle尝试我的代码。

另外，您还必须在此处阅读有关javaScript对象的更多信息。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。