如何在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>