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>

JSON将头部和子列表显示为输出

1 个答案: