Question

我想创建一个嵌套的“ ul li”列表，但将嵌套函数彼此限制。

这是我的对象：

        "data": [
         {
          "label": "dataName",
          "sections": [
            {
            "label": "label sections 1",
            "fields": [
              {
               "id": 1,
               "name": "field 1",
               "value": "value field 1"
              },
              {
              "id": 2,
              "name": "field 2",
              "value": "value field 2"
              }
             ]
            },
            {
            "label": "label sections 2",
            "fields": [
            {
             "id": 5,
             "name": "field 3",
             "value": "value field 3"
            }
           ]
          }, 
          {
          "label": "dataName2",
          "sections": [
            {
            "label": "label sections 3",
            "fields": [
              {
               "id": 6,
               "name": "field 6",
               "value": "value field 6"
              },
              {
              "id": 7,
              "name": "field 7",
              "value": "value field 7"
              }
             ]
            },
            {
            "label": "label sections 4",
            "fields": [
            {
             "id": 8,
             "name": "field 8",
             "value": "value field 8"
            }
           ]
          }

         ]

将其变成这样的列表：

      <ul>
          <li>dataName
            <ul>
              <li>label sections 1
                 <ul>
                    <li>field 1 : value field 1 </li>
                    <li>field 2 : value field 2 </li>
                 </ul>
              </li> 
               <li>label sections 2
                 <ul>
                    <li>field 3 : value field 3 </li>
                 </ul>
              </li> 
            </ul>
          </li>
          <li>dataName2
            <ul>
              <li>label sections 3
                 <ul>
                    <li>field 6 : value field 6 </li>
                    <li>field 7 : value field 7 </li>
                 </ul>
              </li> 
               <li>label sections 4
                 <ul>
                    <li>field 8 : value field 8 </li>
                 </ul>
              </li> 
            </ul>
          </li>
        </ul>

我试图执行一项功能，但没有成功！

了解如果“值字段”值为null，则不会显示该值

         var build = function(obj) {

    var list = '';
    _.each(obj, function (elt) {

        list+='<li><em>'+elt.label+'</em></li>';
        _.each(elt.sections, function (elt) {
            var list2 = '';
            list2+='<li><em>'+elt.label+'</em></li>';
            _.each(elt.fields, function (elt) {
                var list3 = '';
                if(!_.isNull(elt.value)) {
                    list3 += '<li><em>' + elt.name 
                    +' ' + elt.value + '</em></li>';
                }
                list2+='<ul>'+list3+'</ul>';
            });
            list+='<ul>'+list2+'</ul>';
        });
    });
    return '<ul style="text-align: left">'+list+'</ul>';
}

如果您知道更有效的解决方案，我很感兴趣

Answer 1

您可以在具有递归功能的纯Javascript中使用动态方法，该方法采用一系列列表元素和目标元素并创建新对象。

function createList(array, target) {
    var ul = document.createElement('ul');
    array.forEach(o => {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode('id' in o
            ? `${o.name} : ${o.value}`
            : o.label
        ));
        if (o.sections || o.fields) createList(o.sections || o.fields, li);
        ul.appendChild(li);
    });
    target.appendChild(ul);
}


var data = [{ label: "dataName", sections: [{ label: "label sections 1", fields: [{ id: 1, name: "field 1", value: "value field 1" }, { id: 2, name: "field 2", value: "value field 2" }] }, { label: "label sections 2", fields: [{ id: 5, name: "field 3", value: "value field 3" }] }, { label: "dataName2", sections: [{ label: "label sections 3", fields: [{ id: 6, name: "field 6", value: "value field 6" }, { id: 7, name: "field 7", value: "value field 7" }] }, { label: "label sections 4", fields: [{ id: 8, name: "field 8", value: "value field 8" }] }] }] }];

createList(data, document.body);

Answer 2

尝试这样。

var arr = [{ label: "dataName", sections: [{ label: "label sections 1", fields: [{ id: 1, name: "field 1", value: "value field 1" }, { id: 2, name: "field 2", value: "value field 2" }] }, { label: "label sections 2", fields: [{ id: 5, name: "field 3", value: "value field 3" }] }, { label: "dataName2", sections: [{ label: "label sections 3", fields: [{ id: 6, name: "field 6", value: "value field 6" }, { id: 7, name: "field 7", value: "value field 7" }] }, { label: "label sections 4", fields: [{ id: 8, name: "field 8", value: "value field 8" }] }] }] }];
    
var content = "";
function formatData(arr){
    arr.forEach(function(elem,i){
      if(elem.label){
        content += "<ul><li>"+elem.label;
        if(elem.sections){
          formatData(elem.sections);
        } else if(elem.fields){
          formatData(elem.fields);
        }
        content += "</li></ul>";
      } else {
        content += "<ul><li>" + elem.name + " : " + elem.value + "</li></ul>";
      }
    })
}

formatData(arr);
$('#datas').html(content)

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

如何通过限制每个函数来创建嵌套列表？

2 个答案: