All geek questions in one place

How to link external json file in JSFiddle?

  • I have a very long .json country.json file.
 [ { "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 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 Democratic Republic", "population": 6396000 }, { "name": "Malaysia", "population": 28276000 }, { "name": "Myanmar", "population": 51931000 }, { "name": "Philippines", "population": 93444000 }, { "name": "Singapore", "population": 5079000 }, { "name": "Thailand", "population": 66402000 }, { "name": "Timor-Leste", "population": 1079000 }, { "name": "Viet Nam", "population": 89047000 }, { "name": "Western Asia", "population": 231671000 }, { "name": "Armenia", "population": 2963000 }, { "name": "Azerbaijan", "population": 9095000 }, { "name": "Bahrain", "population": 1252000 }, { "name": "Cyprus", "population": 1104000 }, { "name": "Georgia", "population": 4389000 }, { "name": "Iraq", "population": 30962000 }, { "name": "Israel", "population": 7420000 }, { "name": "Jordan", "population": 6455000 }, { "name": "Kuwait", "population": 2992000 }, { "name": "Lebanon", "population": 4341000 }, { "name": "Oman", "population": 2803000 }, { "name": "Qatar", "population": 1750000 }, { "name": "Saudi Arabia", "population": 27258000 }, { "name": "State of Palestine", "population": 4013000 }, { "name": "Syrian Arab Republic", "population": 21533000 }, { "name": "Turkey", "population": 72138000 }, { "name": "United Arab Emirates", "population": 8442000 }, { "name": "Yemen", "population": 22763000 }, { "name": "EUROPE", "population": 740308000 }, { "name": "Eastern Europe", "population": 296183000 }, { "name": "Belarus", "population": 9491000 }, { "name": "Bulgaria", "population": 7389000 }, { "name": "Czech Republic", "population": 10554000 }, { "name": "Hungary", "population": 10015000 }, { "name": "Poland", "population": 38199000 }, { "name": "Republic of Moldova", "population": 3573000 }, { "name": "Romania", "population": 21861000 }, { "name": "Russian Federation", "population": 143618000 }, { "name": "Slovakia", "population": 5433000 }, { "name": "Ukraine", "population": 46050000 }, { "name": "Northern Europe", "population": 98795000 }, { "name": "Channel Islands", "population": 160000 }, { "name": "Denmark", "population": 5551000 }, { "name": "Estonia", "population": 1299000 }, { "name": "Faeroe Islands", "population": 50000 }, { "name": "Finland", "population": 5368000 }, { "name": "Iceland", "population": 318000 }, { "name": "Ireland", "population": 4468000 }, { "name": "Isle of Man", "population": 84000 }, { "name": "Latvia", "population": 2091000 }, { "name": "Lithuania", "population": 3068000 }, { "name": "Norway", "population": 4891000 }, { "name": "Sweden", "population": 9382000 }, { "name": "United Kingdom", "population": 62066000 }, { "name": "Southern Europe", "population": 154712000 }, { "name": "Albania", "population": 3150000 }, { "name": "Andorra", "population": 78000 }, { "name": "Bosnia and Herzegovina", "population": 3846000 }, { "name": "Croatia", "population": 4338000 }, { "name": "Gibraltar", "population": 29000 }, { "name": "Greece", "population": 11110000 }, { "name": "Holy See", "population": 1000 }, { "name": "Italy", "population": 60509000 }, { "name": "Malta", "population": 425000 }, { "name": "Montenegro", "population": 620000 }, { "name": "Portugal", "population": 10590000 }, { "name": "San Marino", "population": 31000 }, { "name": "Serbia", "population": 9647000 }, { "name": "Slovenia", "population": 2054000 }, { "name": "Spain", "population": 46182000 }, { "name": "TFYR Macedonia", "population": 2102000 }, { "name": "Western Europe", "population": 190618000 }, { "name": "Austria", "population": 8402000 }, { "name": "Belgium", "population": 10941000 }, { "name": "France", "population": 63231000 }, { "name": "Germany", "population": 83017000 }, { "name": "Liechtenstein", "population": 36000 }, { "name": "Luxembourg", "population": 508000 }, { "name": "Monaco", "population": 37000 }, { "name": "Netherlands", "population": 16615000 }, { "name": "Switzerland", "population": 7831000 }, { "name": "LATIN AMERICA AND THE CARIBBEAN", "population": 596191000 }, { "name": "Caribbean", "population": 41625000 }, { "name": "Anguilla", "population": 14000 }, { "name": "Antigua and Barbuda", "population": 87000 }, { "name": "Aruba", "population": 102000 }, { "name": "Bahamas", "population": 360000 }, { "name": "Barbados", "population": 280000 }, { "name": "British Virgin Islands", "population": 27000 }, { "name": "Caribbean Netherlands", "population": 18000 }, { "name": "Cayman Islands", "population": 56000 }, { "name": "Cuba", "population": 11282000 }, { "name": "Curaçao", "population": 148000 }, { "name": "Dominica", "population": 71000 }, { "name": "Dominican Republic", "population": 10017000 }, { "name": "Grenada", "population": 105000 }, { "name": "Guadeloupe", "population": 459000 }, { "name": "Haiti", "population": 9896000 }, { "name": "Jamaica", "population": 2741000 }, { "name": "Martinique", "population": 401000 }, { "name": "Montserrat", "population": 5000 }, { "name": "Puerto Rico", "population": 3710000 }, { "name": "Saint Kitts and Nevis", "population": 52000 }, { "name": "Saint Lucia", "population": 177000 }, { "name": "Saint Vincent and the Grenadines", "population": 109000 }, { "name": "Sint Maarten (Dutch part)", "population": 43000 }, { "name": "Trinidad and Tobago", "population": 1328000 }, { "name": "Turks and Caicos Islands", "population": 31000 }, { "name": "United States Virgin Islands", "population": 106000 }, { "name": "Central America", "population": 160546000 }, { "name": "Belize", "population": 309000 }, { "name": "Costa Rica", "population": 4670000 }, { "name": "El Salvador", "population": 6218000 }, { "name": "Guatemala", "population": 14342000 }, { "name": "Honduras", "population": 7621000 }, { "name": "Mexico", "population": 117886000 }, { "name": "Nicaragua", "population": 5822000 }, { "name": "Panama", "population": 3678000 }, { "name": "South America", "population": 394021000 }, { "name": "Argentina", "population": 40374000 }, { "name": "Bolivia (Plurinational State of)", "population": 10157000 }, { "name": "Brazil", "population": 195210000 }, { "name": "Chile", "population": 17151000 }, { "name": "Colombia", "population": 46445000 }, { "name": "Ecuador", "population": 15001000 }, { "name": "Falkland Islands (Malvinas)", "population": 3000 }, { "name": "French Guiana", "population": 231000 }, { "name": "Guyana", "population": 786000 }, { "name": "Paraguay", "population": 6460000 }, { "name": "Peru", "population": 29263000 }, { "name": "Suriname", "population": 525000 }, { "name": "Uruguay", "population": 3372000 }, { "name": "Venezuela (Bolivarian Republic of)", "population": 29043000 }, { "name": "NORTHERN AMERICA", "population": 346501000 }, { "name": "Bermuda", "population": 65000 }, { "name": "Canada", "population": 34126000 }, { "name": "Greenland", "population": 57000 }, { "name": "Saint Pierre and Miquelon", "population": 6000 }, { "name": "United States of America", "population": 312247000 }, { "name": "OCEANIA", "population": 36659000 }, { "name": "Australia/New Zealand", "population": 26773000 }, { "name": "Australia", "population": 22404000 }, { "name": "New Zealand", "population": 4368000 }, { "name": "Melanesia", "population": 8729000 }, { "name": "Fiji", "population": 861000 }, { "name": "New Caledonia", "population": 246000 }, { "name": "Papua New Guinea", "population": 6859000 }, { "name": "Solomon Islands", "population": 526000 }, { "name": "Vanuatu", "population": 236000 }, { "name": "Micronesia", "population": 498000 }, { "name": "Guam", "population": 159000 }, { "name": "Kiribati", "population": 98000 }, { "name": "Marshall Islands", "population": 52000 }, { "name": "Micronesia (Fed. States of)", "population": 104000 }, { "name": "Nauru", "population": 10000 }, { "name": "Northern Mariana Islands", "population": 54000 }, { "name": "Palau", "population": 20000 }, { "name": "Polynesia", "population": 660000 }, { "name": "American Samoa", "population": 56000 }, { "name": "Cook Islands", "population": 20000 }, { "name": "French Polynesia", "population": 268000 }, { "name": "Niue", "population": 1000 }, { "name": "Samoa", "population": 186000 }, { "name": "Tokelau", "population": 1000 }, { "name": "Tonga", "population": 104000 }, { "name": "Tuvalu", "population": 10000 }, { "name": "Wallis and Futuna Islands", "population": 14000 } ]

