如何使用Javascript搜索特定的JSON密钥值对?

时间:2018-04-12 15:16:12

标签: javascript jquery json ajax

我正在构建一个应用程序,告诉你在你指定的城市中即将发生的事件的天气。我正在使用两个API,一个返回一个对象数组,这些对象通过插入到艺术家中的艺术家对应于每个事件文本输入,另一个返回进入另一个输入的城市的天气。

我正在使用.getJSON方法来检索数据。目前艺术家API返回所有输入的艺术家即将发生的事件,我想搜索事件对象以找到与位置字段的输入匹配的关键“城市”(从天气API加载数据)。 。

var bandData;
var locationData;

$(document).ready(function() {
    $("#get-weather").click(function(e){
        e.preventDefault();
        //prevent empty fields
       if($.trim($('#artist-search').val()) == ''){
          $(".error").css("display", "block").html("input cannot be left 
blank");
       } else {
            $(".error").css("display", "none");
            //artist field
            var artistField = $("#artist-search").val();

$.getJSON("https://rest.bandsintown.com/artists/"+artistField+"/events?
app_id="+bandKey, function(response){
            console.log(response);
            bandData = response;
});
        //location field
        var locationField = $("#location").val();
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?q="+locationField+",us&units=imperial&APPID="+weatherKey, 
        function(data){
            console.log(data);
            locationData = data;
        });
        };

    });
});

JSON:

{
"id": "21023151",
"artist_id": "7931668",
"url": "https://www.bandsintown.com/e/URLinfo",
"on_sale_datetime": "",
"datetime": "2018-04-14T12:00:00",
"description":"",
"venue": {
  "name": "Coachella Music and Arts Festival",
  "latitude": "33.680015",
  "longitude": "-116.23722",
  "city": "Indio",
  "region": "CA",
  "country": "United States"
},
"offers": [
        {
    "type": "Tickets",
    "url": "https://www.bandsintown.com/t/URLinfo",
    "status": "available"
  }
                    ],
"lineup": [
                "Post Malone"
                ]
  }

如何根据用户输入的城市过滤JSON数据?并且,如果没有返回任何内容,请打印“无结果”之类的内容。目前,当我在console.log“bandData”和“locationData”时,我得到一个未定义的值。

1 个答案:

答案 0 :(得分:0)

您可以通过地图/过滤器执行此操作,如下所示

var locationField = $("#location").val();
       $.getJSON("http://api.openweathermap.org/data/2.5/weather?q="+locationField+",us&units=imperial&APPID="+weatherKey, 
                 function(data){
                    var FilteredData = data.filter(fundtion(elem){return (elem.venue.city == locationField) });
                      if(FilteredData.length){
                          console.log(FilteredData );
                          locationData = FilteredData ;
                      }
                      else{
                          console.log("No Data");
                      }
                  });
         };

如果你添加一些错误处理这样的空检查等等,总会很好。