Use jQuery ajax call PHP with json return and try to build a list from the json object

Question

I am using the following code to call PHP to get json back and trying to parse the json object returned and make a list of hyperlinks. I got json object back from PHP but my list was empty. Please help! Here is my jQuery code and json return

html code
<div id="document_list"></div>



function GetDocListMain() {
   var html='';
   $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
       function(data){
       alert(data);
       $.each(data, function(index, item){
         html +='<li><a href="download_doc.php?id=' + item.id +'">' + item.file_name + ' | ' + item.created + '</a></li>' ;

       });
   });

   $('#document_list').empty();
   $('#document_list').append(html);

}

And my json return from PHP is

[ {"id":"1", "file_name":"testfile1.pdf", "created":"2017-02-11"},
  {"id":"2", "file_name":"testfile2.pdf", "created":"2016-11-12"},
  {"id":"3", "file_name":"testfile6.pdf", "created":"2016-10-12"}
]

`$.getJSON` is [**asynchronous**](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). Move the two lines `$('#document_list').empty();` and `$('#document_list').append(html);` into the callback right after `$.each`! — ibrahim mahrir, Jun 11 '17 at 07:24
can you add the php code which produces the json object to the question. It will help to answer your question. — Avishek Saha, Jun 11 '17 at 07:28
**Note:** the `div` with the id of `#document_list` should be an `ul` or `ol`. — ibrahim mahrir, Jun 11 '17 at 07:29
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ibrahim mahrir, Jun 11 '17 at 07:29

score 0 · Accepted Answer · answered Jun 11 '17 at 07:27

$.getJSON is async that's why its not working because you appending empty html before fetching json data. append your html inside success callback of $.getJSON

  function GetDocListMain() {
       var html='';
       $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
           function(data){

           $.each(data, function(index, item){
             html +='<li><a href="download_doc.php?id=' + item.id +'">' + item.file_name + ' | ' + item.created + '</a></li>' ;

           });
           $('#document_list').empty();
           $('#document_list').append(html);
       });


    }

Suraj Kc · Answer 2 · 2017-06-11T07:33:01.850

0

you don't have to use $.each and oh! you have to append your HTML inside the AJAX call

function GetDocsListMain(){
   var html='';
   $.getJSON("getUserDocument.php?id=" + <?php echo $_GET["id"] ?>,
       function(data){
          alert(data);
          for(var i = 0; i < data.length; i++){
          html +='<li><a href="download_doc.php?id=' + data[i].id +'">' + data[i].file_name + ' | ' + data[i].created + '</a></li>' ;
       }
       $('#document_list').empty();
       $('#document_list').append(html);
   }

}

edited Jun 11 '17 at 07:33

answered Jun 11 '17 at 07:28

Suraj Kc

97
6

`$.each` is fine. – ibrahim mahrir Jun 11 '17 at 07:32
for loop is simply better than $.each in this context – Suraj Kc Jun 11 '17 at 07:35
I use $.each(data, function(index, item){ ...... } . Because if there are two json object return. I can do the following. $.each(data.datasetA, function(index, item){ ...... } $.each(data.datasetB, function(index, item){ ...... } – CK8 Jun 11 '17 at 17:48

Use jQuery ajax call PHP with json return and try to build a list from the json object

2 Answers2