AJAXリクエストからJSONデータを取得してランダムな項目を設定する

Question

AJAXリクエストからJSONデータを受信しようとしていて、そこからランダムな項目を表示する方法を見つけようとしています。また、このデータをlocalStorageに保存したいので、それ以降のリクエストはデータベースに送信されないので、ランダム項目はlocalStorageから選択されます。

私のJSONデータは次のようになりますたとえば、このデータを取得する

{ 
    "tennis": [ 
    { 
     "Description": "Insert description here", 
     "Address": "24 Fakeville St", 
     "Courts": 4 
    }, 
    { 
     "Description": "Insert description here", 
     "Address": "18 Fakeville St", 
     "Courts": 2 
    } 
    ], 
    "soccer": [ 
    { 
     "Description": "Insert description here", 
     "Address": "18 Fakeville St", 
     "Courts": 1 
    }, 
    { 
     "Description": "Insert description here", 
     "Address": "18 Fakeville St", 
     "Courts": 1 
    } 
    ], 
    "basketball": [ 
    { 
     "Description": "Insert description here", 
     "Address": "4 Fakeville St", 
     "Courts": 2 
    } 
    ] 
} 

My機能は次のとおりです。

var data; 
function getData() { 
    if (localStorage.getItem('myData')) { 
     data = JSON.parse(localStorage.getItem('myData')); 
    } else { 
     $.ajax({ 
     url: '/getMyData', 
     type: 'GET', 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     async: false, 
     success: function (data) { 
       data = data; 
       showContent(data); 
      } 
     }); 
    } 
    localStorage.setItem('myData', data); 
} 

データが受信されると、私はへのそれを渡したいですshowContent()これはHTMLにそれを入力する関数です。しかし、私がconsole.log(data);を実行すると、Chromeのコンソールにundefinedが表示されます。

ここで私のJSFiddleはhereです。

Answer 1

バックエンドの関数（getMyData）をチェックして、その戻り値nullを修正し、関数を呼び出してJavaScriptからランダムなものを取得します。このような

：

function showContent(aa) { 
    for (var i = 0; i < data.tennis.length; i++) { 
     tennisArray.push(data.tennis[i]); 
     // Show random item from the tennis array 
    } 
    if(tennisArray.length > 0){ 
     var random = getRandomInt(0, tennisArray.length - 1); 
     console.log(tennisArray[random]); 
    } 
} 
function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

https://jsfiddle.net/60jzh5fo/3/

私はあなたのアヤックス復帰せずに機能をテストしてみたし、それが動作しますが、あなたは、バックエンド・リターンと間違っているものは何でも修正する必要があります。

バックエンドの詳細を投稿することができます。私はここで回答を更新できます。

Answer 2

コールバックを処理するためにPromiseを使用します。この方法で、localStorageに存在する場合は即座に解決できます。また、新しい状態にする必要がある場合は別のサイクルで解決できます。

ここ

function getData() { 
    var deferred = $.Deferred(); 

    if (localStorage.getItem('myData')) { 
     deferred.resolve(JSON.parse(localStorage.getItem('myData'))); 
    } else { 
     $.ajax({ 
     ... 
     success: function (data) { 
      localStorage.setItem('myData', JSON.stringify(mockdata)); 
      deferred.resolve(mockdata); 
      } 
     }); 
    } 
    return deferred.promise(); 
} 

getData().then(showContent); 

https://jsfiddle.net/60jzh5fo/4/

Answer 3

// Code goes here 
 
function getData(callback) { 
 
    var local = localStorage.getItem('myData'); 
 
    if (local) { 
 
    callback(JSON.parse(local), 'local'); 
 
    } else { 
 
    $.ajax({ 
 
     url: 'data.json', 
 
     type: 'GET', 
 
     success: function(remote) { 
 
     localStorage.setItem('myData', JSON.stringify(remote)); 
 
     callback(remote, 'remote'); 
 
     } 
 
    }); 
 
    } 
 
} 
 

 
var getJson = function() { 
 
    getData(function(games, source) { 
 
    for (var i = 0; i < 20; i++) { 
 
     var gameNames = Object.keys(games), 
 
     totalGames = gameNames.length, 
 
     randomGameIndex = Math.floor(Math.random() * totalGames), 
 
     randomGame = games[gameNames[randomGameIndex]], 
 
     randomGameItemIndex = Math.floor(Math.random() * randomGame.length), 
 
     randomGameItem = randomGame[randomGameItemIndex]; 
 

 
     console.log("game place: "); 
 
     console.log(randomGameItem); 
 
    } 
 
    }); 
 
};

plunker plunker

は:)