jquery - How to show all content and why can't filter by id -

 <div class="filter hidden-xs hidden-sm hidden-md">       <a href="?type=all" id="all">view all</a>       <a href="?type=zoologist" id="zoologist">zoologist</a>       <a href="?type=hobbyist" id="hobbyist">hobbyist</a>       <a href="?type=judge" id="judge">judge</a>   </div>  <div id="accordion"></div> 

json

 var jsonobject = [     {       "name": "jonathan suh",       "type": "zoologist, hobbyist"     },     {       "name": "william philbin",       "type": "judge, hobbyist"     },     {       "name": "allison mckinnery",       "type": "hobbyist"     }   ]; 

jquery

 $('.filter a').on('click', function(e){                e.preventdefault();               var filter = $(this).attr('id');                $.ajax({                 type: 'get',                 url: 'http://path/to/example.json,                 datatype: 'json',                 data: {"type" : filter},                 cache: false,                 beforesend: function(){                   console.log('loading');                 },                 success: function(response){                   console.log('success');                   var details = '';                   (var key in response) {                     if (response.hasownproperty(key)) {                        details+='<h1 class="name">' + response[key]["name"] + '</h1>';                       details+='<div class="accordion-content row">'+response[key]["gender"]'</div>';                      }                   }                    $('#accordion').html(details).fadein();                  },                 error: function (jqxhr, textstatus, errorthrown) {                   console.log('xhr ' + jqxhr);                   console.log('status ' + textstatus);                   console.log('error ' + errorthrown);                 },                 complete: function(){                   console.log('finished tasks');                 }              });        }); 

js fiddle

worked on $.ajax , somehow works showing accordion content. there 2 or 3 problems couldn't around.

at first thought matching window.location.search ended trying filter id instead.

1. you notice put data: {"type" : filter} name json , compare 'filter'. not anything. why? how filter type in json , find info filtered type?

2. when first load page, doesn't show content in accordion area. problem json processed via $.ajax. there possible way show content outside $.ajax? not want repeat content if same code inside $.ajax

since seems clear you're not sending "data" anywhere, you'll have filter result/response.

also, solve second question - can put ajax in function, , call function both on "click" , on "page load".

function loadmyjson(filter) {   $.ajax({     type: 'get',     url: 'http://path/to/example.json',     datatype: 'json',     cache: false,     beforesend: function() {         console.log('loading');     },     success: function(response) {         console.log('success, filtering response...');          //filter returned json "filter"                     var filteredjson = $(response).filter(function (i,n) {              return n.type === filter;          });          var details = '';         (var key in filteredjson) {             if (filteredjson.hasownproperty(key)) {               details+='<h1 class="name">' + filteredjson[key]["name"] + '</h1>';               details+='<div class="accordion-content row">'+filteredjson[key]["gender"]'</div>';             }         }         $('#accordion').html(details).fadein();     },     error: function (jqxhr, textstatus, errorthrown) {         console.log('xhr ' + jqxhr);         console.log('status ' + textstatus);         console.log('error ' + errorthrown);     },     complete: function(){         console.log('finished tasks');     }  }); }  $('.filter a').on('click', function(e) {     e.preventdefault();     loadmyjson($(this).attr('id')); }  loadmyjson('all'); //this initial page load