jsfiddle link

How can I use this json in my jsfiddle?

+6
source share
5 answers

Step 1

Go to http://myjson.com/

I inserted json into my data and click save. Then I will get this link:

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

enter image description here

Step 2

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

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

My result

Work like a charm. No complaining .: D

+2
source

JSFiddle does not allow loading JSON files to create AJAX requests. You will need another way to place the files so you can call them. It is best to upload them to an external server, preferably yours.

JSON-P for salvation!

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

What if I can’t post the file?

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

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

NOTE. You cannot call a file via HTTP in a JSFiddle if you use their HTTPS connection. If you cannot make a call using HTTPS, you will need to find another way to access the file.

Solutions Using Template Languages

Here is a towing example: one in Angular and one in jQuery, which produces the same popup using JSON-P.

Solution Using Angular

Using an external JSON file hosted on the side:

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

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

 var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK'; var countryApp = angular.module('countryApp', []); countryApp.controller('CountryCtrl', function($scope, $http) { $http.jsonp(jsonDataUrl) .success(function(data) { console.log(data); $scope.countries = data; }); }); 
 table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="countryApp"> <div ng-controller="CountryCtrl"> <table> <thead> <tr> <th>Country</th> <th>Population</th> </tr> </thead> <tbody> <tr ng-repeat="country in countries"> <td>{{country.name}}</td> <td>{{country.population}}</td> </tr> </tbody> </table> </div> </div>

