仅在选择过滤器时显示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); 。

您可以在此处检出叉子： http : //codepen.io/anon/pen/lBims

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