Как добавить локальный файл json в jsfiddle?

Ответ 1

Для достижения своей цели вы можете использовать Совместное использование ресурсов (CORS).

В основном, как работает CORS, если заголовок Access-Control-Allow-Orign задан в ответе HTTP, тогда содержимое, загруженное AJAX, может использоваться в нашем script, независимо от того, находится ли он в том же домене или какой-либо другой.

Теперь для вашей цели вы можете загрузить локальный файл JSON в папку Dropbox Public и получить общедоступный URL-адрес, который можно загрузить с помощью простого вызова AJAX.

В этом случае вызов AJAX преуспеет, потому что Dropbox устанавливает в ответе Access-Control-Allow-Orign:* следующее значение, что означает, что любой домен может использовать загруженный контент.

Код JQuery будет чем-то вроде этого (вы даже можете использовать чистый JavaScript, если хотите).

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);

    }
});

Пример JSFiddle

Ответ 2

Myjson.com предоставляет api, который работает в Jsfiddle.net.

Пользовательский myjjson:

// 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:

// 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);
            });

        }
    });
});

Ответ 3

На основе вашего комментария вы хотите использовать чистый JSON файл в качестве внешнего ресурса в jsFiddle. Вы не можете этого сделать, потому что чистый JSON - это не JavaScript. Предположим, вы пытаетесь включить http://example.com/foo.json в качестве внешнего ресурса, и этот файл содержит следующее:

{"foo":"bar"}

Это приведет к Uncaught SyntaxError: Unexpected token :, поскольку объект JSON сам по себе недействителен JavaScript.

Но если вы назначаете объект JSON переменной, например:

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

тогда никаких проблем.

Решение: используйте модифицированную версию вашего файла для инициализации переменной для использования в jsFiddle.