Question

真的看起来很简单：一直关注jquery文档;无法解释为什么这不会将列表打印到指定的div元素。

$(document).ready( function() {
	$.getJSON("dino.json", function(data) {
		 $.each(data, function(key, val) {
			$("#triassic").html("<li class = " + key.name + ">" + key.name + "</li><br>") 
                 });
         });
});

<!DOCTYPE html>
<html lang = "en">
<head>
<title>TEST</title>
<!-- my Script -->
<script src="dinoscriptTest.js"></script>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id = "triassic"></div>
</body>
</html>

JSON：

[
{
"name":"T REX"
},
{
"name": "Triceratops"
},
{
"name": "Diplodocus"
}
]

Answer 1

在$.each()中，您的key实际上就是索引。相反，您应该从变量val中提取名称。

Answer 2

您的代码中存在两个错误。

key.name，key是数组的索引。请尝试val.name
$("#triassic").html("<li class = " + key.name + ">" + key.name + "</li><br>")，在每次迭代中，div的内容将被替换。请尝试$("#triassic").append("<li class = " + val.name + ">" + val.name + "</li><br>") });

改为使用，

$(document).ready( function() {
    $.getJSON("dino.json", function(data) {
         $.each(data, function(key, val) {
            $("#triassic").append("<li class = '" + val.name + "'>" + val.name + "</li><br>") 
                 });
         });
});

问候。

无法使用JQuery $ .each（）函数从JSON数据构建列表

2 个答案: