Develop Reference

Why always getting last row from json array result when iterate through with Jquery

I have json data in this structure
here is my json code
https://jsonblob.com/309e8861-7f26-11e7-9e0d-cf3972f3635e
and here is my jquery code example
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
$.each(data, function(index, val) {
$("#result").html("<p>" + val.name + "</p>");
});
});
});
HTML file
<button id="getJsonData">Load role list</button>
<div id="result"></div>
I don't get this, I get every value from json in console when do console.log, but when use html method to display result as html in screen it just showing last value from ending last json array. What is wrong here?

jquery .html always overrite previous html so we cant use html in loop section instead of that we can use append it simply append your p tag in result div
Instead of using this:-
$("#result").html("<p>" + val.name + "</p>");
use like this:-
$("#result").append("<p>" + val.name + "</p>");

You are overwriting the html with the code
$("#result").html("<p>" + val.name + "</p>");
Instead you can store the result in variable and then you write it to the element.Like this
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var html = '';
$.each(data, function(index, val) {
html +="<p>" + val.name + "</p>";
});
$("#result").html(html);
});
});

Your code should be :
$("#getJsonData").click(function(){
$.get(base_url + 'roles/index', function(data) {
var data = $.parseJSON(data);
var listHtml="";
$.each(data, function(index, val) {
listHtml=listHtml+ "<p>" + val.name + "</p>";
});
$("#result").html(listHtml);
});
});
And Html should be same as your
<button id="getJsonData">Load role list</button>
<div id="result"></div>
Working example is here

JSON to HTML not rendering into HTML via ID

