HTML 表单查询 JSON 数据以进行匹配答案

【问题标题】：HTML form query JSON data for matchesHTML 表单查询 JSON 数据以进行匹配
【发布时间】：2018-04-05 02:17:50
【问题描述】：

我必须搜索一些 JSON 数据以从输入表单中查找匹配项。这是我目前所拥有的：

<div class="container">
  <form id="searchForm" class="form-group">
    <input type="text" id="searchText" class="form-control />
  </form>
</div>

这是我的 JS ...

let searchForm = document.getElementById('searchForm');

searchForm.addEventListener('submit', function(e){
  e.preventDefault();
  let searchText = document.getElementById('searchText').value;
  getCharacters(searchText);
});

function getCharacters(searchText){
let xhr = new XMLHttpRequest();
xhr.open('GET', 'characters.json', true);
xhr.onload = function(){
if(this.status == 200){
  let characters = JSON.parse(this.responseText);

  let output = '';

  for(let i in characters){
    output +=
      ...
;
  }
  document.getElementById('characters').innerHTML = output;
}
}xhr.onerror = function(){
console.log('Request error');
}xhr.send();
};

还有我的 JSON ...

[
{
  "id": 1001,
  "first_name": "Rick",
  "last_name": "Grimes",
  "img": "https://ia.media-imdb.com/images/M/MV5BMjI2NDYyNjg4NF5BMl5BanBnXkFtZTcwMjI5OTMwNA@@._V1_.jpg",
  "career": "Sheriff",
  "actor": "Andrew Lincoln",
  "still_alive": true,
  "tags": ["rick","grimes","sheriff","andrew","lincoln","alive"]
},
{
  "id": 1002,
  "first_name": "Daryl",
  "last_name": "Dixon",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTQ5ODE4NTgzMl5BMl5BanBnXkFtZTcwODI0MjAwMw@@._V1_.jpg",
  "career": "unknown",
  "actor": "Norman Reedus",
  "still_alive": true,
  "tags": ["daryl","dixon","unknown","norman","reedus","alive"]
},
{
  "id": 1003,
  "first_name": "Glenn",
  "last_name": "Rhee",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTcxODE2MDgxOF5BMl5BanBnXkFtZTgwNjk2MDM1NzE@._V1_.jpg",
  "career": "Nerd",
  "actor": "Steven Yeun",
  "still_alive": false,
  "tags": ["glenn","rhee","nerd","steven","yeun","dead"]
}
]

在 JS 中，我正在寻找一种方法来使用 searchText 根据 first_name、last_name 或标签来查询 JSON。从那里我会将匹配的数据输出到每个匹配的 div 中。

在查询部分需要帮助！我所做的一切工作，但我被困在这一点上。非常感谢所有帮助！

【问题讨论】：

我建议将 JSON “转换”为实际的 JS 对象，而不是将响应转换为字符数组。这样，您可以将匹配项与其字段等相关联，并且从那时起几乎可以用它做任何事情。

标签： javascript arrays json

【解决方案1】：

先从 JSON 解析为 JS 对象再过滤

let objectsFromXHR = JSON.parse(`[
{
  "id": 1001,
  "first_name": "Rick",
  "last_name": "Grimes",
  "img": "https://ia.media-imdb.com/images/M/MV5BMjI2NDYyNjg4NF5BMl5BanBnXkFtZTcwMjI5OTMwNA@@._V1_.jpg",
  "career": "Sheriff",
  "actor": "Andrew Lincoln",
  "still_alive": true,
  "tags": ["rick","grimes","sheriff","andrew","lincoln","alive"]
},
{
  "id": 1002,
  "first_name": "Daryl",
  "last_name": "Dixon",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTQ5ODE4NTgzMl5BMl5BanBnXkFtZTcwODI0MjAwMw@@._V1_.jpg",
  "career": "unknown",
  "actor": "Norman Reedus",
  "still_alive": true,
  "tags": ["daryl","dixon","unknown","norman","reedus","alive"]
},
{
  "id": 1003,
  "first_name": "Glenn",
  "last_name": "Rhee",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTcxODE2MDgxOF5BMl5BanBnXkFtZTgwNjk2MDM1NzE@._V1_.jpg",
  "career": "Nerd",
  "actor": "Steven Yeun",
  "still_alive": false,
  "tags": ["glenn","rhee","nerd","steven","yeun","dead"]
}
]`);

const target = 'Glenn'

console.log(objectsFromXHR.filter(each => each.first_name === target));

它的过滤功能可以使用Regex等。只需返回true让JS知道这个当前过滤对象是有效的

【讨论】：

顺便说一句，你应该试试 jQuery
标准 Javascript 没有问题，多写几个字符就可以了（尽管 OP 肯定会发现使用 fetch 而不是 XMLHttpRequest 更容易）
是的，当你的老板不关心你的开发速度时，这并没有错。花100万美元买一罐可乐没有错。嗯，是的

【解决方案2】：

要按名字和姓氏搜索，您可以组合 2 个字符串，然后将其转换为小写，然后与您的输入进行比较。

我在末尾添加了一个空字符串，以防两个字段都为空。
此方法不区分大小写，会删除前端和后端的空输入。

const obj = [
{
  "id": 1001,
  "first_name": "Rick",
  "last_name": "Grimes",
  "img": "https://ia.media-imdb.com/images/M/MV5BMjI2NDYyNjg4NF5BMl5BanBnXkFtZTcwMjI5OTMwNA@@._V1_.jpg",
  "career": "Sheriff",
  "actor": "Andrew Lincoln",
  "still_alive": true,
  "tags": ["rick","grimes","sheriff","andrew","lincoln","alive"]
},
{
  "id": 1002,
  "first_name": "Daryl",
  "last_name": "Dixon",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTQ5ODE4NTgzMl5BMl5BanBnXkFtZTcwODI0MjAwMw@@._V1_.jpg",
  "career": "unknown",
  "actor": "Norman Reedus",
  "still_alive": true,
  "tags": ["daryl","dixon","unknown","norman","reedus","alive"]
},
{
  "id": 1003,
  "first_name": "Glenn",
  "last_name": "Rhee",
  "img": "https://ia.media-imdb.com/images/M/MV5BMTcxODE2MDgxOF5BMl5BanBnXkFtZTgwNjk2MDM1NzE@._V1_.jpg",
  "career": "Nerd",
  "actor": "Steven Yeun",
  "still_alive": false,
  "tags": ["glenn","rhee","nerd","steven","yeun","dead"]
}
];

function searchByName(data, str) {
  return data.filter(i => { 
    const pool = i.first_name + i.last_name + '';
    return pool.toLowerCase().includes(str.trim().toLowerCase());
  });
}

console.log(searchByName(obj, 'Rhe'));

【讨论】：