Parse JSON data using jQuery.getJSON()

by Wayne Humphrey

HTML

<div id="images"></div>

<button>Send CORS</button>
<div id="message"></div>

CSS

body {
    font-size: 75%;
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
}
#body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
    margin-top:35px;
}
#body td {
    padding:15px 30px 15px 10px;
}
#body tr td:nth-child(1) {
    font-weight:bold;
}
#address {
    width:400px;
}

JavaScript

// The Google Geocoding API url used to get the JSON data
var geocodingAPI = "https://next.json-generator.com/api/json/get/41aV8o7AV";
var someAPI='https://next.json-generator.com/api/json/get/EyBBs57RE';
var corsAPI='http://json.sandboxed.guru/chapter9/cors.php';

$.getJSON(geocodingAPI, function (json) {
		//console.log(JSON.stringify(json.results));
    //console.log(json.results);
});

//$.getJSON(someAPI, function (json) {
//    console.log(JSON.stringify(json));
//});


(function() {
  var flickerAPI = "https://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 === 1 ) {
          return false;
        }
      });
    });
})();


$('button').on('click', function() {
    $('#message').text('');
    $.ajax({
        url: corsAPI,
        type: "GET",
        crossDomain: true,
        dataType: "json",
        success: function(response) {
            //console.log(response);
            console.log(JSON.stringify(response));
            $('#message').text(response.message);
        },
        error: function(xhr, status) {
            alert("error");
        }
    });
});