I am using PHPstorm IDE and i'm trying to render the following JSON and it gets stuck showing only the <ul></ul> without spitting the <li>'s into HTML the each function. Any idea what could be the issue?
thanks.
Script.js:
$(function(){
$('#clickme').click(function (){
//fetch json file
$.ajax({
url:'data.json',
dataType: 'json',
success: function(data){
var items = [];
$.each(data, function (key, val) {
items.push('<li id=" ' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'tasks',
html: items.join('')
}).appendTo('body');
},
statusCode: {
404: function(){
alert('there was a problem with the server. try again in a few secs');
}
}
});
});
});
And the JSON:
{"id":"1","mesi":"mesima 0","done_bool":"1"},{"id":"2","mesi":"mesima 1","done_bool":"0"},{"id":"3","mesi":"mesima 2 ","done_bool":"1"},{"id":"4","mesi":"mesima 3","done_bool":"1"}
My HTML is just an a href that spits out the click ID:
Get JSON

<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
<button>Get JSON data</button>
By Using this Method You can Easily get Your JSON value In HTML

Try this one :)
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data){
var html = "<ul>";
items = data.map(function(obj){
html += "<li id='" + obj.id + "'>" + obj.mesi + "</li";
});
html += "</ul>";
$('body').append(html);

I would try with some like this
$(function(){
$('#clickme').click(function (){
//fetch json file
$.ajax({
url:'data.json',
dataType: 'json',
success: function(data){
// uncomment line below if data is a single JSON
// data = [data]
var items = [];
// we create a list where we will append the items
var list = document.createElement("ul");
data.forEach(function(item){
// we create a list item
var listItem = document.createElement("li");
// we set the attributes
listItem.setAttribute("id", item.id ); // item.id or the property that you need
// we add text to the item
listItem.textContent = item.mesi;
// We append the list item to the list
list.appendChild(listItem);
});
// we append the list to the body
$("body").html(list);
},
statusCode: {
404: function(){
alert('there was a problem with the server. try again in a few secs');
}
}
});
});
});

Try like this:
success: function(data){
var items = '';
$.each(data, function (key, val) {
items += '<li id=" ' + key + '">' + val + '</li>';
});
ul = $('<ul/>').html(items);
$('body').append(ul);
}
for multiple objects
success: function(datas){
var items = '';
$.each(datas, function (i,data) {
$.each(data, function (key, val) {
items += '<li id=" ' + key + '">' + val + '</li>';
});
});
ul = $('<ul/>').html(items);
$('body').append(ul);
}
output
<ul>
<li id=" id">1</li>
<li id=" mesi">mesima 0</li>
<li id=" done_bool">1</li>
<li id=" id">2</li>
<li id=" mesi">mesima 1</li>
.
.
</ul>

Try like this:
$(function() {
$('#clickme').click(function() {
// fetch json file
$.ajax({
url : 'data.json',
dataType : 'json',
// please confirm request type is GET/POST
type : 'GET',
success : function(data) {
// please check logs in browser console
console.log(data);
var ulHtml = "<ul>";
$.each(data, function(key, obj) {
ulHtml += '<li id="' + obj.id + '">' + obj.mesi + '</li>';
});
ulHtml += "</ul>";
// please check logs in browser console
console.log(ulHtml);
$('body').append(ulHtml);
},
error : function(jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
alert(textStatus);
}
});
});
});
<button id="clickme">Get JSON data</button>
I log json data and created ul html, Please check logs in browser console

I'm not sure how you want to output each item, so I made a simple suggestion, you can easily change the HTML to what you need. Here is working code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
Get JSON
<script>
$(function() {
$('#clickme').click(function() {
//fetch json file
$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
var items = [];
$.each(data, function(key, val) {
// the HTML output for each item
var done = (val.done_bool === '1') ? 'true' : 'false';
items.push('<li id=" ' + val.id + '">' + val.mesi + ': ' + done + '</li>');
});
$('<ul/>', {
'class': 'tasks',
html: items.join('')
}).appendTo('body');
},
statusCode: {
404: function() {
alert('there was a problem with the server. try again in a few secs');
}
}
});
});
});
</script>
</body>
</html>
data.json
[{"id":"1","mesi":"mesima 0","done_bool":"1"},{"id":"2","mesi":"mesima 1","done_bool":"0"},{"id":"3","mesi":"mesima 2 ","done_bool":"1"},{"id":"4","mesi":"mesima 3","done_bool":"1"}]
I also created a __jsfiddle__ so you can test it directly. (The AJAX call is simulated with the Mockjax library): https://jsfiddle.net/dh60nn5g/
Good to know:
If you are trying to load the JSON from another domain, you may need to configure CORS (Cross-origin resource sharing):
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Isn't this supposed to be a GET request? i think you are missing the method on your Ajax request. You should add
method: 'GET'
to your ajax request. I think this is a big deal in making ajax request.

$.each in $.getJSON race condition?

I have a problem when using the jquery.each() function within a jquery.getJSON.
There's 2 types of element's I'm dealing with in my code in this case. "Sources" and "Streams"
I want to use getJSON to first get the sources, iterate over them and generate an accordion header out of those. Then, for each of those "sources" I again use getJSON with that source's id to get it's corresponding "streams". Then I append those streams to it's sources accordion body, to get a list of all the streams, sorted by their sources.
But it seems while I'm getting the JSON, the next statements in my procedure are already executed. As I'm basically dynamically building a large HTML String and adding it to an element using jQuery, the String doesn't get all the data it needs.
The code looks as follows:
var html1 = "<div class='panel-group' id='manageAccordion'>";
$.getJSON(url, function(data){
$.each(data, function(i, json){
html1 += getAccordionPart(...); //creates the accordion for the given source
});
}).done(function(){
html1 += "</div>";
$('#elementList').html(html);
});
function getAccordionPart(id, parent, count, json){
//new string html2 is created and a bunch of stuff added
//...
html2 += "....";
html2 += getAccordionBody(json);
html2 += "</div></div></div></div>";
return html2
}
function getAccordionBody(json){
//new string "html3" gets created
//...
var url = standardUrl + "sources/" + encodeURIComponent(json.elementId) + "/streams";
$.getJSON(url, function(data) {
$.each(data, function(i, json) {
html3 += "<li class='list-group-item'>";
html3 += json.name;
html3 += "</li>";
});
}).done(function(){
html3 += "</ul>";
return html3;
});
}
What I specifically end up with is an accordion header that has "undefined" in it's body,
because it seems the getAccordionBody() function doesn't return before the html string gets added to the DOM.
I already tried changing the $.getJSON to $.ajax with async = false, on both of my $.getJSON calls, this seems to fix the problem that the statements don't execute in the order I want them to, but it's horribly slow and returns undefined anyway for some reason..
Any suggestions?
Am I missing something really stupid?

