How can I link external json file in JSFiddle?

Question

• I have a very long .json file country.json.

---

[
  {
    "name": "WORLD",
    "population": 6916183000
  },
  {
    "name": "More developed regions",
    "population": 1240935000
  },
  {
    "name": "Less developed regions",
    "population": 5675249000
  },
  {
    "name": "Least developed countries",
    "population": 838807000
  },
  {
    "name": "Less developed regions, excluding least developed countries",
    "population": 4836442000
  },
  {
    "name": "Less developed regions, excluding China",
    "population": 4284697000
  },
  {
    "name": "Sub-Saharan Africa",
    "population": 831464000
  },
  {
    "name": "AFRICA",
    "population": 1031084000
  },
  {
    "name": "Eastern Africa",
    "population": 342595000
  },
  {
    "name": "Burundi",
    "population": 9233000
  },
  {
    "name": "Comoros",
    "population": 683000
  },
  {
    "name": "Djibouti",
    "population": 834000
  },
  {
    "name": "Eritrea",
    "population": 5741000
  },
  {
    "name": "Ethiopia",
    "population": 87095000
  },
  {
    "name": "Kenya",
    "population": 40909000
  },
  {
    "name": "Madagascar",
    "population": 21080000
  },
  {
    "name": "Malawi",
    "population": 15014000
  },
  {
    "name": "Mauritius",
    "population": 1231000
  },
  {
    "name": "Mayotte",
    "population": 204000
  },
  {
    "name": "Mozambique",
    "population": 23967000
  },
  {
    "name": "Réunion",
    "population": 845000
  },
  {
    "name": "Rwanda",
    "population": 10837000
  },
  {
    "name": "Seychelles",
    "population": 91000
  },
  {
    "name": "Somalia",
    "population": 9636000
  },
  {
    "name": "South Sudan",
    "population": 9941000
  },
  {
    "name": "Uganda",
    "population": 33987000
  },
  {
    "name": "United Republic of Tanzania",
    "population": 44973000
  },
  {
    "name": "Zambia",
    "population": 13217000
  },
  {
    "name": "Zimbabwe",
    "population": 13077000
  },
  {
    "name": "Middle Africa",
    "population": 124978000
  },
  {
    "name": "Angola",
    "population": 19549000
  },
  {
    "name": "Cameroon",
    "population": 20624000
  },
  {
    "name": "Central African Republic",
    "population": 4350000
  },
  {
    "name": "Chad",
    "population": 11721000
  },
  {
    "name": "Congo",
    "population": 4112000
  },
  {
    "name": "Democratic Republic of the Congo",
    "population": 62191000
  },
  {
    "name": "Equatorial Guinea",
    "population": 696000
  },
  {
    "name": "Gabon",
    "population": 1556000
  },
  {
    "name": "Sao Tome and Principe",
    "population": 178000
  },
  {
    "name": "Northern Africa",
    "population": 199620000
  },
  {
    "name": "Algeria",
    "population": 37063000
  },
  {
    "name": "Egypt",
    "population": 78076000
  },
  {
    "name": "Libya",
    "population": 6041000
  },
  {
    "name": "Morocco",
    "population": 31642000
  },
  {
    "name": "Sudan",
    "population": 35652000
  },
  {
    "name": "Tunisia",
    "population": 10632000
  },
  {
    "name": "Western Sahara",
    "population": 515000
  },
  {
    "name": "Southern Africa",
    "population": 58803000
  },
  {
    "name": "Botswana",
    "population": 1969000
  },
  {
    "name": "Lesotho",
    "population": 2009000
  },
  {
    "name": "Namibia",
    "population": 2179000
  },
  {
    "name": "South Africa",
    "population": 51452000
  },
  {
    "name": "Swaziland",
    "population": 1193000
  },
  {
    "name": "Western Africa",
    "population": 305088000
  },
  {
    "name": "Benin",
    "population": 9510000
  },
  {
    "name": "Burkina Faso",
    "population": 15540000
  },
  {
    "name": "Cape Verde",
    "population": 488000
  },
  {
    "name": "Côte d'Ivoire",
    "population": 18977000
  },
  {
    "name": "Gambia",
    "population": 1681000
  },
  {
    "name": "Ghana",
    "population": 24263000
  },
  {
    "name": "Guinea",
    "population": 10876000
  },
  {
    "name": "Guinea-Bissau",
    "population": 1587000
  },
  {
    "name": "Liberia",
    "population": 3958000
  },
  {
    "name": "Mali",
    "population": 13986000
  },
  {
    "name": "Mauritania",
    "population": 3609000
  },
  {
    "name": "Niger",
    "population": 15894000
  },
  {
    "name": "Nigeria",
    "population": 159708000
  },
  {
    "name": "Saint Helena",
    "population": 4000
  },
  {
    "name": "Senegal",
    "population": 12951000
  },
  {
    "name": "Sierra Leone",
    "population": 5752000
  },
  {
    "name": "Togo",
    "population": 6306000
  },
  {
    "name": "ASIA",
    "population": 4165440000
  },
  {
    "name": "Eastern Asia",
    "population": 1593571000
  },
  {
    "name": "China",
    "population": 1359821000
  },
  {
    "name": "China, Hong Kong SAR",
    "population": 7050000
  },
  {
    "name": "China, Macao SAR",
    "population": 535000
  },
  {
    "name": "Dem. People's Republic of Korea",
    "population": 24501000
  },
  {
    "name": "Japan",
    "population": 127353000
  },
  {
    "name": "Mongolia",
    "population": 2713000
  },
  {
    "name": "Republic of Korea",
    "population": 48454000
  },
  {
    "name": "Other non-specified areas",
    "population": 23146000
  },
  {
    "name": "South-Central Asia",
    "population": 1743101000
  },
  {
    "name": "Central Asia",
    "population": 61694000
  },
  {
    "name": "Kazakhstan",
    "population": 15921000
  },
  {
    "name": "Kyrgyzstan",
    "population": 5334000
  },
  {
    "name": "Tajikistan",
    "population": 7627000
  },
  {
    "name": "Turkmenistan",
    "population": 5042000
  },
  {
    "name": "Uzbekistan",
    "population": 27769000
  },
  {
    "name": "Southern Asia",
    "population": 1681407000
  },
  {
    "name": "Afghanistan",
    "population": 28398000
  },
  {
    "name": "Bangladesh",
    "population": 151125000
  },
  {
    "name": "Bhutan",
    "population": 717000
  },
  {
    "name": "India",
    "population": 1205625000
  },
  {
    "name": "Iran (Islamic Republic of)",
    "population": 74462000
  },
  {
    "name": "Maldives",
    "population": 326000
  },
  {
    "name": "Nepal",
    "population": 26846000
  },
  {
    "name": "Pakistan",
    "population": 173149000
  },
  {
    "name": "Sri Lanka",
    "population": 20759000
  },
  {
    "name": "South-Eastern Asia",
    "population": 597097000
  },
  {
    "name": "Brunei Darussalam",
    "population": 401000
  },
  {
    "name": "Cambodia",
    "population": 14365000
  },
  {
    "name": "Indonesia",
    "population": 240676000
  },
  {
    "name": "Lao People's Democratic Republic",
    "population": 6396000
  },
  {
    "name": "Malaysia",
    "population": 28276000
  },
  {
    "name": "Myanmar",
    "population": 51931000
  },
  {
    "name": "Philippines",
    "population": 93444000
  },
  {
    "name": "Singapore",
    "population": 5079000
  },
  {
    "name": "Thailand",
    "population": 66402000
  },
  {
    "name": "Timor-Leste",
    "population": 1079000
  },
  {
    "name": "Viet Nam",
    "population": 89047000
  },
  {
    "name": "Western Asia",
    "population": 231671000
  },
  {
    "name": "Armenia",
    "population": 2963000
  },
  {
    "name": "Azerbaijan",
    "population": 9095000
  },
  {
    "name": "Bahrain",
    "population": 1252000
  },
  {
    "name": "Cyprus",
    "population": 1104000
  },
  {
    "name": "Georgia",
    "population": 4389000
  },
  {
    "name": "Iraq",
    "population": 30962000
  },
  {
    "name": "Israel",
    "population": 7420000
  },
  {
    "name": "Jordan",
    "population": 6455000
  },
  {
    "name": "Kuwait",
    "population": 2992000
  },
  {
    "name": "Lebanon",
    "population": 4341000
  },
  {
    "name": "Oman",
    "population": 2803000
  },
  {
    "name": "Qatar",
    "population": 1750000
  },
  {
    "name": "Saudi Arabia",
    "population": 27258000
  },
  {
    "name": "State of Palestine",
    "population": 4013000
  },
  {
    "name": "Syrian Arab Republic",
    "population": 21533000
  },
  {
    "name": "Turkey",
    "population": 72138000
  },
  {
    "name": "United Arab Emirates",
    "population": 8442000
  },
  {
    "name": "Yemen",
    "population": 22763000
  },
  {
    "name": "EUROPE",
    "population": 740308000
  },
  {
    "name": "Eastern Europe",
    "population": 296183000
  },
  {
    "name": "Belarus",
    "population": 9491000
  },
  {
    "name": "Bulgaria",
    "population": 7389000
  },
  {
    "name": "Czech Republic",
    "population": 10554000
  },
  {
    "name": "Hungary",
    "population": 10015000
  },
  {
    "name": "Poland",
    "population": 38199000
  },
  {
    "name": "Republic of Moldova",
    "population": 3573000
  },
  {
    "name": "Romania",
    "population": 21861000
  },
  {
    "name": "Russian Federation",
    "population": 143618000
  },
  {
    "name": "Slovakia",
    "population": 5433000
  },
  {
    "name": "Ukraine",
    "population": 46050000
  },
  {
    "name": "Northern Europe",
    "population": 98795000
  },
  {
    "name": "Channel Islands",
    "population": 160000
  },
  {
    "name": "Denmark",
    "population": 5551000
  },
  {
    "name": "Estonia",
    "population": 1299000
  },
  {
    "name": "Faeroe Islands",
    "population": 50000
  },
  {
    "name": "Finland",
    "population": 5368000
  },
  {
    "name": "Iceland",
    "population": 318000
  },
  {
    "name": "Ireland",
    "population": 4468000
  },
  {
    "name": "Isle of Man",
    "population": 84000
  },
  {
    "name": "Latvia",
    "population": 2091000
  },
  {
    "name": "Lithuania",
    "population": 3068000
  },
  {
    "name": "Norway",
    "population": 4891000
  },
  {
    "name": "Sweden",
    "population": 9382000
  },
  {
    "name": "United Kingdom",
    "population": 62066000
  },
  {
    "name": "Southern Europe",
    "population": 154712000
  },
  {
    "name": "Albania",
    "population": 3150000
  },
  {
    "name": "Andorra",
    "population": 78000
  },
  {
    "name": "Bosnia and Herzegovina",
    "population": 3846000
  },
  {
    "name": "Croatia",
    "population": 4338000
  },
  {
    "name": "Gibraltar",
    "population": 29000
  },
  {
    "name": "Greece",
    "population": 11110000
  },
  {
    "name": "Holy See",
    "population": 1000
  },
  {
    "name": "Italy",
    "population": 60509000
  },
  {
    "name": "Malta",
    "population": 425000
  },
  {
    "name": "Montenegro",
    "population": 620000
  },
  {
    "name": "Portugal",
    "population": 10590000
  },
  {
    "name": "San Marino",
    "population": 31000
  },
  {
    "name": "Serbia",
    "population": 9647000
  },
  {
    "name": "Slovenia",
    "population": 2054000
  },
  {
    "name": "Spain",
    "population": 46182000
  },
  {
    "name": "TFYR Macedonia",
    "population": 2102000
  },
  {
    "name": "Western Europe",
    "population": 190618000
  },
  {
    "name": "Austria",
    "population": 8402000
  },
  {
    "name": "Belgium",
    "population": 10941000
  },
  {
    "name": "France",
    "population": 63231000
  },
  {
    "name": "Germany",
    "population": 83017000
  },
  {
    "name": "Liechtenstein",
    "population": 36000
  },
  {
    "name": "Luxembourg",
    "population": 508000
  },
  {
    "name": "Monaco",
    "population": 37000
  },
  {
    "name": "Netherlands",
    "population": 16615000
  },
  {
    "name": "Switzerland",
    "population": 7831000
  },
  {
    "name": "LATIN AMERICA AND THE CARIBBEAN",
    "population": 596191000
  },
  {
    "name": "Caribbean",
    "population": 41625000
  },
  {
    "name": "Anguilla",
    "population": 14000
  },
  {
    "name": "Antigua and Barbuda",
    "population": 87000
  },
  {
    "name": "Aruba",
    "population": 102000
  },
  {
    "name": "Bahamas",
    "population": 360000
  },
  {
    "name": "Barbados",
    "population": 280000
  },
  {
    "name": "British Virgin Islands",
    "population": 27000
  },
  {
    "name": "Caribbean Netherlands",
    "population": 18000
  },
  {
    "name": "Cayman Islands",
    "population": 56000
  },
  {
    "name": "Cuba",
    "population": 11282000
  },
  {
    "name": "Curaçao",
    "population": 148000
  },
  {
    "name": "Dominica",
    "population": 71000
  },
  {
    "name": "Dominican Republic",
    "population": 10017000
  },
  {
    "name": "Grenada",
    "population": 105000
  },
  {
    "name": "Guadeloupe",
    "population": 459000
  },
  {
    "name": "Haiti",
    "population": 9896000
  },
  {
    "name": "Jamaica",
    "population": 2741000
  },
  {
    "name": "Martinique",
    "population": 401000
  },
  {
    "name": "Montserrat",
    "population": 5000
  },
  {
    "name": "Puerto Rico",
    "population": 3710000
  },
  {
    "name": "Saint Kitts and Nevis",
    "population": 52000
  },
  {
    "name": "Saint Lucia",
    "population": 177000
  },
  {
    "name": "Saint Vincent and the Grenadines",
    "population": 109000
  },
  {
    "name": "Sint Maarten (Dutch part)",
    "population": 43000
  },
  {
    "name": "Trinidad and Tobago",
    "population": 1328000
  },
  {
    "name": "Turks and Caicos Islands",
    "population": 31000
  },
  {
    "name": "United States Virgin Islands",
    "population": 106000
  },
  {
    "name": "Central America",
    "population": 160546000
  },
  {
    "name": "Belize",
    "population": 309000
  },
  {
    "name": "Costa Rica",
    "population": 4670000
  },
  {
    "name": "El Salvador",
    "population": 6218000
  },
  {
    "name": "Guatemala",
    "population": 14342000
  },
  {
    "name": "Honduras",
    "population": 7621000
  },
  {
    "name": "Mexico",
    "population": 117886000
  },
  {
    "name": "Nicaragua",
    "population": 5822000
  },
  {
    "name": "Panama",
    "population": 3678000
  },
  {
    "name": "South America",
    "population": 394021000
  },
  {
    "name": "Argentina",
    "population": 40374000
  },
  {
    "name": "Bolivia (Plurinational State of)",
    "population": 10157000
  },
  {
    "name": "Brazil",
    "population": 195210000
  },
  {
    "name": "Chile",
    "population": 17151000
  },
  {
    "name": "Colombia",
    "population": 46445000
  },
  {
    "name": "Ecuador",
    "population": 15001000
  },
  {
    "name": "Falkland Islands (Malvinas)",
    "population": 3000
  },
  {
    "name": "French Guiana",
    "population": 231000
  },
  {
    "name": "Guyana",
    "population": 786000
  },
  {
    "name": "Paraguay",
    "population": 6460000
  },
  {
    "name": "Peru",
    "population": 29263000
  },
  {
    "name": "Suriname",
    "population": 525000
  },
  {
    "name": "Uruguay",
    "population": 3372000
  },
  {
    "name": "Venezuela (Bolivarian Republic of)",
    "population": 29043000
  },
  {
    "name": "NORTHERN AMERICA",
    "population": 346501000
  },
  {
    "name": "Bermuda",
    "population": 65000
  },
  {
    "name": "Canada",
    "population": 34126000
  },
  {
    "name": "Greenland",
    "population": 57000
  },
  {
    "name": "Saint Pierre and Miquelon",
    "population": 6000
  },
  {
    "name": "United States of America",
    "population": 312247000
  },
  {
    "name": "OCEANIA",
    "population": 36659000
  },
  {
    "name": "Australia/New Zealand",
    "population": 26773000
  },
  {
    "name": "Australia",
    "population": 22404000
  },
  {
    "name": "New Zealand",
    "population": 4368000
  },
  {
    "name": "Melanesia",
    "population": 8729000
  },
  {
    "name": "Fiji",
    "population": 861000
  },
  {
    "name": "New Caledonia",
    "population": 246000
  },
  {
    "name": "Papua New Guinea",
    "population": 6859000
  },
  {
    "name": "Solomon Islands",
    "population": 526000
  },
  {
    "name": "Vanuatu",
    "population": 236000
  },
  {
    "name": "Micronesia",
    "population": 498000
  },
  {
    "name": "Guam",
    "population": 159000
  },
  {
    "name": "Kiribati",
    "population": 98000
  },
  {
    "name": "Marshall Islands",
    "population": 52000
  },
  {
    "name": "Micronesia (Fed. States of)",
    "population": 104000
  },
  {
    "name": "Nauru",
    "population": 10000
  },
  {
    "name": "Northern Mariana Islands",
    "population": 54000
  },
  {
    "name": "Palau",
    "population": 20000
  },
  {
    "name": "Polynesia",
    "population": 660000
  },
  {
    "name": "American Samoa",
    "population": 56000
  },
  {
    "name": "Cook Islands",
    "population": 20000
  },
  {
    "name": "French Polynesia",
    "population": 268000
  },
  {
    "name": "Niue",
    "population": 1000
  },
  {
    "name": "Samoa",
    "population": 186000
  },
  {
    "name": "Tokelau",
    "population": 1000
  },
  {
    "name": "Tonga",
    "population": 104000
  },
  {
    "name": "Tuvalu",
    "population": 10000
  },
  {
    "name": "Wallis and Futuna Islands",
    "population": 14000
  }
]

