Unable to build a list from JSON data with JQuery $.each() function

Question

Really just seems simple enough: been following the jquery docs; can't reason why this won't print a list to the specified div element.

$(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"
}
]

aredzko · Accepted Answer · 2015-08-08 01:04:27Z

2

In your $.each(), your key is actually the index. Instead you should be pulling name from your variable val.

answered Aug 8, 2015 at 1:04

aredzko

1,76015 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jorgesuarezch · Accepted Answer · 2015-08-08 01:06:42Z

2

There are two mistakes in your code.

key.name, key is the index of the array. Please try val.name
$("#triassic").html("<li class = " + key.name + ">" + key.name + "</li><br>"), in each iteration, the div's content will be replaced. Please try $("#triassic").append("<li class = " + val.name + ">" + val.name + "</li><br>") });

Instead use,

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

Regards.

answered Aug 8, 2015 at 1:06

jorgesuarezch

3062 silver badges5 bronze badges

Collectives™ on Stack Overflow

Unable to build a list from JSON data with JQuery $.each() function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related