如何使用 JavaScript 将 JSON 字符串中的键和值添加到 innerHTML 中

如何将

值添加到我的for循环中，以便我的innerHTML同时显示键和值？感谢您的帮助！

    <body>
<section>
<h2>Toppings</h2>
<ul id="toppings">    </ul>
</section>
     </body>
<script>
var myObj ={"menu": {"slice of pizza": "2.00", "toppings": {"pepperoni": ".25","meatballs": ".35", "mushrooms": ".40","olives": ".20"},"sides": {"potato salad": "1.25","hummus": "2.50","caesar salad": "3.50","garden salad": "2.25"},   "drinks": { "soda": {   "small": "1.95",  "medium": "2.20","large": "2.50" }, "juice": "2.00", "water": "1.25"}}};
var extras ="";
for(key in myObj.menu.toppings){
    if (myObj.menu.toppings.hasOwnProperty(key)) {
        extras +='<li>' +
        key + '</li>';
            }
}
var update = document.getElementById('toppings').innerHTML = extras;
</script>
</html>

您可以通过以下方式之一：

myObj.menu.toppings[key]

var myObj = {
  "menu": {
    "slice of pizza": "2.00",
    "toppings": {
      "pepperoni": ".25",
      "meatballs": ".35",
      "mushrooms": ".40",
      "olives": ".20"
    },
    "sides": {
      "potato salad": "1.25",
      "hummus": "2.50",
      "caesar salad": "3.50",
      "garden salad": "2.25"
    },
    "drinks": {
      "soda": {
        "small": "1.95",
        "medium": "2.20",
        "large": "2.50"
      },
      "juice": "2.00",
      "water": "1.25"
    }
  }
};
var extras = "";
for (key in myObj.menu.toppings) {
  if (myObj.menu.toppings.hasOwnProperty(key)) {
    extras += '<li>' +
      key+':'+myObj.menu.toppings[key] + '</li>';
  }
}
var update = document.getElementById('toppings').innerHTML = extras;

<body>
  <section>
    <h2>Toppings</h2>
    <ul id="toppings"> </ul>
  </section>
</body>

相关内容

最新更新

热门标签：