---

jsfiddle link

How can I used that json in my jsfiddle ?

Answer 1

Step 1

Go to http://myjson.com/

I pasted in my json data and hit save I will then get a this link:

https://api.myjson.com/bins/3ffb0

---

Step 2

Now that I have that URL, I use it like this

    $http.get('https://api.myjson.com/bins/3ffb0').success(function(data) {
      $scope.countries = data;
    });

---

My Result

Work like a charm. No complain. :D

---

Answer 2

JSFiddle does not allow you to upload JSON files to make AJAX requests. You will need to have some other way to host the files so that you can call them. Your best bet is to upload them on an external server, preferably yours.

JSON-P to the Rescue!

Since the files will be hosted outside of the jsfiddle.net domain, you will either need to make a CORS request or, a simpler solution, a JSON-P request, which allows you to make cross-domain AJAX requests to retrieve JSON data.

What If I Cannot Host the File?

Accessing a JSON file on your own network should not be a problem. Since this is a JSFiddle question, you can only do what is suggested above. Someone suggested the JSFiddle mock AJAX request, but this still requires you to paste your JSON directly into the editor. If you cannot host the JSON externally, the least you can do is wrap it in a function at the end of your script. This will keep it out of sight so you don't have to scroll through it.

Here is a JSFiddle demonstrating their mock AJAX feature, using the JSON you provided: http://jsfiddle.net/MrPolywhirl/QsHw4/6352/

