First api call, $.getJSON && $.ajax both NOT working

First api call, $.getJSON && $.ajax both NOT working
0

#1

Hi All,

I can’t manage to get either getJSON or ajax to display the returned json object from a working url: http://www.ourmanna.com/verses/api/get/?format=json&order=random

here is my codepen: http://codepen.io/RyzorBent/pen/GmXPEZ

I searched around on the forum and online, but for some strange reason my code is not behaving :sweat:

$(document).ready(function() {
    //$.ajaxSetup({ cache: false });
    $("#getQuote").on("click", function() {
        console.log("button clicked");
        $(".message").html("<p>text has appeared, there!</p>");
        
        //$.getJSON("http://www.ourmanna.com/verses/api/get/?format=jsonp&order=random", function(verse) {
            //console.log("inside getJSON");
        //});
        
        $.ajax({
            url: "http://www.ourmanna.com/verses/api/get/?format=jsonp&order=random",
      dataType: "json",
            success: function(verse){
                console.log("inside ajax");
         $("#test").html(verse.text); 
      }
    });
});
});

Will appreciate your help.


#2

Hi, you are getting a CORS error, meaning that you don’t have access to the API server. An easy way to avoid this, is by using cors-anywhere.herokuapp.com. Also, jsonp is not a valid argument it should be json. Lastly, the property you are looking for is not verse.text, but verse.verse.details.text.

This code will work:

$.ajax({
  url: "https://cors-anywhere.herokuapp.com/http://www.ourmanna.com/verses/api/get/?format=json&order=random",
  dataType: "json",
  success: function(verse){
    console.log(verse);
    $("#test").html(verse.verse.details.text); 
  }
});

More info (just search CORS for more):


#3

Thank you very much Ben, i put in the https://cors-anywhere.herokuapp.com and decided to use $.getJSON and it worked like a charm!

I’m going to read all i can regarding CORS.

Thanks again!! :ok_hand: