如何在div中显示json数据

Question

This is static html code

<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>

I am trying to change it as dynamic.Which means I need to show json data in this div.So I tried like this

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');

})

But am getting Uncaught SyntaxError: missing ) after argument list error.What I did wrong?

Answer 1

Maybe you can write it a bit cleaner and know that you are missing something.But i guess you are not. maybe you are missing some other bracket in the code above. I suggest you comment this part and see if the error still occurs.

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');

});

Answer 2

伙计们正在改变所有单个动态获取数据'到"和所有"到'和不使用.html()将追加仅当前value.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>');