我如何將我的json解碼數據動態顯示到ul中

Question

我很抱歉，如果在我似乎找不到任何答案之前就已經提出了這個問題。

以下是我的Json解碼數組：

cart_id:1
cart_items:
  1:
    cost:4
    name:"Titleist Pro V1"
    quantity:4
  2:
    cost:1
    name:"Titleist Pro V1x"
    quantity:1

如何使用JQuery或javascript將其動態顯示為html？ 我發現可以通過使用以下命令顯示單個變量：

$result['cart_items']['1']['name'];

這將給我“ Titleist Pro V1”作為回報。 我在各個方面都遇到了很多錯誤，並且覺得代碼本身太亂了，無法粘貼到這里。 如果有人能告訴我如何使用下一個帶有循環或類似內容的粘貼格式將數據動態創建為ul，那將是驚人的。

<ul>
  <li> $name x $quantity <br> cost: $cost</li>
  <li> $name x $quantity <br> cost: $cost</li>
</ul>

編輯：我的意思是將頂部列表顯示為純html，但是stackoverflow也將其轉換為實際列表，我希望它仍然可以理解。

注意：我的數據是通過laravel / php從數據庫中引入的。 我收到一個json編碼的文件，然后繼續解碼：

$result = jQuery.parseJSON(result);

我需要能夠取得任意數量的結果並顯示項目及其成本的列表。 抱歉，如果遇到很多麻煩，我目前在與Laravel並肩掙扎，事情變得非常疲憊。

謝謝您提前提供的所有幫助！

Answer 1

假設您的JSON采用以下格式

$result = {
  "cart_id" : 1,
  "cart_items": {
      "1": {
        cost:4,
        name:"Titleist Pro V1",
        quantity:4
      },
      "2": {
        cost:1,
        name:"Titleist Pro V1x",
        quantity:1
      }
  }
};

您可以使用jQuery 每個方法來遍歷對象，使用下面的代碼生成<ul>

var b = "<ul>";

$.each($result['cart_items'], function(property, value) {
  b += "<li>" + value['cost'] * value['quantity'] + "<br/>" + "cost " + value['cost'] + "</li>";
});

b += "</ul>";

$(".container").html(b);

Codepen： https ：//codepen.io/anon/pen/xdLEBb