Question

我将数据从数据库中提取到json数组中。

我有这个数据

[{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}]

div的结构如下（这里简化），我想用json数组（javascript或jquery解决方案）构建行

<div id="json"
  <div class="row">
    <div class="col-xs-5"><span id="name"></span></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-5"><input type="number" id="percentage"></div>
  </div>
</div>

Answer 1

您可以使用JQuery的.hmtl()功能。

只需要将html代码传递给dom元素。

例如：

${"#json"}.html("   <div class="row">
<div class="col-xs-5"><span id="name"></span></div>   </div>");

Answer 2

使用append()和each()

   var data =[{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}]
$.each(data,function(i,v) {
$('#json').append('<div class="row"> <div class="col-xs-5"><span class="name">'+v.name+'</span></div><div class="col-xs-2"></div><div class="col-xs-5"><input type="number" class="percentage">'+v.percentage+'</div></div>')
});

see demo

或纯javascript：

var data =[{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}];
var string ="";
for (i in data) {
string +='<div class="row"> <div class="col-xs-5"><span class="name">'+data[i].name+'</span></div><div class="col-xs-2"></div><div class="col-xs-5"><input type="number" class="percentage">'+data[i].percentage+'</div></div>';
};
document.getElementById('json').innerHTML =string

see demo

Answer 3

尝试每个循环：

var data = [{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}];

$.each(data, function(i, o){
  $('#json').append($('<div/>').addClass('row')
    .append(
      $('<div/>').addClass('col-xs-5')
        .append($('<span/>').attr('id', 'name').text(o.name)))
    .append(
      $('<div/>').addClass('col-xs-2'))
    .append(
      $('<div/>').addClass('col-xs-5')
        .append($('<input/>')
                 .attr('type', 'number')
                .attr('id', 'percentage').val(o.percentage))
    ));
});

但要注意：id属性必须是唯一的（我认为你必须在输入元素中使用“name”属性）

Answer 4

var data=  [{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}]


data = $.parseJSON(data);
$.each(data, function(i, item) {
    $("body").append('<div class="row">
    <div class="col-xs-5"><span id="name">'+item.name+'</span></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-5"><input type="number" id="percentage" value='+item.percentage+'></div>
  </div>')
})

试试这个

Answer 5

参考演示here。

请在下面找到代码：

<强> HTML：

<div id="json"></div>

<强> JS：

var data = [{
  "id": "0",
  "name": "red",
  "percentage": "60"
}, {
  "id": "1",
  "name": "blue",
  "percentage": "58"
}, {
  "id": "4",
  "name": "green",
  "percentage": "12"
}];

$(function() {
  $.each(data, function(key, value) {
    $('#json').append('<div class="row"><div class="col-xs-5"><span id="name">' + value.name + '</span></div><div class="col-xs-2"></div><div class="col-xs-5"><input type="number" class="input form-control" id="percentage" value="' + value.percentage + '" /></div></div>')
  });
});

<强> CSS：

.input {
   width: inherit;
}

用json数据构建div

5 个答案: