将值提取并打印到JSON

时间:2019-02-28 11:52:39

标签: javascript arrays json

我需要提取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();

1 个答案:

答案 0 :(得分: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);