javascript - JSON 显示头和子列表作为输出

Question

构建了将 JSON 格式的值显示为 HTML 输出的代码。当它没有子级别时，它工作得很好。根据新要求，需要显示“TestEle1，TestEle2”作为标题。子级别元素作为带有标签的复选框。

这是当前用于将单级 JSON 格式显示为 HTML 输出的代码。

HTML:

<div class="container">
 <@
 _.each(data,function(value, key, list){
 @>
 <input id="<@= value.filtername @>" class="" type="checkbox" name="<@= value.filtername @>" value="<@= value.filtervalue @>"><label id="label-<@= value.filtername @>" for="<@= value.filtername @>"> <span class="filterlabel"><@= value.filterlabel @></span></label>
 <@
 });
 @>
</div>

JSON:

[   
"TestEle1":[  
  {  
     filtername:'test1',
     filterlabel:'Test1',
     filtervalue:'test1'
  },
  {  
     filtername:'test2',
     filterlabel:'Test2',
     filtervalue:'test2'
  }
  ],
  "TestEle2":[  
  {  
     filtername:'test3',
     filterlabel:'Test3',
     filtervalue:'test3'
  },
  {  
     filtername:'test4',
     filterlabel:'Test4',
     filtervalue:'test4'
  }
 ]
]

输出(Test1、Test2、Test3、Test4 前面有复选框):

TestEle1
  Test1
  Test2

TestEle2
  Test3
  Test4 

Answer 1

您的 JSON 无效。格式正确

[ 
        {
                    "TestEle1":[
                        {
                            "filtername":"test1",
                            "filterlabel":"Test1",
                            "filtervalue":"test1"
                        },
                        {
                            "filtername":"test2",
                            "filterlabel":"Test2",
                            "filtervalue":"test2"
                        }
                    ]
        },
        {
                    "TestEle2":[
                        {
                            "filtername":"test3",
                            "filterlabel":"Test3",
                            "filtervalue":"test3"
                        },
                        {
                            "filtername":"test4",
                            "filterlabel":"Test4",
                            "filtervalue":"test4"
                        }
                    ]
       }
]

尝试使用此代码。虽然我不确定您为此使用的模板语法。

<div class="container">
     <@
     _.each(data,function(val1, key1){
     @>
       <@  _.each(val1,function(val,key){ 
        @>
           <h3><@= key @></h3>    // title value 
            <@  _.each(val,function(value,index){ 
              @>
          <input id="<@= value.filtername @>" class="" type="checkbox" name="<@= value.filtername @>" value="<@= value.filtervalue @>"><label id="label-<@= value.filtername @>" for="<@= value.filtername @>"> <span class="filterlabel"><@= value.filterlabel @></span></label>
    <@  }); 
    @>
     <hr>   
      });
     });
     @>
    </div>