Getting JSON with the jQuery getJSON Method

Question

I am trying to use JSON from an api to generate random quotes. On the click of the button , the json should populate in place of "The message will go here". But I am finding stuck. The code is below and link for project:

https://codepen.io/monsieurshiva/pen/awBbEE

<html>
<head>

  <script>
  $(document).ready(function() {

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

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

    });

  });
</script>
</head>
<body>
      <div class = "col-xs-12 well message">
      The message will go here
    </div>
        <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
</body>
</html>

you should read the quote from your json object, then append that quote to your div check this [tutorial](https://www.w3schools.com/js/js_json_objects.asp) on reading json object, plus make sure you [allow](https://stackoverflow.com/questions/6871021/how-to-enable-cross-domain-request-on-the-server) cross-domain ajax calls — Munzer, Jun 15 '17 at 13:36
https://j11y.io/javascript/cross-domain-requests-with-jquery/ — Freak, Jun 15 '17 at 13:41

Adharsh M · Accepted Answer · 2017-06-15T14:10:11.110

Please Try This Its Working For Me without Cross Domain Error. I have changed it to a function and use ajax to take data. Also Use https api URL to avoid insecure script error.

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
      $(document).ready(function() {
    
    
    
    $( function() {   
      $('#getMessage').on( 'click', function(){ 
        load();
         } );  
    });
                   
                    var linkUrl = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en";
                    var load = function() {
                            $.ajax(
                            {
                                    dataType : "jsonp",
                                    jsonp : "jsonp",
                                    url : linkUrl,
                                    success : function(response){
                                            $(".message").html(response.quoteText);
                                    }
                            });
                    };
    
      });
    </script>
    </head>
    <body>
          <div class = "col-xs-12 well message">
          The message will go here
        </div>
            <button id = "getMessage" class = "btn btn-primary">
            Get Message
          </button>
    </body>
    </html>

Freak · Answer 2 · 2017-06-15T13:40:12.750

Try to use JSONP - Examples

$(document).ready(function(){
    $.ajax({
        url: 'http://openexchangerates.org/latest.json',
        dataType: 'jsonp',
        success: function(json) {
            // Rates are in `json.rates`
            // Base currency (USD) is `json.base`
            // UNIX Timestamp when rates were collected is in `json.timestamp`        

            rates = json.rates;
            base = json.base;
            console.log(rates);
        }
    });
});

OR this

<script>
(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>

Ref: http://api.jquery.com/jquery.getjson/

Getting JSON with the jQuery getJSON Method

2 Answers2