Javascript 仅在选择过滤器时显示JSON的结果 客观的

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

默认情况下，我不希望加载任何内容。选择状态后，应填充这些结果

背景 我有一个位置选择功能，我在这方面的工作

它使用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();
});

可以使用按状态筛选结果。它在这个脚本上运行

$(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

，以便它能够工作。我读到关于这是一个糟糕的做法在学校

这让我学会了观察一个世界。但即使实现了这一点，我仍然对如何在需要时显示所需数据感到困惑。我认为通过查看，我的思路是正确的，但希望得到一些额外的帮助。

您只需使用

$（“#states>div”）.hide（）

在加载数据后立即隐藏数据：

$（'#states'）.html（html）

您可以在此处查看叉子：

至于获取JSON文件，您只需将其与任何文件类型一起返回即可。如果只是纯JSON输出，则不必使用
.js
扩展。JSON只是Javascript对象的一种字符串化表示，所以将JSON作为一个对象处理是很好的。事实上这就是你应该做的。JSON=JavaScript对象表示法