如何在 jquery 中动态获取 UL 和 LI 值

Question

我有一个简单的 ul 和 li 标签，其中包含状态和大写字母，这里我需要动态地从 json 获取所有数据并附加到类“详细信息”的主 div 中，这里我只是硬编码但实际上它应该来自下面以同样的方式给出的json。这是下面的代码

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details">
<ul>
<li>state</li>
<li>
<ul>state1</ul>
<ul>state2</ul>
</li>
<li>capital</li>
<li>
<ul>capital1</ul>
<ul>capital2</ul>
</li>
</ul>
</div>

jquery

​​>

$(document).ready(function () {
     $.ajax({
     type: "GET",
     url: "sample.json",
     success: function(result)
     {
     console.log(result);

     }
     });

    });

json

{
    "state": [{
            "name": "state1"
        },
        {
            "name": "state2"
        }
    ],
    "capital": [{
            "name": "capital1"
        },
        {
            "name": "capital2"
        }
    ]
}

Answer 1

警告：您建议的标记不是valid (Error: Text not allowed in element ul in this context.)。即便如此，听起来它是这个任务的合适输出。

我假设您的 Ajax 请求正在运行，并返回一个有效的 JSON 结构作为 result 变量。

设置完毕，下面是生成结构的代码：

const result = {
  "state": [
    {"name": "state1"},
    {"name": "state2"}
  ],
  "capital": [
    {"name": "capital1"},
    {"name": "capital2"}
  ]
};

const root = document.createElement("ul");
document.querySelector(".details").appendChild(root);

for (const key in result) {
  const title = document.createElement("li");
  title.innerText = key;
  root.appendChild(title);

  const list = document.createElement("li");
  root.appendChild(list);
  
  for (const o of result[key]) {
    const ul = document.createElement("ul");
    ul.innerText = o.name;
    list.appendChild(ul);
  }
}

<div class="details"></div>