javascript - Accessing different level nested JSON values in jquery in same function -
what i'm trying achieve:
1. page 2 drop down lists , submit button;
2. when user selects values in 1 or both drop lists , clicks on submit;
3. system checks json file (extracted facebook graph api) , displays results values selected in drop list
my issue: i'm able access nested objects parent > child, having trouble figuring out how access when goes deeper level. think issue if statement inside $.getjson
code works when have val.genre.search, when add search location nested doesn't work.. on appreciated.
here js:
<script> $(window).load(function(){ $('#submit').click(function(e){ e.preventdefault(); var searchgenre = $('#genrelist').val(); var regexgenre = new regexp(searchgenre, "i"); var searchcity = $('#citylist').val(); var regexcity = new regexp(searchcity, "i"); var output = '<div class="row">'; var count = 1; $.getjson('mylist.json', function(data) { $.each(data.data, function(key, val){ if ((val.genre.search(regexgenre) != -1) && (val.place.location.city.search(regexcity) != -1) ) { output += '<div class="col-md-6 well">'; output += '<div class="col-md-3"><img class="img-responsive" src="'+val.cover.source+'" alt="'+ val.name +'" /></div>'; output += '<div class="col-md-7">'; output += '<h5>' + val.name + '</h5>'; output += '<p>' + val.place.location.city + '</p>' output += '</div>'; output += '</div>'; if(count%2 == 0){ output += '</div><div class="row">' } count++; } else{ console.log('no results'); } }); output += '</div>'; $('#container').html(output); }); }); }); </script> then html form section:
<form> <select id="genrelist" placeholder="choose"> <option value="">choose below</option> <option value="techno">techno</option> <option value="deephouse">deep house</option> <option value="house">house</option> </select> <select id="citylist" placeholder="choose"> <option value="">choose below</option> <option value="amsterdam">amsterdam</option> <option value="ny">ny</option> <option value="new york">new york</option> </select> <input id="submit" type="submit" value="submit" > </form> and json:
{ "data": [ { "name": "dwftw // invites alex adair 28/05", "start_time": "2015-05-28t23:00:00+0200", "id": "298271357013340", "genre": "techno", "description": "♫ don't wait weekend invites alex adair!", "cover": { "cover_id": "654746394655495", "offset_x": 0, "offset_y": 0, "source": "https://scontent.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/s720x720/10982689_654746394655495_7090395118806704969_n.jpg?oh=8a6b6bb0eba8baa61e163aa6ae6ecf3a&oe=5606eeaf", "id": "654746394655495" }, "owner": { "category": "arts/entertainment/nightlife", "name": "don't wait weekend", "id": "529203590543110" }, "place": { "name": "amstelstraat 24, 1017 da" "location": { "city": "ny", "country": "netherlands", "latitude": 52.366131578049, "longitude": 4.8990026847357, "street": "amstelstraat 16", "zip": "1017 da" }, "id": "331458207061116" } }, { "name": "let's ketchup | every sunday | air amsterdam", "start_time": "2015-05-24t23:30:00+0200", "id": "1596148173931181", "genre": "techno", "description": "let's ketchup every sunday @ air amsterdam!", "cover": { "cover_id": "495622693918034", "offset_x": 0, "offset_y": 0, "source": "https://scontent.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/s720x720/11055730_495622693918034_2744471195546137356_n.jpg?oh=031c47906450b23a74b69625376fdcc9&oe=55f1dac2", "id": "495622693918034" }, "owner": { "category": "event planning/event services", "category_list": [ { "id": "192119584190796", "name": "event" } ], "name": "ketchup", "id": "331458207061116" }, "place": { "name": "ketchup", "location": { "city": "ny", "country": "netherlands", "latitude": 52.366131578049, "longitude": 4.8990026847357, "street": "amstelstraat 16", "zip": "1017 da" }, "id": "331458207061116" } }, { "name": "pacha festival official afterparty", "start_time": "2015-05-23t23:00:00+0200", "id": "649599681853451", "genre": "deep house", "description": "pacha festival offical after party @ air amsterdam\n\n", "cover": { "cover_id": "804183476297247", "offset_x": 7, "offset_y": 0, "source": "https://scontent.xx.fbcdn.net/hphotos-xta1/t31.0-8/s720x720/11133876_804183476297247_5088820164370346139_o.jpg", "id": "804183476297247" }, "owner": { "category": "arts/entertainment/nightlife", "category_list": [ { "id": "133436743388217", "name": "arts & entertainment" }, { "id": "192119584190796", "name": "event" } ], "name": "pacha festival", "id": "250375795011354" }, "place": { "name": "air amsterdam", "location": { "city": "amsterdam", "country": "netherlands", "latitude": 52.366262827569, "longitude": 4.898927791647, "street": "amstelstraat 24", "zip": "1017 da" }, "id": "109020085791036" } } ], "paging": { "cursors": { "before": "mtqymtm2mtgzode2nju5mg==", "after": "njq5ntk5njgxoduzndux" }, "next": "https://graph.facebook.com/v2.3/109020085791036/events?pretty=0&fields=name,start_time,id,description,cover,owner,place&limit=25&after=njq5ntk5njgxoduzndux" } }
http://jsbin.com/buxotecowa/1/ make sure code doesn't contain syntax errors (found missing semicolons in js , missing colon in json)
Comments
Post a Comment