Как вернуть ТОЛЬКО совпавшую / отфильтрованную строку в массиве?

Question

Я создаю небольшое приложение для подключения к API и добавления карт из волшебного сборочного JSON-файла на веб-страницу HTML.

Эти карты должны быть доступны для поиска, и для этого нужно как-то создатьa filter ()

Я новичок и еще учусь по этому предмету.

Я вытащил только имена карточек из переменной с именем "arr" и пытается отфильтровать /или соответствует значению из поля ввода поиска, которое равно "strInput"

document.getElementById ("searchButton"). addEventListener ("click", function (e) {

const parentDiv = document.getElementById("cards");
if ( parentDiv.hasChildNodes() === true ) {
    removeStuff();
} else {
    filteredCards("https://api.magicthegathering.io/v1/cards");
}

}, false)

displayCards("https://api.magicthegathering.io/v1/cards");

function filteredCards(url) {
  fetch(url)
    .then((resp) => resp.json())
    .then((data) => { 

      let myInput = document.getElementById("search").value;
      let strInput = '"' + myInput + '"';
      let arr = [];

      for ( i in data.cards) {
        let jsonValue = data.cards[i];
        let name = jsonValue.name;
        arr.push(name);   
      }

      let result = strInput.match(arr);
      console.log(result);
      console.log(arr);
      console.log(strInput);
    });
};

console.log(arr); // returns NULL even thought the string matches.

Answer 1

Есть два способа сделать это просто, о которых я мог подумать: .find() и .filter()

.find() вернут вам первое совпадение и в виде строки

.filter() вернет вам все совпадения и в виде массива

Они оба работают с одним и тем же стилем кода, вы просто меняете имя метода

arr.filter(item => item === strInput)|arr.find(item => item === strInput

---

Немного в стороне, есть несколько вещей, которые можно поменять местами, чтобы получить эти сладкие сладкие пирожные.

let arr = [];

for ( i in data.cards) {
  let jsonValue = data.cards[i];
  let name = jsonValue.name;
  arr.push(name);   
}

Вместо этого можно написать , используяфункция карты

let arr = data.cards.map((card) => card.name);

.

Кроме того, вам не нужно делать '"' + myInput + '"';, чтобы убедиться, что что-то является строкой, что вы можете пытатьсяделать там - вы можете просто использовать myInput.toString() - конечно, ваши данные могут иметь имена, включая кавычки, но на случай, если это ошибка, я подумал, что укажу на это

Answer 2

Спасибо! Это было именно то, что я искал: D

let myInput = document.getElementById("search").value;
let myInputRegex = new Regex(myInput, 'gi');
let arr = [];

const matchedTokens = data.cards.filter(card => {
  return card.name.match(myInputRegex);
});

console.log(matchedTokens);
console.log(strInput);

Answer 3

Параметр, переданный методу match, на самом деле не совпадает, а является строкой. Метод ожидает, что регулярное выражение будет передано.

Просто создайте простое выражение регулярного выражения, а затем выполните итерацию по data.cards и добавьте его в массив, если условие выполнено. Вы можете посмотреть на фильтр , доступный для объекта массива.

let myInput = document.getElementById("search").value;
let myInputRegex = new Regex(myInput, 'gi');
let arr = [];

const matchedTokens = data.cards.filter(card => {
  return card.name.match(myInputRegex);
});

console.log(matchedTokens);
console.log(strInput);

Answer 4

Вы можете создать метод, использующий array.Find() и передать в arr и strInput. array.Find() найдет первое совпадение

getName: function (arr, strInput) {
  var name = arr.find(n => n === strInput)
  return name
}

Вот еще кое-что из официальных документов mozzila https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find