如何使用 JavaScript 从嵌套在 JSON 对象中的对象访问键和值

Question

) 如何从此 JSON 字符串访问 Soda 对象键和值并让它们显示在我的 innerHTML 中？我这里显示的是饮料，但我还需要显示苏打水的选择...谢谢您的帮助！

<script>
var selection ='{"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 myObj = JSON.parse(selection)
var extras ="";
var key="";
    var beverages ="";
    for(key in myObj.menu.drinks){
        if (myObj.menu.drinks.hasOwnProperty(key)) {
            beverages +='<li>' +
            key + ':' + myObj.menu.drinks[key] +  '</li>';
                }
    }

var update = document.getElementById('drinks').innerHTML = beverages;
</script>

Answer 1

首先获取汽水对象。

var soda = myObj.menu.drinks.soda;

然后你可以像这样得到键和值。

Object.keys(soda).forEach( key => console.log(key, soda[key]));

Answer 2

您需要检查嵌套值的类型：

var selection ='{"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 myObj = JSON.parse(selection)
var extras ="";
var key="";
    var beverages ="";
    for(key in myObj.menu.drinks){
        if (myObj.menu.drinks.hasOwnProperty(key)) {        
            if (typeof myObj.menu.drinks[key] === 'string') {
              beverages +='<li>' +
              key + ':' + myObj.menu.drinks[key] +  '</li>';               
            } else {
            beverages +='<li>' + key + '</li>'; 
              
              beverages += '<ul>';
              for(var ikey in myObj.menu.drinks[key]){
                if (myObj.menu.drinks[key].hasOwnProperty(ikey)) {
                  beverages +='<li>' +
                    ikey + ':' + myObj.menu.drinks[key][ikey] + '</li>';
                }
              }
              beverages += '</ul>';
            }
        }
    }

var update = document.getElementById('drinks').innerHTML = beverages;

<ul id='drinks'>
</ul>

如何使用 JavaScript 从嵌套在 JSON 对象中的对象访问键和值

How to access key and value from object nested in JSON object using JavaScript

javascript

json

innerhtml