Load JSON Data Using jQuery AJAX
Solution 1
the jason is missing some commas, every line inside the json should end with a comma unless it is the last child in the scope, which makes it:
[
{
"users": [
{
"name": "user1",
"Endorsement": "some comment",
"date": "8/11/2012"
},
{
"name": "user2",
"Endorsement": "some comment2",
"date": "9/27/11"
},
{
"name": "user3",
"Endorsement": "some comment3"
},
{
"name": "user4",
"Endorsement": "some comment4",
"date": "4/2/13"
},
{
"name": "user5",
"Endorsement": "some comment5"
},
{
"name": "user6",
"Endorsement": "some comment6",
"date": "3/17/13"
},
{
"name": "user7",
"Endorsement": "some comment7",
"date": "5/22/13"
},
{
"name": "user8",
"Endorsement": "some comment8",
"date": "9/27/3"
}
]
}
]
Solution 2
try !
$("button").click(function () {
$.getJSON("users.json", function (obj) {
$.each(obj.users, function (key, value) {
$("ul").append("<li>" + value.name + "</li>");
});
});
});
and if there is error then use debug console in browser. and either make a fiddle or write what is error. and there seems no ul element in your html.
Albert Viglieri
Updated on June 23, 2022Comments
-
Albert Viglieri almost 2 years
I need to print this information when clicking a button and sorting if by date, so far i have this: I have json file that looks like this, but I haven't been able to print it on the page and still haven't got to the sorting by date part. I am not sure if the problem is the link to the ajax version i am using or what is the problem, because i saw an example that looks just like this on youtube and it works just fine.
JSON:
[ { "users": [ { "name": "user1", "Endorsement": "some comment", "date": "8/11/2012" }, { "name": "user2", "Endorsement": "some comment2", "date": "9/27/11" }, { "name": "user3", "Endorsement": "some comment3" }, { "name": "user4", "Endorsement": "some comment4", "date": "4/2/13" }, { "name": "user5", "Endorsement": "some comment5" }, { "name": "user6", "Endorsement": "some comment6", "date": "3/17/13" }, { "name": "user7", "Endorsement": "some comment7", "date": "5/22/13" }, { "name": "user8", "Endorsement": "some comment8", "date": "9/27/13" } ] }
]
HTML updated:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact</title> <link rel="shortcut icon" href="stridesFavicon.ico"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="shortcut icon" href='http://sites.google.com/site/lowcoupling/favicon_16x16.ico' /> </head> <body> <!--Body content--> <div id='Div1'> <a href="#" id="clickme">Get JSON Data</a> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script src="myscript.js" type="text/javascript" /></script> <script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script> </body> </html>
JS updated:
$("#clickme").click(function () {
$.getJSON("users.json", function (data) { var items = []; $.each(data, function (key, dvalue) { $.each(dvalue, function (key, value) { items.push('<li id="' + key + '">' + value + '</li>'); }); }); $('<ul/>', { 'class': 'interest-list', html: items.join('') }).appendTo('body'); }); });
But is not working. meaning is not loading user names; instead it is printing something like this every time i click the link:
•[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]