如何在 JSFiddle 中 link 外部 json 文件?
How can I link external json file in JSFiddle?
- 我有一个很长的 .json 文件
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
如何在我的 jsfiddle 中使用 json?
您无法将本地创建的 .json
文件加载到 Fiddler 中。
我在这里放了一个我在网上找到的.json文件,你可以看到数据来自它(也进入控制台)。
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,如果这是在您的项目中,您只需要让它指向正确的目录。
您也可以将此 json
放入您服务器上的一个文件中,然后使用 script
标签加载它。
<script src="my.js"></script>
并在您使用它的脚本之前加载此文件。
my.js
var myJson = [{.....}]; // My long json
您实际上可以使用本地创建的 json
,在 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();
};
编辑1
这不是我的代码,反正是他们的 fiddle ;) 这里:
http://jsfiddle.net/zalun/QsHw4/light/
编辑2
How do use your code with my code ?
好吧,你实际上可以使用他们的代码,因为你的目标是使用 jsfiddle。这是您 json
:
的一部分
http://jsfiddle.net/QsHw4/6348/
我把 ul
变成了 table 这样的:
<table>
<thead>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
</thead>
<tbody id="post">
<tr>
<td>Lalaland</td>
<td>0</td>
</tr>
</tbody>
</table>
这是与 Polywhirl 先生的 fiddle CSS table ;P
JSFiddle 不允许您上传 JSON 文件来发出 AJAX 请求。您将需要有一些其他方式来托管文件,以便您可以调用它们。最好的办法是将它们上传到外部服务器,最好是您自己的服务器。
JSON-P来救援!
由于文件将托管在 jsfiddle.net 域之外,您将需要进行 CORS request or, a simpler solution, a JSON-P request,这允许您进行跨域 AJAX 请求以检索JSON数据。
如果我无法托管文件怎么办?
在您自己的网络上访问 JSON 文件应该没有问题。由于这是一个 JSFiddle 问题,您只能按照上面的建议进行操作。有人建议 JSFiddle 模拟 AJAX 请求,但这仍然需要您将 JSON 直接粘贴到编辑器中。如果您不能在外部托管 JSON,您至少可以将其包装在脚本末尾的函数中。这将使它远离视线,因此您不必滚动浏览它。
这是一个 JSFiddle,使用您提供的 JSON 演示他们的模拟 AJAX 功能:http://jsfiddle.net/MrPolywhirl/QsHw4/6352/
注意: 如果您使用的是 HTTPS 连接,则无法在 JSFiddle 中通过 HTTP 调用文件。如果您的请求无法使用 HTTPS 调用,您将需要寻找其他方式来访问该文件。
使用模板语言的解决方案
这里有两个示例,一个在 Angular 中,一个在 jQuery 中,它们使用 JSON-P.
产生相同的输出。
解决方案使用Angular
使用外部托管的 JSON 文件:
http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK
您可以在 Angular JS 中发出 JSONP 请求,如下所示:
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>
解决方案使用jQuery
如果您不熟悉 Angular,这里有一个 jQuery 实现。
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>
使用 HandlebarsJS 的解决方案
类似于 jQuery 示例,只是我们使用模板而不是插入 DOM 元素。
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>
使用 UnderscoreJS 的解决方案
HandlebarsJS 示例的替代模板。
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>
使用 ExtJS (4.2) 的解决方案
我继续使用 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>
使用 ExtJS 的解决方案 (4.2) 使用 DataView
这是一个更高级更完整的ExtJS模板示例。 DataView、Model 和 Store 用于存储和显示模板中的数据。
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>
JSON 数据是使用此生成器函数生成的:http://beta.json-generator.com/CK4M2Hk
第 1 步
我粘贴了我的 json 数据并点击保存
然后我会得到一个 link:
第 2 步
既然我有了 URL,我就这样使用它
$http.get('https://api.myjson.com/bins/3ffb0').success(function(data) {
$scope.countries = data;
});
My Result
像魅力一样工作。没有抱怨。 :D
如果将 JSON 文件放入 GitHub you may also Pass response directly from GitHub Repository.
您的 JSON 文件必须命名为 demo.response.json
并按如下方式调用它
/gh/get/response.json/{github_tree}/
例如我这里有 JSON 文件
https://github.com/chetabahana/chetabahana.github.io/blob/master/_data/demo.response.json
然后在 JSFiddle 中,您可以使用 Ajax 获取数据,如下所示:
HTML
<p>Result will appear below with 1 sec delay</p>
<div id="demo"><p>This text will be replaced</p></div>
JS(选择Mootools框架之一)
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();
})
注意:没有提供 JSONP 功能。人们可以使用 raw GitHub URL.
来实现它
- 我有一个很长的 .json 文件
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
如何在我的 jsfiddle 中使用 json?
您无法将本地创建的 .json
文件加载到 Fiddler 中。
我在这里放了一个我在网上找到的.json文件,你可以看到数据来自它(也进入控制台)。
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,如果这是在您的项目中,您只需要让它指向正确的目录。
您也可以将此 json
放入您服务器上的一个文件中,然后使用 script
标签加载它。
<script src="my.js"></script>
并在您使用它的脚本之前加载此文件。
my.js
var myJson = [{.....}]; // My long json
您实际上可以使用本地创建的 json
,在 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();
};
编辑1
这不是我的代码,反正是他们的 fiddle ;) 这里:
http://jsfiddle.net/zalun/QsHw4/light/
编辑2
How do use your code with my code ?
好吧,你实际上可以使用他们的代码,因为你的目标是使用 jsfiddle。这是您 json
:
http://jsfiddle.net/QsHw4/6348/
我把 ul
变成了 table 这样的:
<table>
<thead>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
</thead>
<tbody id="post">
<tr>
<td>Lalaland</td>
<td>0</td>
</tr>
</tbody>
</table>
这是与 Polywhirl 先生的 fiddle CSS table ;P
JSFiddle 不允许您上传 JSON 文件来发出 AJAX 请求。您将需要有一些其他方式来托管文件,以便您可以调用它们。最好的办法是将它们上传到外部服务器,最好是您自己的服务器。
JSON-P来救援!
由于文件将托管在 jsfiddle.net 域之外,您将需要进行 CORS request or, a simpler solution, a JSON-P request,这允许您进行跨域 AJAX 请求以检索JSON数据。
如果我无法托管文件怎么办?
在您自己的网络上访问 JSON 文件应该没有问题。由于这是一个 JSFiddle 问题,您只能按照上面的建议进行操作。有人建议 JSFiddle 模拟 AJAX 请求,但这仍然需要您将 JSON 直接粘贴到编辑器中。如果您不能在外部托管 JSON,您至少可以将其包装在脚本末尾的函数中。这将使它远离视线,因此您不必滚动浏览它。
这是一个 JSFiddle,使用您提供的 JSON 演示他们的模拟 AJAX 功能:http://jsfiddle.net/MrPolywhirl/QsHw4/6352/
注意: 如果您使用的是 HTTPS 连接,则无法在 JSFiddle 中通过 HTTP 调用文件。如果您的请求无法使用 HTTPS 调用,您将需要寻找其他方式来访问该文件。
使用模板语言的解决方案
这里有两个示例,一个在 Angular 中,一个在 jQuery 中,它们使用 JSON-P.
产生相同的输出。解决方案使用Angular
使用外部托管的 JSON 文件:
http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK
您可以在 Angular JS 中发出 JSONP 请求,如下所示:
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>
解决方案使用jQuery
如果您不熟悉 Angular,这里有一个 jQuery 实现。
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>
使用 HandlebarsJS 的解决方案
类似于 jQuery 示例,只是我们使用模板而不是插入 DOM 元素。
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>
使用 UnderscoreJS 的解决方案
HandlebarsJS 示例的替代模板。
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>
使用 ExtJS (4.2) 的解决方案
我继续使用 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>
使用 ExtJS 的解决方案 (4.2) 使用 DataView
这是一个更高级更完整的ExtJS模板示例。 DataView、Model 和 Store 用于存储和显示模板中的数据。
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>
JSON 数据是使用此生成器函数生成的:http://beta.json-generator.com/CK4M2Hk
第 1 步
我粘贴了我的 json 数据并点击保存 然后我会得到一个 link:
第 2 步
既然我有了 URL,我就这样使用它
$http.get('https://api.myjson.com/bins/3ffb0').success(function(data) {
$scope.countries = data;
});
My Result
像魅力一样工作。没有抱怨。 :D
如果将 JSON 文件放入 GitHub you may also Pass response directly from GitHub Repository.
您的 JSON 文件必须命名为 demo.response.json
并按如下方式调用它
/gh/get/response.json/{github_tree}/
例如我这里有 JSON 文件
https://github.com/chetabahana/chetabahana.github.io/blob/master/_data/demo.response.json
然后在 JSFiddle 中,您可以使用 Ajax 获取数据,如下所示:
HTML
<p>Result will appear below with 1 sec delay</p>
<div id="demo"><p>This text will be replaced</p></div>
JS(选择Mootools框架之一)
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();
})
注意:没有提供 JSONP 功能。人们可以使用 raw GitHub URL.
来实现它