Solution Using jQuery

If you are new to Angular, here is a jQuery implementation.

 var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=JSON_CALLBACK'; $(function() { $.ajax({ type: 'GET', url: jsonDataUrl, async: false, jsonpCallback: 'JSON_CALLBACK', contentType: "application/json", dataType: 'jsonp', success: function(data) { addRows($('#countryTable'), data, ['name','population']); }, error: function(e) { console.log(e.message); } }); }); function addRows(table, data, fields) { var tbody = table.find('tbody'); $.each(data, function(i, item) { tbody.append(addRow(item, fields)); }); return tbody; } function addRow(item, fields) { var row = $('<tr>'); $.each(fields, function(i, field) { row.append($('<td>').html(item[field])); }); return row; } 
 table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="countryTable"> <thead> <tr> <th>Country</th> <th>Population</th> </tr> </thead> <tbody> </tbody> </table>

Solution using HandlebarsJS

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

 var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk'; $(function() { var theTemplateScript = $("#country-template").html(); // Grab the template script var theTemplate = Handlebars.compile(theTemplateScript); // Compile the template $.ajax({ type: 'GET', url: jsonDataUrl, async: false, jsonpCallback: 'JSON_CALLBACK', contentType: "application/json", dataType: 'jsonp', success: function(data) { var theCompiledHtml = theTemplate(data); // Pass our data to the template $('body').append(theCompiledHtml); // Add the compiled html to the page }, error: function(e) { console.log(e.message); } }); }); 
 table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> <script id="country-template" type="text/x-handlebars-template"> <table> <thead> <tr> <th>Country</th> <th>Population</th> </tr> </thead> <tbody> {{#each .}} <tr> <td>{{name}}</td> <td>{{population}}</td> </tr> {{/each}} </tbody> </table> </script>

Solution Using UnderscoreJS

Alternative template for example 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>

Solution Using ExtJS (4.2)

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

 Ext.onReady(function() { var tpl = new Ext.XTemplate( '<table class="view_table">', '<thead>', '<tr>', '<th>Name</th>', '<th>Population</th>', '</tr>', '</thead>', '<tbody>', '<tpl for=".">', '<tr>', '<td>{name}</td>', '<td>{population}</td>', '</tr>', '</tpl>', '</tbody>', '</table>' ); Ext.data.JsonP.request({ url: 'http://beta.json-generator.com/api/json/get/CK4M2Hk', params : { callback : 'Ext.data.JsonP.callback1' }, method: 'GET', callback: function(success, response, data) { Ext.get(Ext.dom.Query.select('#country-grid')).setHTML(tpl.apply(response)); } }); }); 
 body { background: #FFF !important; } table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune-debug.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script> <div id="country-grid"></div>

Solution Using ExtJS (4.2) Using DataView

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

 var jsonDataUrl = 'http://beta.json-generator.com/api/json/get/CK4M2Hk?indent=2&callback=Ext.data.JsonP.callback1'; Ext.onReady(function() { Ext.define('app.model.Country', { extend: 'Ext.data.Model', fields: [{ name: 'name', type: 'string' }, { name: 'population', type: 'int' }] }); Ext.create('Ext.data.Store', { storeId: 'countryStore', model: 'app.model.Country', autoLoad: true, proxy: { type: 'jsonp', url: jsonDataUrl, reader: { type: 'json' } } }); var tpl = new Ext.XTemplate( '<table class="view_table">', '<thead>', '<tr>', '<th>Name</th>', '<th>Population</th>', '</tr>', '</thead>', '<tbody>', '<tpl for=".">', '<tr>', '<td>{name}</td>', '<td>{population}</td>', '</tr>', '</tpl>', '</tbody>', '</table>' ); Ext.create('Ext.DataView', { width : 500, height : 200, renderTo : 'countryApp', store : Ext.getStore('countryStore'), tpl : tpl }); }); 
 body { background: #FFF !important; } table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune-debug.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script> <div id="countryApp"></div>

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

+3
source

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

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

Download this file before the script in which you use it.

my.js

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

You cannot upload a locally generated .json file to Fiddler.

Here I put the .json file that I found on the Internet, and you can see how the data comes from it (to the console as well).

https://jsfiddle.net/v99e25r8/

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

Fiddler aside, if this was part of your project, you just need to indicate that it points to the correct directory.

0
source

In fact, you can use locally generated json , jsfiddle documentation :

 new Request.JSON({ url: '/echo/json/', data: { json: JSON.encode({ text: 'some text', array: [1, 2, 'three'], object: { par1: 'another text', par2: [3, 2, 'one'], par3: {} } }), delay: 3 }, onSuccess: function(response) { show_response(response, $('post')); } }).send(); show_response = function(obj, result) { $H(obj).each(function(v, k) { new Element('li', { text: k + ': ' + v }).inject(result); }); result.highlight(); };

Edit1

This is not my code, this is their violin anyway;) Here:

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

Edit2

How to use code with my code?

Well, you can use your code instead, since your goal is to use jsfiddle. Here is one with part of your json :

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

I turned ul into a table as follows:

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

Here is the fiddle with the CSS table of Mr. Poliverth, P

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

0
source

Source: https://habr.com/ru/post/988016/

More articles:


All Articles