Norman Bird Norman Bird - 10 days ago 6
jQuery Question

API data not being listed. What am I doing wrong in this code?

So I have this simple html test page to test out some code that uses jquery to fetch API in json format and then the jquery lists the data by updating the html, but the data does not list. API link works fine. Data should list hundreds of returned data. What am I missing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link href="../css/highlight.css" rel="stylesheet" type="text/css" media="screen" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$.getJSON("https://coinmap.org/api/v1/venues/",function(data){
$.each(data.post, function(i,post){
content += '<p>' + post.id + '</p>';
content += '<p' + post.name+ '</p>';
content += '<br/>';
$(content).appendTo("#posts");
});
});
});
/* ]]> */
</script>
</head>
<body>
<div class="container">
<div class="span-24">
<h2>Check out the following posts:</h2>
<div id="posts"></div>
</div>
</div>
</body>
</html>

Answer

It looks like you're not accessing the data from the API correctly. Instead of data.post try data.venues.

$.each(data.venues, function(i,venue){
    content += '<p>' + venue.id + '</p>';
    content += '<p' + venue.name+ '</p>';
    content += '<br/>';
    $(content).appendTo("#posts");
});