it seems the getAccordionBody() function doesn't return before the html string gets added to the DOM
That's correct. Your way of returning the response (html3) from ajax is flawed - you cannot return from a done handler.
You can however fix this by using promises. Every function returns a promise so that they are easily chained, and then is used to transform the data and get a new promise for it:
$.getJSON(url).then(function(data){
return $.when.apply($, $.map(data, function(i, json){
return getAccordionPart(…); //creates the accordion for the given source
}).then(function() {
var html1 = "<div class='panel-group' id='manageAccordion'>";
html1 += Array.prototype.join.call(arguments, "\n");
html1 += "</div>";
return html1;
});
}).done(function(html){
$('#elementList').html(html);
});
function getAccordionPart(id, parent, count, json){
return getAccordionBody(json).then(function(result) {
var html2 = "…"; //new string html2 is created and a bunch of stuff added
html2 += result;
html2 += "</div></div></div></div>";
return html2;
});
}
function getAccordionBody(json) {
var url = standardUrl + "sources/" + encodeURIComponent(json.elementId) + "/streams";
return $.getJSON(url).then(function(data) {
var html3 = "…"; //new string "html3" gets created
$.each(data, function(i, json) {
html3 += "<li class='list-group-item'>";
html3 += json.name;
html3 += "</li>";
});
html3 += "</ul>";
return html3;
});
}

Rather than using sync calls you can use the Deferred / promise pattern - http://api.jquery.com/deferred.promise/.
You will need to return promise from generate accordion function.
You will need to queue up your generate accordion function calls.
And then do the appending business sequentially as and when promises are resolved.

You have to first collect everything which is required for "getAccordionPart" and "getAccordionBody" (eg: encodeURIComponent(json.elementId)) in a global array. like:
var arrIds = [];
$.getJSON(url, function(data){
$.each(data, function(i, json){
arrIds.push(encodeURIComponent(json.elementId))//collect everything which is required for "getAccordionPart" and "getAccordionBody"
});
then Iterate on this collection and collect all the data for accordian body of these ids in any global variable.
var bodyData = {};
$.each(arrIds, function(){
var url = standardUrl + "sources/" + this + "/streams";
$.getJSON(url, function(data) {
bodyData[this] = data;//collect all the Data for accordian body of these ids
}});
Also do a litle change in getAccordionPart like:
function getAccordionPart(id, parent, count, /*json*/ elementId){
//new string html2 is created and a bunch of stuff added
//...
html2 += "....";
html2 += getAccordionBody(elementId);
html2 += "</div></div></div></div>";
return html2
}
also change getAccordionBody like:
function getAccordionBody(/*json*/ elementId){
//new string "html3" gets created
//...
var data = bodyData[elementId];
$.each(data, function(i, json) {
html3 += "<li class='list-group-item'>";
html3 += json.name;
html3 += "</li>";
});
html3 += "</ul>";
return html3;
}
Your Calling will also be changed:
$.each(arrIds , function(){
html1 += getAccordionPart(,,,this); //creates the accordion for the given source
});
You Final code will be:
var arrIds = [];
$.getJSON(url, function(data){
$.each(data, function(i, json){
arrIds.push(encodeURIComponent(json.elementId))//collect everything which is required for "getAccordionPart" and "getAccordionBody"
});
var bodyData = {};
$.each(arrIds, function(){
var url = standardUrl + "sources/" + this + "/streams";
$.getJSON(url, function(data) {
bodyData[this] = data;//collect all the Data for accordian body of these ids
}});
function getAccordionPart(id, parent, count, /*json*/ elementId){
//new string html2 is created and a bunch of stuff added
//...
html2 += "....";
html2 += getAccordionBody(elementId);
html2 += "</div></div></div></div>";
return html2
}
function getAccordionBody(/*json*/ elementId){
//new string "html3" gets created
//...
var data = bodyData[elementId];
$.each(data, function(i, json) {
html3 += "<li class='list-group-item'>";
html3 += json.name;
html3 += "</li>";
});
html3 += "</ul>";
return html3;
}
$.each(arrIds , function(){
html1 += getAccordionPart(,,,this); //creates the accordion for the given source
});

Extracting user playcount from Last.fm API using JSON

In a nutshell, I'd like to display the Last.fm user playcount figure on my site (see 'playcount' on http://www.last.fm/api/show/user.getInfo). I've tried the following, but confess I have no idea if I'm on the right lines here.
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=XXX&api_key=XXX&limit=5&format=json&callback=?", function(data) {
var html = '';
$.each(data.user.playcount, function(i, item) {
html += "<p>" + item.playcount + "</p>";
});
$('#count').append(html);
});
});

The inner foreach loop is unnecessary, user.getInfo returns only one user's information after all. The following should work:
$(document).ready(function() {
$.getJSON("http://ws.audioscrobbler.com/2.0/?method=user.getInfo&user=XXX&api_key=XXX&format=json", function(data) {
var html = "<p>" + data.user.playcount + "</p>";
$('#count').append(html);
});
});
I have also removed the limit and callback parameters from the URL for brevity.

Use $.each and if with $.getJSON

Me and $.each aren't good friends, I can't seem to figure out how I should use this statement to print all my data in my JSON file. Another problem is the if statement, I tried it in many ways, but whatever I do, no data is being printed.
My JSON file
[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]
My $.getJSON script
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var el = document.getElementById("kome");
el.innerHTML = "<td><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></td>";
});
}
</script>
So how would I integrate the $.each statement and seperate from that, the if statement?

