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