$.getJSON Return/scope Issue?

This is my code and the alert always displaying null as value in item function make_recent_item(recent_counter){ var json_path_popular= 'http://localhost/complaints_old/web

Solution 1:

$.getJSON() returns results asynchronously. return $.getJSON() from function, use .then() chained to function call, include .fail() chained to .then() to handle possible error returned by $.getJSON().

 function make_recent_item(recent_counter) {
   var json_path_popular= 'http://localhost/complaints_old/webservice/get_new_complaints' + '?recent_counter='+recent_counter;
   return $.getJSON(json_path_popular)
 }

 make_recent_item(/* parameter */)
 .then(function( data ){
   var item ='<div class="item list">'+
           '<div class="image">'+
              '<div class="quick-view" '+data.data[0].complaint_id+'><i class="fa fa-eye"></i><span>Quick View</span></div>'+
              '<div href="item-detail.html">'+
                  '<img style="width:260px;height:195px;" src="data:image/jpg;base64,'+ data.data[0].picture +  '"/>'+
              '</div>'+
          '</div>'+
          '<div class="wrapper">'+
              '<a href="item-detail.html"><h3>Cash Cow Restaurante</h3></a>'+
              '<figure>'+data.data[0].municipality_name+'</figure>'+
              '<div class="info">'+
              '</div>'+
          '</div>'+ 
      '</div>';
      // do stuff with `item`
      $(item).appendTo("body");
 })
 .fail(function(jqxhr, textStatus, errorThrown) {
   console.log(textStatus, errorThrown);
 });