Question

我必须搜索一些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或tags的JSON。从那里我将匹配数据输出到每个匹配的div。

需要查询部分的帮助！我工作的其他所有东西，但我已经陷入困境。非常感谢所有帮助！

Answer 1

首先将它从JSON解析为JS对象然后过滤它

{{1}}

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

Answer 2

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

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

＆＃13;

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

＆＃13;

HTML表单查询匹配的JSON数据

2 个答案: