为json数组中的每个对象创建一个列表

Question

我有一个json数组：

[
  {
    "id":"1",
    "0":"1",
    "name":"Quique",
    "1":"Quique"
  },
  {
    "id":"2",
    "0":"2",
    "name":"Kety",
    "1":"Kety"
  }
]

所以，我想从json获取值id和name，并使用它们用HTML表示json文件。对我来说一个完美的结果将是：

<div id="container">
  <div>Quique, id 1</div>
  <div>Kety, id 2</div>
</div>

Answer 1

使用Array.prototype.forEach()函数

纯 Javascript解决方案：

＆＃13;

＆＃13;

var data = [
  {
    "id":"1",
    "0":"1",
    "name":"Quique",
    "1":"Quique"
  },
  {
    "id":"2",
    "0":"2",
    "name":"Kety",
    "1":"Kety"
  }
],
contentStr = "";

data.forEach(function(o){
    contentStr += "<div>"+ o.name +", id "+ o.id +"</div>";
});
document.getElementById('container').innerHTML = contentStr;

＆＃13;

<div id="container"> 
</div>

＆＃13;

＆＃13;

＆＃13;

另一种选择是使用Array.prototype.reduce()函数：

document.getElementById('container').innerHTML = data.reduce(function(h, o){
  return h + "<div>"+ o.name +", id "+ o.id +"</div>";
}, '');

Answer 2

jQuery解决方案。

var arr = [{
  "id": "1",
  "0": "1",
  "name": "Quique",
  "1": "Quique"
}, {
  "id": "2",
  "0": "2",
  "name": "Kety",
  "1": "Kety"
}];

(function(arr) {
  return arr.forEach(v => $('#container').append('<div>' + v.name + ', ' + 'id: ' + v.id + '</div>'));
})(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

纯 JS。

var arr = [{
  "id": "1",
  "0": "1",
  "name": "Quique",
  "1": "Quique"
}, {
  "id": "2",
  "0": "2",
  "name": "Kety",
  "1": "Kety"
}];

(function(arr) {
  for(var i = 0; i < arr.length; i++) {
  var node = document.createElement("div");  
  var textnode = document.createTextNode(arr[i].name + ', id: ' + arr[i].id); 
  node.appendChild(textnode);    
  document.getElementById("container").appendChild(node); 
}
})(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

Answer 3

＆＃13;

＆＃13;

var arr = [
  {
    "id":"1",
    "0":"1",
    "name":"Quique",
    "1":"Quique"
  },
  {
    "id":"2",
    "0":"2",
    "name":"Kety",
    "1":"Kety"
  }
];

function div(o) {
  var d = document.createElement('div');
  d.textContent = o.name + " id " + o.id;
  return d;
}

function generate(arr) {
  var wrapper = document.getElementById("container");
  arr.forEach(function(o) {
    wrapper.appendChild(div(o));
  });
}

generate(arr);

＆＃13;

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是一个简单的例子。

＆＃13;

＆＃13;

var data = [
  {
    "id":"1",
    "0":"1",
    "name":"Quique",
    "1":"Quique"
  },
  {
    "id":"2",
    "0":"2",
    "name":"Kety",
    "1":"Kety"
  }
]

var root = document.getElementById('container');

for( var key in data ){
  element = '<div>' + data[key].name + ', id: ' + data[key].id + '</div>';
  root.innerHTML += element;
}

＆＃13;

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;