根据对搜索字段的输入从 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 ... etc) 中，我会得到相同的未定义错误。

我感觉很迷茫，只是不确定如何继续。基本上，如果用户搜索匹配的艺术家姓名，我想要做的是在 JSON 中返回项目的结果。例如，如果有人搜索“Eminem”，他们将收到“Eminem -The Slim Shady LP - 2xLP, Album, RE, 180”的（示例）返回。同样，对于此材料非常新，因此非常感谢任何帮助（尽可能简单地解释）。

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');
});

每位作者的多条记录的工作示例： 我在作者的示例数据中添加了多条记录：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>