Question

以下代码未显示结果。我尝试了几个不同的东西，但我不能断定它是否是导致问题的我的HTML，jQuery或JSON文件（或上述所有文件）。

<div class="leaderboard">
  <div>
    <button id="try_this"> </button>
  </div>
</div>

$(document).ready(function() {
  $('#try_this').click(function() {
    $('results.json').append('<select />');
    $('#results > span').each(function() {
      $('select').append('<option value="' + $(this).text() + '">' + $(this).text() + '</option>');
    });
  });
});

JSON：

{
  "results": [{
    "Date": "October 28th",
    "Gender": "Female",
    "Weather Conditions": "Sunny",
    "Time": 26.03,
    "Name": "Rachel Armstrong"
  }, {
    "Date": "October 28th ",
    "Gender": "Female",
    "Weather Conditions": "Sunny",
    "Time": 29.33,
    "Name": "Christine Porter"
  }, {
    "Date": "October 28th ",
    "Gender": "Male ",
    "Weather Conditions": "Sunny",
    "Time": 31.41,
    "Name": "Keith Crawford"
  }, {
    "Date": "October 28th ",
    "Gender": "Male ",
    "Weather Conditions": "Sunny",
    "Time": 25.16,
    "Name": "Brian Burton"
  }, {
    "Date": "October 28th ",
    "Gender": "Female",
    "Weather Conditions": "Sunny",
    "Time": 29.19,
    "Name": "Ruth Donelly"
  }]
}

任何正确方向的点头都会受到赞赏。

Answer 1

使用$('results.json')，jQuery将尝试查找类型results和类json的元素。您可能希望使用AJAX加载JSON，因此您可以使用以下内容：

$.getJSON('results.json', function(data) { ... });

然后在这里使用data变量来创建元素。例如，您可以使用data.results[0].Date。

使用jQuery将JSON文件附加到HTML

1 个答案: