Question

我需要将JSON响应转换为嵌套的div元素，并使用jquery附加它们。例如，我的JSON响应是这样的。

[
    {
        name: "List one",
        arr: [
            {key: "A1"},
            {key: "B1"},
            {key: "C1"},
            {key: "D1"}
        ]
    },
    {
        name: "List two",
        arr: [
            {key: "A2"},
            {key: "B2"},
            {key: "C2"},
            {key: "D2"}
        ]
    },
    {...},
    {...}
]

我需要像这样构建一个div结构

<ul>
    <li>List one</li>
    <ul>
        <li>A1</li>
        <li>B1</li>
        <li>C1</li>
        <li>D1</li>
    </ul>
    <li>List two</li>
    <ul>
        <li>A2</li>
        <li>B2</li>
        <li>C2</li>
        <li>D2</li>
    </ul>
    .......
</ul>

目前这就是我尝试的方式，

jsonObject.forEach((item)=>{
    var subCategories = item.arr.forEach((subCat)=>{
                            return `<li class="list-group-item">${subCat.key}</li>`
                        })

    $('#nested').append(
        `<li class="list-group-item">
            ${item.name}
            <ul>
                ${subCategories}
            </ul>


        </li>`
    );
});

这与React方法有些类似。但我对subCategories的定义不明确。如何使用jquery实现这样的功能？

Answer 1

我理解了我的错误，因为forEach方法没有返回任何内容，map是正确的用来返回数组。然后加入数组，否则HTML中会有逗号。

jsonObject.forEach((item)=>{
    var subCategories = item.arr.map((subCat)=>{
                            return `<li class="list-group-item">${subCat.key}</li>`
                        }).join('')

    $('#nested').append(
        `<li class="list-group-item">
            ${item.name}
            <ul>
                ${subCategories}
            </ul>
        </li>`
    );
});

Answer 2

实现此目的的一种方法是将html构建为字符串，并使用html更新div

$(function() {
   var jsonObject = [{name: "List one",arr: [{key: "A1"},{key: "B1"},{key: "C1"},{key: "D1"}]},{name: "List two",arr: [{key: "A2"},{key: "B2"},{key: "C2"},{key: "D2"}]}];
    

  var html = "<ul>";
  jsonObject.forEach((i) => {
    html += "<li>" + i.name + "</li>";
    html += "<li>";
    html += "<ul>";
    i.arr.forEach((s) => {
      html += "<li>" + s.key + "</li>";
    });
    html += "</ul>";
    html += "</li>";
  });
  html += "</ul>";


  $("#nested").html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nested"></div>

如何使用jquery从嵌套的对象数组创建嵌套HTML

2 个答案: