CODEWITHSUNDEEP
javascriptphpjqueryajaxjson
Daniele Squalo
Daniele Squalo

Reputation: 55

Jquery: Ajax call to a php script returning JSON data

i'm new to JSON. I have a php with a multidimensional array which gets finally encoded in JSON format:

<?php
header('Content-Type: application/json');
$lista = array (
    'Conoscenti'=>array (
        0=>array(
            "Nome"=>"John",
            "Cognome"=>"Doe",
            "Nato"=>array(
                "Giorno"=>16,
                "Mese"=>"Febbraio",
                "Anno"=>1972
            )
        ),
        1=>array(
            "Nome"=>"Elvis",
            "Cognome"=>"Presley",
            "Nato"=>array(
                "Giorno"=>12,
                "Mese"=>"Luglio",
                "Anno"=>1984
            )
        ),
        2=>array(
            "Nome"=>"Mick",
            "Cognome"=>"Jagger",
            "Nato"=>array(
                "Giorno"=>13,
                "Mese"=>"Novembre",
                "Anno"=>1984
            )
        )
     ),
    "Amici"=>array(
        0=>array(
            "Nome"=>"Michael",
            "Cognome"=>"Myers",
            "Nato"=>array(
                "Giorno"=>8,
                "Mese"=>"Dicembre",
                "Anno"=>1986
            )
        ),
        1=>array(
            "Nome"=>"Jim",
            "Cognome"=>"Fear",
            "Nato"=>array(
                "Giorno"=>4,
                "Mese"=>"Febbraio",
                "Anno"=>1985
            )
        )
    )
);
echo json_encode($lista);
?>

I want to load this through Ajax: to do this, i wrote some JQuery code:

var output ="<ul>";
$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    $.each(data.Conoscenti, function() {
        output +="<li>"+this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+this.Nato.Giorno+" "+this.Nato.Mese+" "+this.Nato.Anno+"</li>";
    });
});
output += "</ul>";
$("body").html(output);

But the html page shows blank, without even errors. Analyzing the source code it shows only the ul tag, since it's out of the ajax call. Anyone knows how can i fix it? Thank you.

Upvotes: 1

Views: 292

Answers (4)

Eisson
Eisson

Reputation: 1

Daniele, the problem is that you insert the html out of the done function, please try with the code below:

var output ="<ul>";
$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    $.each(data.Conoscenti, function() {
        output +="<li>"+this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+this.Nato.Giorno+" "+this.Nato.Mese+" "+this.Nato.Anno+"</li>";
    });
    output += "</ul>";
    $("body").html(output);
});

Upvotes: 0

sircamp
sircamp

Reputation: 107

The problem occurs because the printing of the variable "out" occurs before the execution of the ajax request. You have to put the printing of the variable within the callback "done".

A good idea, then, would be to have always a branch "done" and a branch "fail" (possibly also the branch "always") so as to manage the success or failure of the request.

Try this:

$.ajax({
 url:"lista.php",
 dataType:"json"
})
.done(function(data) {
   var output = "<ul>";
   $.each(data.Conoscenti, function() {
      output += "<li>" + this.Nome + " " + this.Cognome + " è     un mio conoscente. &Egrave; nato il " + this.Nato.Giorno + " " + this.Nato.Mese + " " + this.Nato.Anno + "</li>";
});
output += "</ul>";
$("body").html(output);
})
.fail(function( jqXHR, textStatus, errorThrown ){
   /*manage your error*/
})
.always(function()){
  console.log("completed");
}

Upvotes: 0

user4764833
user4764833

Reputation: 1

    $.ajax({
        url:"lista.php",
        dataType:"json"
    })
    .done(function(data) {
        var output ="<ul>";
        $.each( data.Conoscenti, function() {
           output +="<li>"+ this.Nome+" "+this.Cognome+" è un mio conoscente. &Egrave; nato il "+ this.Nato.Giorno+" "+ this.Nato.Mese+" "+ this.Nato.Anno+"</li>";
        });
        output += "</ul>";
        $("body").html(output); 
    });

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because the promise is executed after the request completes. This means that $('body').html(output) has already been run before you loop over the returned JSON.

To solve this you need to execute all code which depends on the response within the done() handler. Try this:

$.ajax({
    url:"lista.php",
    dataType:"json"
}).done(function(data) {
    var output = "<ul>";
    $.each(data.Conoscenti, function() {
        output += "<li>" + this.Nome + " " + this.Cognome + " è un mio conoscente. &Egrave; nato il " + this.Nato.Giorno + " " + this.Nato.Mese + " " + this.Nato.Anno + "</li>";
    });
    output += "</ul>";
    $("body").html(output);
});

Upvotes: 1

Related Questions