Calling APIs with JSON

Question

I'm trying to learn how to call APIs using JQuery. I've created a little function to change the text inside of a div (class="quote-box"). The function seems to work fine for the most part. Clicking the #newQuote button changes the text in the div to Didn't work.

However, the .getJSON in the middle is doing nothing at all. I would expect this code to change the text to "Yay.", but it refuses to do anything inside of the function(json){ } block.

--old code removed--

Any help would be greatly appreciated.

EDIT: This does not appear to be a duplicate of the above question, since the function continues to fail even after removing all variables.

  $("#newQuote").on("click", function(){

       $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json", function(json){
         $(".quote-box").html("Yay");
       }); 
 });

EDIT 2: Solved. The forismatic API does not like https. Switching to normal http made everything work properly.

You need to make the call using $.ajax() to it make it synchronously, by using `async:false` code like `$.ajax({ url: myUrl, dataType: 'json', async: false, data: myData, success: function(data) { //stuff //... } });` — Curiousdev, May 14 '17 at 04:50
@Curiousdev That's the worst suggestion you could make. Absolutely do not do this. It will hang up the browser while you wait for network calls. Don't do this, and go and undo any code where you've done this. — Brad, May 14 '17 at 05:02
@Brad ohh really may be Ur right why don't u ask jQuery creators to remove this as it's unnecessarily added and it's worst and useless, however many of the posts and blogs on internet including stackverflow are suggesting to use this may b dey all are wrong.. thanks for suggesting I have learned a new thing today.. one small question I have if they have added this asynchronous functions is der any scenario I can use this?? What if I have to do a certain tasks which needs to wait until my response come.. And yes I know it'll hold me until my network calls has been completed thanks :) — Curiousdev, May 14 '17 at 06:33
@Curiousdev It's only there because the browser's XHR supports it. If you use it and check your dev console, you'll see warnings about it. There are also warnings in the jQuery documentation. There is never a good reason to use synchronous mode. You can always have your code run after the response. If the flow control is difficult to deal with, check out promises, which are already built into jQuery's AJAX responses. — Brad, May 14 '17 at 18:20

score 4 · Answer 1 · answered May 14 '17 at 04:56

4

Well because getJSON is an asynchronous call, that means your code after that won't wait for the getJSON to be finished to proceed.

So to fix that, add the $(".quote-box").html(outputString); inside the getJSON

 $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json", function(jsonp){
    outputString = "Yay."; 
    // Select the quote box, change the html. No problem here.
    $(".quote-box").html(outputString);
 });

answered May 14 '17 at 04:56

Robin Carlo Catacutan

13,249
11
52
85

I have actually tried this, and I just tried it again. Still no luck, I'm afraid. (on the bright side, I learned what an asynchronous call is!) – garroad_ran May 14 '17 at 05:09
@garroad_ran This code is fine. You're going to have to figure out the proper selector. Also, be sure to use `.text()`, if you're putting text in rather than HTML, to ensure the text is escaped properly. – Brad May 14 '17 at 05:17
Hmm, I'm sorry I don't quite seem to understand this. Are you referring to my .quote-box selector, or something else? I will keep the .text() thing in mind as well. – garroad_ran May 14 '17 at 05:42

Calling APIs with JSON

1 Answers1