javascript - 在同一函数中访问 jquery 中不同级别的嵌套 JSON 值

Question

我想要实现的目标:
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"
  }
}

Answer 1

http://jsbin.com/buxotecowa/1/确保您的代码不包含语法错误(发现 js 中缺少分号，json 中缺少冒号)