How can I link external json file in JSFiddle?

2019-03-15 22:30发布

站内文章 / JavaScript

12 0

叼着烟拽天下

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 ?

回答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

回答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

回答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

回答4:

You can't load a locally created .json file into Fiddler.

Here I put a .json file that I found on the web, and you can see the data comes in from it (into the console as well).

https://jsfiddle.net/v99e25r8/

$http.get('https://json-generator.appspot.com/api/json/get/bVQoKFSGNu?indent=2')
    .success(function(data) {
        console.log(data);
        $scope.countries = data;
    });

Fiddler aside, if this was within your project you just need to have it point to the correct directory.

回答5:

You can actually use a locally created json, in the jsfiddle documentation:

new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({
            text: 'some text',
            array: [1, 2, 'three'],
            object: {
                par1: 'another text',
                par2: [3, 2, 'one'],
                par3: {}
            }
        }),
        delay: 3
    },
    onSuccess: function(response) {
        show_response(response, $('post'));
    }
}).send();

show_response = function(obj, result) {
    $H(obj).each(function(v, k) {
        new Element('li', {
            text: k + ': ' + v
        }).inject(result);
    });
    result.highlight();
};

Edit1

It's not my code, it's their fiddle anyway ;) Here:

http://jsfiddle.net/zalun/QsHw4/light/

Edit2

How do use your code with my code ?

Alright, you can actually use their code instead, since your goal is to use jsfiddle. Here's one with part of your json:

http://jsfiddle.net/QsHw4/6348/

I turned the ul into a table like this:

<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>Population</th>
        </tr>
    </thead>
    <tbody id="post">
        <tr>
            <td>Lalaland</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

Here's the fiddle with Mr. Polywhirl CSS table ;P

http://jsfiddle.net/QsHw4/6351/

回答6:

If you put the JSON file in GitHub you may also Pass response directly from GitHub Repository.

Your JSON file must be named demo.response.json and call it as below

/gh/get/response.json/{github_tree}/

For instance I have that JSON file here

https://github.com/chetabahana/chetabahana.github.io/blob/master/_data/demo.response.json

Then in JSFiddle you can get the data using Ajax as below:

HTML

<p>Result will appear below with 1 sec delay</p>
<div id="demo"><p>This text will be replaced</p></div>

JS (Choose one of Mootools Framework)

window.addEvent('domready', function() {
    new Request.HTML({
        url: '/gh/get/response.json/chetabahana/chetabahana.github.io/tree/master/_data/',
        data: {'delay': 1},
        method: 'post',
        update: 'demo',
        onSuccess: function(response) {
            $('demo').highlight();
        }
    }).send();
})

Note: There is no JSONP functionality provided. One may achieve it using raw GitHub URL.

标签： javascript json angularjs jsfiddle