如何在JSFiddle中链接外部json文件？

时间：2015-05-27 14:06:58

标签： javascript json angularjs 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？

6 个答案:

答案 0 :(得分：3)

JSFiddle不允许您上传JSON文件来发出AJAX请求。您将需要一些其他方式来托管文件，以便您可以调用它们。最好的办法是将它们上传到外部服务器上，最好是你的服务器。

JSON-P救援！

由于文件将在jsfiddle.net域之外托管，因此您需要制作CORS request或更简单的解决方案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生成相同的ouptup。

使用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 :(得分：3)

第1步

转到http://myjson.com/

我粘贴在我的json数据中并点击保存 然后我会得到一个链接：

  

<强> https://api.myjson.com/bins/3ffb0

enter image description here

第2步

现在我有了这个URL，我就像这样使用它

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

My Result

像魅力一样工作。没有抱怨。 ：d

答案 2 :(得分：1)

您也可以将此json放入服务器上的文件中，然后使用script代码加载它。

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

在您使用它的脚本之前加载此文件。

my.js 

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

答案 3 :(得分：0)

您无法将本地创建的.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除外，如果这是在您的项目中，您只需要指向正确的目录。

答案 4 :(得分：0)

您实际上可以在the jsfiddle documentation中使用本地创建的json：

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

这不是我的代码，无论如何都是他们的小提琴;）在这里：

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

EDIT2

  

如何在我的代码中使用您的代码？

好吧，你可以实际使用他们的代码，因为你的目标是使用jsfiddle。这是json的一部分：

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

我将ul变成了这样的表：

<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先生CSS表的小提琴; P

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

答案 5 :(得分：0)

如果您将JSON文件放在GitHub中，您也可以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 来实现它。

相关问题
最新问题