javascript - 仅当选择过滤器时才显示 JSON 结果

Question

目标

我希望仅在选择相应状态时显示结果。目前，页面加载时默认显示所有结果。

我不想默认加载任何内容。选择某个州后，应填充这些结果。

背景

我正在开发一个位置选择功能 CodePen 。

它使用 MustacheJS 进行模板化

并通过此脚本填充 JSON 文件中的数据

$(function() {
  $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/161741/labs.js', function(data) {
    var template = $('#labsListStates').html();
    var html = Mustache.to_html(template, data);
    $('#states').html(html);
  });
});

结果可以按状态过滤。它在此脚本上运行

/* Filter for locations */
$('#lab-state-select').on('change', function (e) {
  e.preventDefault();
  var cat = $(this).val();
  var nam = $(this).val();
  $('#states > div').hide();
  $('#states > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

问题

我知道这很草率。我没有使用纯 JSON，而是实际上创建了一个 Javascript 对象。甚至将该文件命名为以 .js 结尾，这样它就可以工作了。我在 http://www.kryptonite-dove.com/blog/load-json-file-locally-using-pure-javascript 读到这是一种不好的做法。

这教会我研究 XMLHttpRequest 。但即使实现了这一点，我仍然很困惑如何在需要时显示我需要的数据。我认为通过研究 .on() 我走在正确的轨道上但希望得到一些额外的帮助。

Answer 1

您只需在加载数据后使用 $('#states > div').hide(); 即可隐藏数据: $('#states').html (html);.

您可以在此处查看 fork :http://codepen.io/anon/pen/lBims

对于获取 JSON 文件，您可以简单地以任何文件类型返回它。如果只是纯 JSON 输出，则不必使用 .js 扩展名。 JSON 只是 Javascript 对象的字符串化表示，因此将 JSON 视为对象是很好的。事实上这就是你应该做的。 JSON = JavaScript 对象表示法。