仅在选择过滤器时显示JSON结果

Question

Objective

I want display results only when it's respective state is selected. Currently all results are shown by default when the page loads.

I do not want anything to load by default. When a state is selected then those results should populate.

Background

I have a location selection feature that I am working on at this CodePen .

It used MustacheJS for templating

and is populated by data in a JSON file by this script

$(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);
  });
});

The results can be filtered by state with. It runs on this script

/* 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();
});

Problems

I know that this is sloppy. I am not using pure JSON but actually creating a Javascript object. And even named the file to end with .js so that it would work. I read about how that is a bad practice at http://www.kryptonite-dove.com/blog/load-json-file-locally-using-pure-javascript

That taught me to look into a XMLHttpRequest . But even implementing that I am still confused how to display the data I need when I need it. I think I am on the correct track by looking into the .on() but would appreciate some additional help.

Answer 1

You simply use $('#states > div').hide(); to hide the data right after you load the data: $('#states').html(html); .

You can check out the fork here: http://codepen.io/anon/pen/lBims

As for getting the JSON file, you can simply return it with any file type. You don't have to use a .js extension if it's just pure JSON output. And JSON is just a stringified representation for Javascript objects, so it's fine treating JSON as an object. In Fact that's what you're supposed to do. JSON = JavaScript Object Notation.