读取和显示数组嵌套值

Question

我必须在带有标题和副标题的列表中显示选项卡值。我可以读取对象键计数，但无法获取每个节点的值和子值。

请提供有关如何检索值并以HTML显示的建议

var tab= {
  "a": {
    "one": [
      {
        "name": "xxx",
        "age": "10"
      } 
    ],
    "two": [
      {
        "name": "yxss",
        "age": "11"
      }
    ]
  },
  "b": {
    "one": [
      {
        "name": "ctr",
        "age": "11"
      },
      {
        "name": "cft",
        "age": "11"
      }
    ]
  },
  "c": {
    "two": [
      {
        "name": "cccc",
        "age": "11"
      }
    ]
  }
}

let count = Object.keys(tab).length;
console.log(count);
for (i =0; i < count ; i ++)
{ 
  console.log("<h1>"+tab[i]+"</h1>");
  let count1 = Object.values(tab[i]).length;
    for (j =0; j < count1 ; j++)
    { 
      console.log(tab[i][j]);

    }
}

Answer 1

对您有好处吗？

var tab= {
  "a": {
    "one": [
      {
        "name": "xxx",
        "age": "10"
      } 
    ],
    "two": [
      {
        "name": "yxss",
        "age": "11"
      }
    ]
  },
  "b": {
    "one": [
      {
        "name": "ctr",
        "age": "11"
      },
      {
        "name": "cft",
        "age": "11"
      }
    ]
  },
  "c": {
    "two": [
      {
        "name": "cccc",
        "age": "11"
      }
    ]
  }
}

$(document).ready(function() {
  Object.keys(tab).forEach(function(k) {
    $('#result').append('<h1>' + k + '</h1>')
      Object.keys(tab[k]).forEach(function(kk) {
        $('#result').append('<ul id= "' + kk + '">' + kk + '</ul>')
        tab[k][kk].forEach(function(i) {
          $('#'+kk).append('<li>' + i.name  + '</li>')
        })
      })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="result"></div>

Answer 2

做这样的事情：

<script>

    const tabs = {
        "a": {
            "one": [
                {
                    "name": "xxx",
                    "age": "10"
                }
            ],
            "two": [
                {
                    "name": "yxss",
                    "age": "11"
                }
            ]
        },
        "b": {
            "one": [
                {
                    "name": "ctr",
                    "age": "11"
                },
                {
                    "name": "cft",
                    "age": "11"
                }
            ]
        },
        "c": {
            "two": [
                {
                    "name": "cccc",
                    "age": "11"
                }
            ]
        }
    };

    for (const tab in tabs) {
        document.write("<h2>" + tab + "</h2>");
        for (const subitem in tabs[tab]) {
            document.write(`${subitem}`)
            document.write('<ul>')
            for (value of tabs[tab][subitem]) {
                document.write(`<li>${value.name} - ${value.age}</li>`)
            }
            document.write('</ul>')
        }
    }

</script>

Answer 3

尝试一下：

var tab= {"a": {"one": [{"name": "xxx","age": "10"} ],"two": [{"name": "yxss","age": "11"}]},"b": {"one": [{"name": "ctr","age": "11"},{"name": "cft","age": "11"}]},"c": {"two": [{"name": "cccc","age": "11"}]}}

tab = Object.entries(tab).map(([key, value]) => `<ul><li>${key}
<ul>${Object.entries(value).map(([k, v]) => `<li>${k}
<ul>${v.map(obj => `<li>${obj.name}</li>`).join('')}</ul>
</li>`).join('')}</ul>
</li></ul>`).join('')
document.write(tab);