Return 来自 JSON 的项目数据基于搜索字段中的输入

Question

我是 JS/jQuery 的新手，一直在努力向我正在构建的网站添加一些搜索功能。

基本上，我构建了一个简单的搜索字段 (#artist_search)，我试图用它来搜索通过 GET 连接的 JSON：

const jsonconnect = {
    "async": true,
    "crossDomain": true,
    "url": "http://localhost:8888/Template/json/test.json",
    "method": "GET",
    };

    $.ajax(jsonconnect).done(function (response) {
    console.log(response);
    })

这个GET会将我的JSON的内容输出到控制台。例如，下面是 JSON 中存在的部分内容以及响应的一部分：

[ ...
{
  "Artist": "Eminem",
  "Title": "The Slim Shady LP",
  "Format": "2xLP, Album, RE, 180"
},
{
  "Artist": "Deafheaven",
  "Title": "New Bermuda",
  "Format": "2xLP, Album, Ltd, Pal"
},
{
  "Artist": "Aphex Twin",
  "Title": "Selected Ambient Works 85-92",
  "Format": "2xLP, Album, RE, RM"
}...]

Snippet of results of console.log

然后我尝试从响应中获取数据并将其传递给 keyup 函数，该函数将在 DIV (#search_result) 内输出结果，但我不断收到“响应未定义”错误（我确定还有其他问题）：

$("#artist_search").keyup (function() {
         response.forEach(item => {
            if(item.Artist == $("#artist_search")) {
                $("#search_result").html(item); }
            else $("#search_result").html("No matches!");
        });

所以我尝试在最初的 $.ajax(jsonconnect).done 调用中创建一个名为 recordCollection 的常量，但该常量似乎不存在于该函数之外。意思是，如果我试图将它插入 .keyup (function(), as recordCollection.forEach(item ... 等等，我会得到同样的未定义错误。

我感到很迷茫，而且我通常不确定如何继续。基本上，如果用户搜索匹配的艺术家姓名，我要做的是 return JSON 中某个项目的结果。例如，如果有人搜索“Eminem”，他们将收到“Eminem -The Slim Shady LP - 2xLP, Album, RE, 180”的（示例）return。同样，这个 material 非常新，所以非常感谢任何帮助（尽可能简单地解释）。

Answer 1

响应范围在 .done() 中，因此您将无法在外部访问它。如果你想访问 keyup 事件的 ajax 响应。您需要声明一个全局变量并在 .done() 中设置它。

const jsonconnect = {
  "async": true,
  "crossDomain": true,
  "url": "http://localhost:8888/Template/json/test.json",
  "method": "GET",
};
let ajaxResponse = null; // This is the  global variable. You need to set the response
$.ajax(jsonconnect).done(function (response) {
  ajaxResponse = response;
});

然后你可以使用下面的代码来显示记录。

如果每个作者只有一条记录。您可以使用 Array.prototype.find 函数。如果作者有多条记录，则显示第一个。

$("#artist_search").keyup (function() {
  let result = ajaxResponse.find(x => x.Artist === $(this).val());
  $("#search_result").html(result ? `${result.Title} - ${result.Format}` : 'No matches');
});

如果期望每个作者有多个记录。你需要使用 Array.prototype.filter.

$("#artist_search").keyup (function() {
  let result = ajaxResponse.filter(x => x.Artist === $(this).val()).map(y => `${y.Title} - ${y.Format}`);
  $("#search_result").html(result.length > 0  ? result  : 'No matches');
});

每个作者的多个记录的工作示例： 我在 Author: Eminem 的示例数据中添加了多条记录。如果搜索 'Eminem'，将显示多条记录。

let ajaxResponse=[{
  "Artist": "Eminem",
  "Title": "The Slim Shady LP",
  "Format": "2xLP, Album, RE, 180"
},
{
  "Artist": "Eminem",
  "Title": "Test Title",
  "Format": "Test Format"
},
{
  "Artist": "Deafheaven",
  "Title": "New Bermuda",
  "Format": "2xLP, Album, Ltd, Pal"
},
{
  "Artist": "Aphex Twin",
  "Title": "Selected Ambient Works 85-92",
  "Format": "2xLP, Album, RE, RM"
}];
$("#artist_search").keyup (function() {
  let result = ajaxResponse.filter(x => x.Artist === $(this).val()).map(y => `${y.Title} - ${y.Format}`);
  $("#search_result").html(result.length > 0  ? result  : 'No matches');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="artist_search" />
<span id="search_result"></span>

Return 来自 JSON 的项目数据基于搜索字段中的输入

Return item data from JSON based on input into search field

javascript

arrays

search

jquery

json