Как связать внешний файл json в 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

как я могу использовать этот json в моем jsfiddle ?

6 ответов


JSFiddle не позволяет загружать файлы JSON для выполнения запросов AJAX. Вам нужно будет иметь какой-то другой способ размещения файлов, чтобы вы могли их вызвать. Лучше всего загрузить их на внешний сервер, желательно ваш.

JSON-P на помощь!

так как файлы будут размещены за пределами jsfiddle.net домен, вам нужно будет либо сделать запрос CORS или, более простое решение, a JSON-P запрос, которым позволяет выполнять междоменные AJAX-запросы для получения данных JSON.

Что делать, если я не могу разместить файл?

доступ к файлу JSON в вашей собственной сети не должен быть проблемой. Поскольку это вопрос JSFiddle, вы можете делать только то, что предложено выше. Кто-то предложил запрос jsfiddle mock AJAX, но для этого все равно требуется вставить JSON непосредственно в Редактор. Если вы не можете разместить JSON извне, по крайней мере, вы можете обернуть его в функцию на конец твоего сценария. Это будет держать его вне поля зрения, так что вам не придется прокручивать его.

вот JSFiddle, демонстрирующий их макет функции AJAX, используя JSON, который вы предоставили:http://jsfiddle.net/MrPolywhirl/QsHw4/6352/

Примечание: вы не можете вызвать файл через HTTP в JSFiddle, если вы используете их HTTPS-соединение. Если вы не можете вызвать запрос с помощью HTTPS, вам нужно будет найти другой способ доступа к файл.


Решения С Использованием Языков Шаблон

вот пример буксировки, один в Angular и один в jQuery, которые производят тот же ouptup с помощью JSON-P.

Решение С Использованием Angular

использование внешнего файла JSON:

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

вы можете сделать запрос JSONP в угловом JS, как Итак:

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, модель и 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

на 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;
    });

Мой Результат

работа как шарм. Нет жаловаться. : D



вы также можете поставить это json в файл на вашем сервере и загрузите его с помощью script - тег.

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

и загрузите этот файл перед скриптом, в котором вы его используете.

мой.js

var myJson = [{.....}]; // My long 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;
    });

скрипач в сторону, если это было в вашем проекте, вам просто нужно указать на правильный каталог.


вы можете использовать локально созданный json, в документация jsfiddle:

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>

вот скрипка с таблицей MR. Polywhirl CSS ;P

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


Если вы поместите файл JSON в GitHub вы можете также передать ответ непосредственно из репозитория GitHub.

ваш файл JSON должен быть назван demo.response.json и называть его, как показано ниже

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

например, у меня есть этот файл JSON вот!--10-->

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 не предоставляется. Один может достичь этого с помощью сырья на GitHub URL-адресом.