Try this
$.getJSON("home.json", function (data) {
var html = '',
el = document.getElementById("kome");
$.each(data, function (key, val) {
html += "<td><div class='dsc'>" + val.expo + "<br><em>" + val.datum + "</em></div></td>";
});
el.innerHTML = html;
});

Something like this?
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var html = '';
$.each(data, function(i, record) {
html += '' +
'<td>' +
'<a href="' + record.link + '" data-ajax="false">' +
'<img src="' + record.img + '">' +
'<div class="dsc">' +
record.expo + '<br>' +
'<em>' + record.datum + '</em>' +
'</div>' +
'</a>' +
'</td>';
});
$('#kome').html(html);
});
}
</script>
Note: I haven't tested this, so there may be a few syntax errors (mostly concerned about the quotes in the string concatenation).
I will note that you don't need jQuery's $.each for this; you can use a basic for-loop:
for (var i = 0; i < data.length; i++) {
var record = data[i];
... stuff...
}
jQuery's .each() is really useful when iterating over elements in the DOM, though. For example, if you wanted to iterate over the elements with class dsc, you could do:
$('.dsc').each(function(i, dsc) {
// Do stuff to the $(dsc) element.
});
Also, you might as well use jQuery's selectors (the $('#kome')) if you're going to use jQuery.
jQuery's API usually has solid examples for stuff; this is one such case.

$.each can iterate arrays [] or objects {}, your json contains both, so first you need to tackle array, that gives you an object on each iteration. Then you can access its properties.
jQuery each documentation
Second thing: to append to innerHTML use "+=" not "=" or you will reset html on each iteration.
var el = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) {
$.each(data, function(n, linkData) {
el.innerHTML += '' + linkData.expo + '';
});
}