NOTE: You cannot call a file over HTTP in JSFiddle, if you are using their HTTPS connection. If you request cannot be called using HTTPS, you will need to find another way to access the file.

---

Solutions Using Template Languages

Here are tow example, one in Angular and one in jQuery, which produce the same ouptup using JSON-P.

Solution Using Angular

Using an externally hosted JSON file:

http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK

You can make a JSONP request in Angular JS like so:

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK';

var countryApp = angular.module('countryApp', []);

countryApp.controller('CountryCtrl', function($scope, $http) {
  $http.jsonp(jsonDataUrl)
    .success(function(data) {
      console.log(data);
      $scope.countries = data;
    });
});

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="countryApp">
  <div ng-controller="CountryCtrl">
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>Population</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="country in countries">
          <td>{{country.name}}</td>
          <td>{{country.population}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Solution Using jQuery

If you are unfamiliar with Angular, here is a jQuery implementation.

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK';

$(function() {
  $.ajax({
    type: 'GET',
    url: jsonDataUrl,
    async: false,
    jsonpCallback: 'JSON_CALLBACK',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data) {
      addRows($('#countryTable'), data, ['name','population']);
    },
    error: function(e) {
      console.log(e.message);
    }
  });
});

function addRows(table, data, fields) {
  var tbody = table.find('tbody');
  $.each(data, function(i, item) {
    tbody.append(addRow(item, fields));
  });
  return tbody;
}

