如何遍历嵌套的 JSON 对象并在 Javascript 中保存多个键值对答案

【问题标题】：How to loop through a nested JSON object and save the multiple key-value pairs in Javascript如何遍历嵌套的 JSON 对象并在 Javascript 中保存多个键值对
【发布时间】：2018-08-21 18:23:21
【问题描述】：

我有一个有趣的问题，并且我已经理解了问题的逻辑，但我没有找到解决方案的运气。

基本上，我有类似于下面列出的 JSON 对象（可以是任何形状或大小）：

    {
  "keyHigh": {
    "title": "Sign In Page",
    "key2": {
      "keyA": "Hey!",
      "keyB": "This!",
      "keyC": "Is!",
      "keyD": "All!",
      "keyE": "Example!",
      "keyF": "Content!",
      "keyG": "Hopefully!"
    },
    "key3": {
      "keyH": "This!",
      "keyI": "Illustrates!",
      "keyJ": "My Point!",
      "keyK": "Please!",
      "keyL": "Help!"
    },
    "key4": "/test.html#/"
  }
}

现在，我想要完成的是，我想遍历 JSON 对象（类似于上面的对象）并生成一个“键”值对。我希望能够生成如下表，使用 $ 分隔键：

<table>
  <tr>
    <th>Tag</th>
    <th>Content</th>
  </tr>
  <tr>
    <td>$keyHigh$title</td>
    <td>Sign In Page<br></td>
  </tr>
  <tr>
    <td>$keyHigh$key2$keyA</td>
    <td>Hey!</td>
  </tr>
  <tr>
    <td>$keyHigh$key2$keyB</td>
    <td>This!</td>
  </tr>
  <tr>
    <td>$keyHigh$key2$keyC</td>
    <td>Is!</td>
  </tr>
  <tr>
    <td>$keyHigh$key3$keyJ</td>
    <td>My Point!<br></td>
  </tr>
  <tr>
    <td>$keyHigh$key4</td>
    <td>/test.html#/</td>
  </tr>
</table>

注意****我想要所有的“标签”，而不仅仅是特定的“标签”

我应该如何以动态方式获取这些多键值对？

谢谢！

【问题讨论】：

欢迎来到 SO，请使用 tour 并通读 help center，特别是 How do I ask a good question? 做你的研究，search 以获取有关 SO 的相关主题，试一试。如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试Minimal, Complete, and Verifiable example，并具体说明您卡在哪里。人们会很乐意提供帮助。

标签： javascript json recursion stack iteration

【解决方案1】：

我在$.each循环和append函数中使用了jQuery，但这也可以用纯JS来实现。

function layOut(keyString, obj) {
  if (typeof obj == "object") {
    $.each(obj, function (key, val) {
      layOut(keyString + "$" + key, val);
    });
  } else {
    $("table.layout").append("<tr><td>" + keyString + "</td><td>" + obj +"</td></tr>");
  }
}

这个想法是检查是否达到了最深层次。这可以使用typeof 来完成。对于开始调用，您需要将空字符串作为keyString 传递。所以会是layOut("", obj);

【讨论】：