如何遍历全局数组并返回用户输入答案

【问题标题】：How to iterate through a global array and return user input如何遍历全局数组并返回用户输入
【发布时间】：2018-05-23 02:07:07
【问题描述】：

我正在尝试使用 Guardian api 构建一个新闻站点，并使用用户输入搜索此 api 以返回每个匹配元素的 webTitle 属性。我知道简单地将用户输入附加到 ajax 调用中将是完成此任务的一种更简单的方法，但我正在寻找一些挑战，所以我决定我可以将 ajax 响应分配给一个全局数组并遍历它以找到用户输入，但我无法遍历数组。

全局数组和ajax调用的代码在这里；

var searchQuery=[];           

                $.ajax({
                    url: 'https://content.guardianapis.com/search?&api-key=xxxx',
                    async: true,
                    dataType: "json",
                    success: function(data){
                        searchQuery.push(data);
                    }
                });

当输出到控制台时，它会显示填充了 ajax 调用中所有元素的数组。

我只是想知道如何获取这个数组，并使用 JQuery，遍历它并检查是否有任何元素包含来自我的应用程序中的输入文本框的用户输入，最好是在单击搜索按钮时，代码在这里;

<div id="search">
                            <div class="input-group col-md-12">
                                <input type="text" class="search-query form-control" placeholder="Search" id= 'userSearch' <a href="#" data-toggle="popover" title="How To Search" data-content="Enter a Key Word and Receive News Stories Associated With It"></a>
                                <span class="input-group-btn">
                                    <button class="btn btn-primary mb1 bg-blue" type="button" id="submitSearch">
                                        <span class=" glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                            </div>
</div>

对此的任何帮助将不胜感激，我相信这只是我对 Web 开发的缺乏经验给我带来了这些问题，所以请不要过多地评判我哈哈。

【问题讨论】：

标签： jquery html arrays ajax

【解决方案1】：

这个怎么样：

$("#submitSearch").on("click", function(){
    var keyword = $("#userSearch").val();
    searchQuery.map(function(item){
        if(item.indexOf(keyword) != -1){
            //found, do something about it 
            console.log(item);
        }
    }); 
});

【讨论】：

这似乎给了我错误； news_site.html:155 Uncaught TypeError: item.indexOf 不是函数。关于如何解决这个问题的任何想法？
好吧，我不确定 searchQuery 的结构，所以这只是给你一些大致的想法。基本上你得到了这个错误，因为 searchQuery 的每个项目都不是一个字符串。也许它们是对象？如果是这样，您需要将代码更改为： if(item.webTitle.indexOf(keyword) != -1)

【解决方案2】：

按照您的要求，这里有一些可以帮助您的东西：

var searchQuery;
var keyword = $("#userSearch").val().toLowerCase();

$.ajax({
   url: 'https://content.guardianapis.com/search?api-key=xxxx',
   async: true,
   dataType: "json",
   success: function(data){
      searchQuery =  data.response.results;
   }
});

$("#submitSearch").on("click", function(){
    for(i=0;i<searchQuery.length;i++){
       if(searchQuery[i].webTitle.toLowerCase().indexOf(keyword) > 0){
         console.log(searchQuery[i].webTitle);
         console.log(searchQuery[i].webUrl);
         console.log(searchQuery[i].apiUrl);
       }
    } 
});

【讨论】：