function addRow(item, fields) {
  var row = $('<tr>');
  $.each(fields, function(i, field) {
    row.append($('<td>').html(item[field]));
  });
  return row;
}

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="countryTable">
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Solution Using HandlebarsJS

Similar to the jQuery example except we use a template instead of inserting DOM elements.

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk';

$(function() {
  var theTemplateScript = $("#country-template").html();   // Grab the template script
  var theTemplate = Handlebars.compile(theTemplateScript); // Compile the template
  
  $.ajax({
    type: 'GET',
    url: jsonDataUrl,
    async: false,
    jsonpCallback: 'JSON_CALLBACK',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data) {
      var theCompiledHtml = theTemplate(data);  // Pass our data to the template

      $('body').append(theCompiledHtml); // Add the compiled html to the page
    },
    error: function(e) {
      console.log(e.message);
    }
  });
});

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<script id="country-template" type="text/x-handlebars-template">
    <table>
      <thead>
        <tr>
          <th>Country</th>
          <th>Population</th>
        </tr>
      </thead>
      <tbody>
        {{#each .}}
        <tr>
          <td>{{name}}</td>
          <td>{{population}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
</script>

Solution Using UnderscoreJS

An alternative template to the HandlebarsJS example.

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk';
var countries = [];

$(function() {
  var tableTemplate = _.template($("#table-data").html());
  
  $.ajax({
    type: 'GET',
    url: jsonDataUrl,
    async: false,
    jsonpCallback: 'JSON_CALLBACK',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(data) {
      $("table>tbody").html(tableTemplate({
        countries: data
      }));
    },
    error: function(e) {
      console.log(e.message);
    }
  });
});

table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script type="text/html" id='table-data'>
  <% _.each(countries, function(country, key, list){ %>
    <tr>
      <td> <%= country.name %> </td>
      <td> <%= country.population %> </td>
    </tr>
    <% }) %>
</script>

Solution Using ExtJS (4.2)

I went ahead and also created a solution using Ext JS.

Ext.onReady(function() {
  var tpl = new Ext.XTemplate(
    '<table class="view_table">',
      '<thead>',
        '<tr>',
          '<th>Name</th>',
          '<th>Population</th>',
        '</tr>',
      '</thead>',
      '<tbody>',    
        '<tpl for=".">',    
          '<tr>',
            '<td>{name}</td>',
            '<td>{population}</td>',
          '</tr>',
        '</tpl>', 
      '</tbody>',
    '</table>'
  );
  
  Ext.data.JsonP.request({
    url: 'http://beta.json-generator.com/api/json/get/CK4M2Hk',
    params : {
      callback : 'Ext.data.JsonP.callback1'
    },
    method: 'GET',
    callback: function(success, response, data) {
      Ext.get(Ext.dom.Query.select('#country-grid')).setHTML(tpl.apply(response));
    }
  });
});

body {
  background: #FFF !important;
}
table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune-debug.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>

<div id="country-grid"></div>

Solution Using ExtJS (4.2) Using a DataView

This is a more advanced and complete ExtJS template example. A DataView, Model, and Store are used to store and display the data in the template.

var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=Ext.data.JsonP.callback1';

Ext.onReady(function() {
  Ext.define('app.model.Country', {
    extend: 'Ext.data.Model',
    fields: [{
      name: 'name',
      type: 'string'
    }, {
      name: 'population',
      type: 'int'
    }]
  });

  Ext.create('Ext.data.Store', {
    storeId: 'countryStore',
    model: 'app.model.Country',
    autoLoad: true,
    proxy: {
      type: 'jsonp',
      url: jsonDataUrl,
      reader: {
        type: 'json'
      }
    }
  });

  var tpl = new Ext.XTemplate(
    '<table class="view_table">',
      '<thead>',
        '<tr>',
          '<th>Name</th>',
          '<th>Population</th>',
        '</tr>',
      '</thead>',
      '<tbody>',    
        '<tpl for=".">',    
          '<tr>',
            '<td>{name}</td>',
            '<td>{population}</td>',
          '</tr>',
        '</tpl>', 
      '</tbody>',
    '</table>'
  );
  
  Ext.create('Ext.DataView', {
    width    : 500,
    height   : 200,
    renderTo : 'countryApp',
    store    : Ext.getStore('countryStore'),
    tpl      : tpl    
  });
});

body {
  background: #FFF !important;
}
table {
  background: #DDD;
}
thead tr {
  background: #9D9;
}
tbody tr:nth-child(2n) {
  background: #CFC;
}
tbody tr:nth-child(2n+1) {
  background: #EFE;
}
th, td {
  width: 100px;
  padding: 0.2em;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune-debug.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>

<div id="countryApp"></div>

---

The JSON data was generated using this generator function: http://beta.json-generator.com/CK4M2Hk

Answer 3

You can also put this json in a file on your server and load it using script tag.

<script src="my.js"></script>

And load this file before the script in which you are using it.

my.js

var myJson = [{.....}]; // My long json