我想要实现的目标:
1.包含两个下拉列表和一个提交按钮的页面;
2.当用户选择一个或两个下拉列表中的值并单击提交时;
3.系统检查JSON文件(从Facebook Graph API中提取)并显示带有在下拉列表中选择的值的结果
我的问题: 我能够访问父>的嵌套对象。孩子,但是当它进入更深层次时无法弄清楚如何访问。 我认为我的问题是$ .getJSON中的if语句 当我只有val.genre.search时,代码工作,但是当我添加搜索深度嵌套的位置时,它不起作用.. 任何有关这方面的帮助将不胜感激。
这是我的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>
然后HTML表单部分:
<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>
我的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 FOR THE 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 For The 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 AT 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"
}
}