How to add local json file in jsfiddle?

Question

How can I add a JSON file in jsfiddle? I have a JSON file but I am not able to attach it in jsfiddle. I can make a JSON object and use it, but is there any way to add an external JSON file to a fiddle?

Answer 1

Myjson.com provides api, which runs in Jsfiddle.net.

Custom my myjson:

// Loading JSON  with CROS

var url = 'https://api.myjson.com/bins/3ko1q';
$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
        alert('success');
        console.log(data);
    },
    error: function (e) {
        alert('error');
        console.log(e);

    }
});

Myjson GET Example:

// 1. Create valid uri via POST
// 2. GET using newly created uri

var obj = {
    "key": "value",
    "key2": "value2"
};
var data = JSON.stringify(obj);

$("#clickMe").click(function () {
    $.ajax({
        url: "https://api.myjson.com/bins",
        type: "POST",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            // load created json
            $.get(data.uri, function (data, textStatus, jqXHR) {
                var json = JSON.stringify(data);
                $("#data").val(json);
            });

        }
    });
});

Answer 2

You can harness the power of Cross-Origin Resource Sharing (CORS) to achieve your task.

Basically how CORS works is that if the Access-Control-Allow-Orign header is set in the HTTP response, then the content loaded by AJAX can be used in our script regardless of the fact it is on the same domain or some other.

Now for your purpose, you can upload your local JSON file to Dropbox's Public folder and get a Public URL, that you can load by a simple AJAX call.

The AJAX call will succeed in this case because Dropbox sets the following value in the response Access-Control-Allow-Orign:* which means any domain can use the loaded content.

Jquery code will be something like this(you can even use pure JavaScript if you prefer ).

var url = 'https://dl.dropboxusercontent.com/u/94145612/example.json';
var myJsonData= {};
$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
        alert('success');
        console.log(data);
        myJsonData= data;
    },
    error: function (e) {
        alert('error');
        console.log(e);

    }
});

Example JSFiddle

Answer 3

Based on your comment, you want to use a pure JSON file as an external resource in a jsFiddle. You can't do this, because pure JSON is not JavaScript. Say you try to include http://example.com/foo.json as an external resource, and that file contains the following:

{"foo":"bar"}

This will result in Uncaught SyntaxError: Unexpected token :, because the JSON object is not valid JavaScript by itself.

But if you assign the JSON object to a variable, like so:

var foo = {"foo":"bar"};

then no problem.

Solution: use a modified version of your file to initialize a variable for use in the jsFiddle.