javascript - 提取值并将其打印为 JSON

Question

我需要提取 json 并打印它。起初我手动执行，但这显然不是正确的方法。当我尝试使用 forEach 循环遍历 3 个对象时，不知道下一步该做什么。我的问题是是否可以仅使用循环来显示数据？

   jsonDisplay = () => {
    let data = `{
    "name": "GI",
    "size": 10,
    "nodes": [
        {
            "name": "Mysterious",
            "size": 2,
            "nodes": [
                {
                "name": "Center",
                "size": 1,
                "nodes": [
                        {
                        "name": "Fisherman",
                        "size": 0.5,
                        "nodes": []
                        }
                    ]
                },
                {
                "name": "Dog",
                "size": 1,
                "nodes": []
                }
            ]
        },
        {
            "name": "Cat",
            "size": 4,
            "nodes": []
        }
    ]
}
`

    let json = JSON.parse(data);
  let display =  document.getElementById('json');
  let display2 = document.getElementById('jsonloop');

    console.log(json);
    json.nodes.forEach(function(element) {
        console.log(element);
     });
  display.innerHTML = `${json.name}  ${json.size}
                    <br> 
                        ${json.name} - ${json.nodes[0].name} ${json.nodes[0].size} 
                    <br>
                        ${json.name} - ${json.nodes[0].name} - ${json.nodes[0].nodes[0].name} ${json.nodes[0].nodes[0].size} 
                    <br>
                       ${json.name} - ${json.nodes[0].name} -  ${json.nodes[0].nodes[0].name} ${json.nodes[0].nodes[0].nodes[0].name} - ${json.nodes[0].nodes[0].nodes[0].size} 
                    <br>
                        ${json.name} - ${json.nodes[0].name} -  ${json.nodes[0].nodes[1].name} - ${json.nodes[0].nodes[1].size}
                    <br>
                        ${json.name} - ${json.nodes[1].name} - ${json.nodes[1].size}`; 
    }

jsonDisplay();

Answer 1

所以你想打印出每个嵌套对象的名称/大小？这是一个基本的递归函数，会有所帮助。

const data = {"name":"GI","size":10,"nodes":[{"name":"Mysterious","size":2,"nodes":[{"name":"Center","size":1,"nodes":[{"name":"Fisherman","size":0.5,"nodes":[]}]},{"name":"Dog","size":1,"nodes":[]}]},{"name":"Cat","size":4,"nodes":[]}]};

(function recursivePrint({ name, size, nodes }) {
  console.log(name, size);
  nodes.length && nodes.forEach(node => recursivePrint(node));
})(data);