Ajax, JSON, jQuery Example

Request JSON from server, then format into a list.

by satish2437

HTML

<h2>Seasons</h2>

<div id="raw"></div>
<div id="directUse"></div>
<div id="resPostStringify"></div>
<div id="resPostParse"></div>
<div id="resPostStringifyPostParse"></div>

CSS

#seasons {
    border: medium solid green;
    background-color: #efe;
}

JavaScript

$(document).ready(function () {
    $.getJSON("https://cdn.rawgit.com/dpheitmeyer/e0c4480fe583663c51de/raw/8e19ab1765dc27b6eeeb480f0187f3fd5a6db6a9/seasons.json", function (data) {
   $('#raw').html("RawResponse: " + data);
   $('#directUse').html("DirectUse: " + data.seasons[0]);
   $('#resPostStringify').html("PostStringify: " + JSON.stringify(data));
   
   try{
   $('#resPostParse').html("ParseRawJSON: " + JSON.parse(data));
   }
   catch(error){
   $('#resPostParse').html("ParseRawJSON: Error parsing raw json as REST response.");
   }
   
   $('#resPostStringifyPostParse').html("PostStringifyPostParse: " + JSON.parse(JSON.stringify(data)).seasons[0]);
    });
});