web-dev-qa-db-ja.com

jsfiddleにローカルjsonファイルを追加する方法は？

JsfiddleにJSONファイルを追加するにはどうすればよいですか？ JSONファイルを持っていますが、jsfiddleに添付できません。 JSONオブジェクトを作成して使用することはできますが、外部JSONファイルをフィドルに追加する方法はありますか？

javascriptjsonjsfiddle
16
Roshan

Cross-Origin Resource Sharing（CORS） の力を利用して、タスクを実行できます。

基本的に、CORSがどのように機能するかは、Access-Control-Allow-OrignヘッダーがHTTP応答に設定されている場合、AJAXによってロードされたコンテンツは、同じドメインまたは他のドメインにあるかどうかに関係なく、スクリプトで使用できます。

これで、目的のために、ローカルJSONファイルをDropboxのPublicフォルダーにアップロードして、単純なAJAX呼び出しでロードできるパブリックURLを取得できます。

この場合、Dropboxは応答に次の値を設定するため、AJAX呼び出しは成功します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
Shiva

Myjson.com は、 Jsfiddle.net で実行されるAPIを提供します。

カスタムmymyjson ：

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

        }
    });
});
13
jezrael

コメントに基づいて、純粋なJSONファイルをjsFiddleの外部リソースとして使用する必要があります。純粋なJSONはJavaScriptではないため、これを行うことはできません。 http://example.com/foo.jsonを外部リソースとして含めようとし、そのファイルに次のものが含まれているとします。

{"foo":"bar"}

JSONオブジェクト自体は有効なJavaScriptではないため、これによりUncaught SyntaxError: Unexpected token :になります。

ただし、JSONオブジェクトを変数に割り当てると、次のようになります。

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

その後、問題ありません。

解決策：ファイルの変更バージョンを使用して、jsFiddleで使用する変数を初期化します。

1
elixenide