-1

the following code should show a random quote. But it returning nothing. Just showing the html page layout. Why following javascript callback function isn't working:

$(document).ready(function() {
  function cb() {
    var addr = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
    $.getJSON(addr, function(rslt) {
      return rslt;
    });
  };

  function qte(rslt) {
    $("#qti").html(rslt[0].content);
    $("#athr").html(rslt[0].title);
  };
  qte(cb);
  $("#nqt").on("click", function() {
    qte(cb);
  });
  $("#tit").on("click", function() {
    window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(qwe));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <h1 class="text-center" style="margin-top:20px;">Random Quote Generator</h1>
  <div class="box">
    <div class="qt">
      <span id="qti"></span>
    </div>
    <div class="athr">- <span id="athr"></span></div>
    <div style="width:100%; clear:both; margin-left:auto; margin-right:auto; margin-top:6%;">
      <button class="btn" title="twitt it!" id="tit"><i class="fa fa-twitter"></i></button>
      <button class="btn pull-right" id="nqt">New Quote</button>
    </div>
  </div>
</div>
Mridul Mishra
  • 1
  • 1
  • 4
    The getJSON callback is invoked asynchronously, so your callback isn't doing anything at all. – jdigital May 06 '17 at 04:29
  • you understand that your cb function isn't returning anything? – Jaromanda X May 06 '17 at 04:31
  • 1
    Your browser has a built-in debugger. It's remarkably helpful for gaining insight into problems such as this one. I recommend spending the time learning to use it. – jdigital May 06 '17 at 04:32
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – JJJ May 06 '17 at 04:35
  • Use Promises here. – Sumit Ridhal May 06 '17 at 05:04

1 Answers1

1

You can do like this. Use $.when to trigger the qte function once the response is available from the asynchronous call.

$(document).ready(function() {
  function cb() {
    // changed http to https to avoid blockrd content
    var addr = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
   // returning the 'promise' from this function
   return $.getJSON(addr, function(rslt) {
    return rslt;
    });
  };

  // when cb function has finished execution using its result to populate the fields
  $.when(cb()).done(function(rslt){

   $("#qti").html(rslt[0].content);
    $("#athr").html(rslt[0].title);
  });
  // rst of code
});

DEMO

brk
  • 48,835
  • 10
  • 56
  • 78
  • Tnx. But it didn't work. When i m using alert, it's saying undefined. Which means its getting nothing from JSON call. But when i went to that url in my browser window, its giving me an array, which means url is working fine. – Mridul Mishra May 08 '17 at 08:04