javascript - 从 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
    }
  ]
}

我获取此数据的函数是:

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。

var tennisArray = [];     
function showContent(data) {
    console.log(data);
    for (var i = 0; i < data.tennis.length; i++) {
        tennisArray.push(data.tennis[i]);
        // Show random item from the tennis array
    }
}

我的 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/

我已经在没有 ajax 返回的情况下测试了该函数，它可以工作，但是您需要修复后端返回的任何问题。

您可以发布有关后端的更多详细信息，我可以在此处更新我的答案。