Javascript 通过jquery用json数据填充html元素

我正在编写一段代码，其中通过jquery将json文档中的数据添加到html中。我是jquery的新手，被困在这里

这是html

 <ul id="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

这就是我尝试过的。

---

这个方法正确吗？或者有什么不同的方法可以轻松做到这一点。

也许你想要这样的东西 Html

Javascript

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]

$(function(){
   for(i=0;i<json.length;i++){
      $("ul").append("<li>"+json[i].index+"</li>")
    }
})

var json=[
{
“_id”：“5771ff92e0a1dea908b82d9a”，
“索引”：0
},
{
“_id”：“5771ff92d906e7541ed51198”，
“索引”：1
},
{
“_id”：“5771ff925a7ed5d7558e3fbc”，
“索引”：2
},
{
“_id”：“5771ff9201669663584e0f25”，
“索引”：3
}
]
$（函数（）{
对于（i=0；i

HTML




javascript

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]



$(function(){
var data = [];

$.each(json, function(i, item) {
  alert(i);
   data.push('<li>'+item.index+'</li>');

   });
   $('#list').append(data.join(''));
})

var json=[
{
“_id”：“5771ff92e0a1dea908b82d9a”，
“索引”：0
},
{
“_id”：“5771ff92d906e7541ed51198”，
“索引”：1
},
{
“_id”：“5771ff925a7ed5d7558e3fbc”，
“索引”：2
},
{
“_id”：“5771ff9201669663584e0f25”，
“索引”：3
}
]
$（函数（）{
var数据=[]；
$.each（json，函数（i，项）{
警报（一）；
data.push（“
”+item.index+“
”）；
});
$（'#list'）.append（data.join（''）；
})
下面是一个使用jQuery.map（）的解决方案

HTML代码

<ul id="list"></ul>



然后是您的Javascript文件：

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 4
  }
]

$(function(){
var data = [];

$(json).map(function(i, item) {
   data.push('<li>'+item.index+'</li>');
   });
   $('#list').append(data);
})

var json=[
{
“_id”：“5771ff92e0a1dea908b82d9a”，
“索引”：0
},
{
“_id”：“5771ff92d906e7541ed51198”，
“索引”：1
},
{
“_id”：“5771ff925a7ed5d7558e3fbc”，
“索引”：2
},
{
“_id”：“5771ff9201669663584e0f25”，
“索引”：4
}
]
$（函数（）{
var数据=[]；
$（json）.map（函数（i，项）{
data.push（“
”+item.index+“
”）；
});
$（“#列表”）。追加（数据）；
})

和一个JSIDLE链接

这样，您只需将完整数组附加到DOM中一次即可操作DOM

致以最良好的祝愿

Bruno
检查控制台是否有语法错误。另外，您混合了jQuery和Javascript属性。您有
$（）.myfunction
但是
myfunction
并不是定义为jQuery插件你需要先学习jQuery或javascript是的，这可以做到，但是我们不能通过innerhtml方法将html插入到li标记中，这样我就不必添加新元素，而只需更改现有元素的值Shey bro想象一个场景你的
标记的长度是否比你所谓的json列表的长度还要长？希望你明白了。
var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 3
  }
]



$(function(){
var data = [];

$.each(json, function(i, item) {
  alert(i);
   data.push('<li>'+item.index+'</li>');

   });
   $('#list').append(data.join(''));
})

<ul id="list"></ul>

var json = [
  {
    "_id": "5771ff92e0a1dea908b82d9a",
    "index": 0
  },
  {
    "_id": "5771ff92d906e7541ed51198",
    "index": 1
  },
  {
    "_id": "5771ff925a7ed5d7558e3fbc",
    "index": 2
  },
  {
    "_id": "5771ff9201669663584e0f25",
    "index": 4
  }
]

$(function(){
var data = [];

$(json).map(function(i, item) {
   data.push('<li>'+item.index+'</li>');
   });
   $('#list').append(data);
})