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

Как добавить файл JSON в jsfiddle? У меня есть файл JSON, но я не могу прикрепить его в jsfiddle. Я могу сделать объект JSON и использовать его, но есть ли способ добавить внешний файл JSON в скрипку?

15
javascript jsfiddle json

3 ответов

вы можете использовать силу совместное использование ресурсов перекрестного происхождения (CORS) для достижения ваших задач.

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

теперь для вашей цели вы можете загрузить свой локальный файл 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

12

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

пользовательские мой 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 получить пример:

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

        }
    });
});
13

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

{"foo":"bar"}

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

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

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

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

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

1