Javascript 使用json数据构建div

我将数据从数据库拉入json数组

我有这些数据

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

div的结构如下（此处简化），我希望使用json数组（javascript或jquery解决方案）中的数据构建行

使用
append（）
和
each（）

var data=[{“id”：“0”，“name”：“red”，“percentage”：“60”}，{“id”：“1”，“name”：“blue”，“percentage”：“58”}，{“id”：“4”，“name”：“green”，“percentage”：“12”}]
$。每个（数据、功能（i、v）{
$（'#json'）。追加（''+v.name+''+v.percentage+''）
});


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

var data=[{“id”：“0”，“name”：“red”，“percentage”：“60”}，{“id”：“1”，“name”：“blue”，“percentage”：“58”}，{“id”：“4”，“name”：“green”，“percentage”：“12”}）；
var字符串=”；
对于（数据中的i）{
字符串+=''+数据[i]。名称+''+数据[i]。百分比+''；
};
document.getElementById（'json'）。innerHTML=string

尝试如下所示的每个循环：

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

var data=[{“id”：“0”，“name”：“red”，“percentage”：“60”}，{“id”：“1”，“name”：“blue”，“percentage”：“58”}，{“id”：“4”，“name”：“green”，“percentage”：“12”}）；
$。每个（数据、函数（i、o）{
$（'#json'）.append（$（''）.addClass（'row'））
.附加(
$（''）.addClass（'col-xs-5'）
.append（$（''）.attr（'id'，'name'）。text（o.name）））
.附加(
$（''）.addClass（'col-xs-2'））
.附加(
$（''）.addClass（'col-xs-5'）
.append（$（''）
.attr（'type'，'number'）
.attr（'id'，'percentage'）.val（o.percentage））
));
});

但是要注意：id属性必须是唯一的（我认为您必须在输入元素中使用“name”属性）
您可以使用JQuery的
.hmtl（）
函数

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

例如：

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

${“#json”}.html（“
");
var data=[{“id”：“0”，“name”：“red”，“percentage”：“60”}，{“id”：“1”，“name”：“blue”，“percentage”：“58”}，{“id”：“4”，“name”：“green”，“percentage”：“12”}]
data=$.parseJSON（数据）；
$。每个（数据、功能（i、项）{
$（“正文”）.append（'
“+项目名称+”
')
})

试试这个
参考演示

请查找以下代码：

HTML:

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

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

.input {
   width: inherit;
}

您从ajax调用中得到的响应数据，对吗？或者您存储在JavaScript变量中？您的问题在哪里？您需要显示ajax请求并告诉如何显示数据？（使用PHP？）如果我不清楚，我很抱歉，但是回答我问题的每个人都理解我的意思。我省略了php和ajax部分，因为我想保持它的简单性，并且我没有/没有看到在这种情况下如何将数据放入json数组是相关的。我的问题是关于使用我发布的json数组构建一个div。感谢所有发布答案的人。它们是相似的，并且工作正常，如果我可以的话，我会把它们都选出来，但显然我必须选一个：）这个答案和我的答案有什么不同，你把v改成了item？javascript或jquery中没有.hmtl（）函数，
${“#json”}
就是你想要的。
<div id="json"></div>

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

.input {
   width: inherit;
}