嵌套JSON中的LiveSearch

Question

在所示的示例中，搜索国家的名称。它位于json对象的第一级。

我如何搜索一个水平下降的字符串？作为altSpellings中的一个例子

[{
"name":"Afghanistan", 
"altSpellings":["AF","Afġānistān"],
"region":"Asia",
}]

如果我将过滤器中的行更改为：return place.altSpellings.match(regex)

我得到了一个错误：Uncaught TypeError: place.altSpellings.match is not a function

​

const countries = [];
fetch('https://restcountries.eu/rest/v2/all')
  .then(response => response.json())
  .then(json => countries.push(...json));

function searchCountries(wordToSearch, countries) {
  return countries.filter(place => {
    const regex = new RegExp(wordToSearch, 'gi');
    return place.name.match(regex)
  })
}

function liveSearch() {
  if (this.value.length) {
    const searchResult = searchCountries(this.value, countries);

    const searched = searchResult.map(item => {
      const regex = new RegExp(this.value, 'gi');
      const name = item.name.replace(regex, `<b>${this.value}</b>`)
      const altSpellings = item.altSpellings

      return `<div>${name}<br>${altSpellings}<br><br></div>`;

    }).join('');

    results.innerHTML = searched;
  } else {
    results.innerHTML = "";
  }
}

const search = document.querySelector('.search');
const results = document.querySelector('.results');
search.addEventListener('keyup', liveSearch);

<div class="wrapper">
  <h1>Ajax Search countries</h1>
  <input type="text" class="search" placeholder="search any country here" />
  <div class="results"></div>
</div>

​

Answer 1

你能这样试试吗？

​

const countries = [];
fetch('https://restcountries.eu/rest/v2/all')
  .then(response => response.json())
  .then(json => countries.push(...json));

function searchCountries(wordToSearch, countries) {
  return countries.filter(({name, altSpellings}) => {
    let isMatched = false
    const regex = new RegExp(wordToSearch, 'gi');
    const namesArr = [name, ...altSpellings]
    namesArr.forEach(v => {
     if (v.match(regex)) {
       isMatched = true
     }
    })
 
    return isMatched
  })
}

function liveSearch() {
  if (this.value.length) {
    const searchResult = searchCountries(this.value, countries);

    const searched = searchResult.map(item => {
      const regex = new RegExp(this.value, 'gi');
      const name = item.name.replace(regex, `<b>${this.value}</b>`)
      const altSpellings = item.altSpellings.map(v => v.replace(regex,`<b>${v}</b>`))
      return `<div>${name}<br>${altSpellings}<br><br></div>`;

    }).join('');

    results.innerHTML = searched;
  } else {
    results.innerHTML = "";
  }
}

const search = document.querySelector('.search');
const results = document.querySelector('.results');
search.addEventListener('keyup', liveSearch);

<div class="wrapper">
  <h1>Ajax Search countries</h1>
  <input type="text" class="search" placeholder="search any country here" />
  <div class="results"></div>
</div>

​