Tiffany Tiffany - 15 days ago 5
Ajax Question

Why am I getting undefined appending to the page, but I can get data in the console?

So I am trying to append data from a .json file that was provided for me. However, instead of the information showing on the page. Well "undefined" is appending to page and console.

I am doing a lot of testing console logs and debuggers. So I have gotten the actually object or data in the console.

Also I would like to share the json file I was given, but it won't fit here. As it exceeds the character amount. So I have only shared a part of it.

This is JS file

$("button").click( function(){
$.getJSON("http://192.168.0.6:8080/posts.json", function(data) {
$.each(data, function(items, info) {
// console.log(info);
$("div").append("<p>" + info.item_data + "</p>");

}); //end loop
}); //end ajax
} //end button on click
);


Here is html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Like Pinterest</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="container"> <!-- hold it together with this main container -->
<div id="divsocial">
<p>

<!-- the json data -->
</p>
</div>
<button type="button" name="button" id="button">Oh Hai</button>
<!-- <button type="button" name="button" id="button">Load More</button> -->
</div>
</body>
<script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>


.JSON file:

{
"items": [{
"item_id": "497",
"item_data": {
"image_id": 226,
"text": "Seen on the catwalks at Chanel, Ralph Lauren, and Topshop Unique; think luscious icy bright pastels to add a soft pop of colour to the dull winter months. It works beautifully against grey tailoring and comes in a variety of textures from sugar plum boucle to cashmere soft duck egg blue\u2026",
"link": "http:\/\/www.bullring.co.uk\/news\/fashion\/aff-edit-new-pastels",
"link_text": "Click here to explore the trend.",
"image_url": "http://placehold.it/600x350"
},
"account_data": "",
"item_source_id": "e3d89e1f295f72b85737d5067ac52e6c",
"service_id": "5",
"account_id": "3",
"category_id": "1",
"item_name": "Manual: Seen on the catwalks at Chanel, Ralph Lauren",
"item_status": "published",
"item_created": "2014-08-29 11:50:14",
"item_imported": "2014-08-29 11:50:14",
"item_published": "2014-09-10 10:06:59",
"account_name": "AFF",
"account_slug": "manual",
"account_group": "",
"account_order": "0",
"account_status": "active",
"account_item_default_status": "published",
"account_import_interval": "2592000",
"account_last_imported": "2014-06-01 00:00:00",
"account_next_import": "2020-01-01 00:00:00",
"account_created": "2014-08-28 11:38:45",
"account_updated": "2014-08-29 09:09:18",
"service_name": "Manual",
"service_slug": "manual",
"service_class": "Manual",
"category_slug": "pinned",
"category_name": "Pinned"
}
}


So, what I want JS to execute would look something like this:

<div class="container"> <!-- hold it together with this main container -->
<div id="divsocial">
<p>
<img src="http://placehold.it/200x300" alt="" /><br />
<span>
Seen on the catwalks at Chanel, Ralph Lauren, and Topshop Unique; think luscious icy bright pastels to add a soft pop of colour to the dull winter months. It works beautifully against grey tailoring and comes in a variety of textures from sugar plum boucle to cashmere soft duck egg blue\u2026
</span> <br />
<a href="http:\/\/www.bullring.co.uk\/news\/fashion\/aff-edit-new-pastels">
Click here to explore the trend</a>
</p>
</div>

Answer

You can't append the entire object you'll have to append each of the key value pairs separately .

$("button").click( function(){
$.getJSON("http://192.168.0.6:8080/posts.json", function(data) {
  $.each(data.items, function(items, info) {
    // console.log(info);
    $("div").append("<p>" + info.item_data.text + "</p>" + "<a href=" + info.item_data.link + "> + info.item_data.link_text +</a>");

  }); //end loop
}); //end ajax

} //end button on click );