如何在div中显示json数据

时间:2018-02-19 08:19:45

标签: javascript jquery

这是静态HTML代码

<div class="EquipmentContent row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 subSection" style="float:right;background:#dff0ff;">  
        <section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
          <label class="equipmentHeaderlable">Name</label>
          <label class="equipmentHeaderValues">SSS</label>
        </section>
        <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
          <button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
        </section>
      </div>
    </div>

我正在尝试将其更改为动态。这意味着我需要在此div中显示json数据。所以我尝试了这样的

var content= response.data.filters;
$.each(content,function(i,value){                       
    $('.subSection').html("<section class='col-xs-12 col-sm-2 cl-md-2 col-lg-2'><label class='equipmentHeaderlable'>Name</label><label class='equipmentHeaderValues'>"+value.name+"</label></section>").appendTo('.EquipmentContent');

})

但是我得到了Uncaught SyntaxError: missing ) after argument list错误。我做错了什么?

2 个答案:

答案 0 :(得分:-1)

也许你可以写得更清洁,并且知道你错过了什么。但我想你不是。也许你错过了上面代码中的其他一些括号。我建议您对此部分进行评论,看看是否仍然出现错误。

var content= response.data.filters;
$.each(content,function(i,value){   
      var data = "<section class='col-xs-12 col-sm-2 cl-md-2 col-lg-2'>";
      data += "<label class='equipmentHeaderlable'>Name</label>";
      data += "<label class='equipmentHeaderValues'>"+value.name+"</label></section>";    
      $('.subSection').html(data).appendTo('.EquipmentContent');

});

答案 1 :(得分:-1)

通过将所有单'更改为",将所有"更改为',我们会动态获取数据,并且不要使用.html()它只会附加当前值.so尝试使用.append()

$('.subSection').append('<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2"><label class="equipmentHeaderlable">Name</label><label class="equipmentHeaderValues">'+value.name+'</label></section>');