Как сопоставить пользовательский ввод с существующей строкой в ​​массиве API и вывести, какая позиция массива была?

Question

Я хочу сравнить слово, которое пользователь вводит во вход, со списком слов в массиве, который присутствует в API, к которому я пытаюсь получить доступ. Дело в том, что, например, если пользователь вводит «Sun», я хочу предупредить что-то вроде «Эй, ты понял, Sun присутствует в [7]», где [7] будет позицией массива со строкой связавшись со словом "Солнце".

Массив, который просматривает код, это movie.title, который на самом деле представляет собой список фильмов, который содержит названия каждого фильма.

Проблема в том, что код, который я публикую здесь, работает только со строкой жесткого кода в includes(), присутствующем в if (movie.title.includes("Pom")). Мне нужно принять переменную userWord, но когда я использую переменную, ничего не происходит.

Кроме того, как я могу указать, какая позиция массива содержит совпадение? Я не знаю, достаточно ли я ясен, я обычно просто читаю Stackoverflow.

Код, который я публикую здесь, я в основном получил из учебника онлайн. Я пытался сделать это в Vue (именно здесь я пытаюсь создать свое приложение), но не смог, поэтому я использовал этот фрагмент кода. Я не знаю, является ли это лучшим способом с точки зрения исполнения или написания.

Спасибо.

requestAndcheckIf: function () {

        const request = new XMLHttpRequest();

        // Open a new connection, using the GET request on the URL endpoint
        request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);

        request.onload = function () {
            // Begin accessing JSON data here
            const data = JSON.parse(this.response);

            data.forEach(movie => {
                // Log each movie's title
                console.log(movie.title);

                if (movie.title.includes("Pom")) {
                    alert("Gotcha! It is present in the " + )
                } else {

                }
            });


        }

        request.send();

Answer 1

Что касается поиска индекса:

Синтаксис Array#forEach() выглядит следующим образом:

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

То есть второй параметр, передаваемый в функцию обратного вызова, является текущим индексом, вы можете просто использовать его здесь:

requestAndcheckIf: function() {

  const request = new XMLHttpRequest();

  // Open a new connection, using the GET request on the URL endpoint
  request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);

  request.onload = function() {
    // Begin accessing JSON data here
    const data = JSON.parse(this.response);

    data.forEach((movie, index) => {
      // Log each movie's title
      console.log(movie.title);

      if (movie.title.includes("Pom")) {
        alert("Gotcha! It is present in the " + index)
      } else {

      }
    });


  }

  request.send();
}

Но, если вы просто хотите найти индекс чего-либо, вы можете использовать Array#findIndex():

requestAndcheckIf: function() {

  const request = new XMLHttpRequest();

  // Open a new connection, using the GET request on the URL endpoint
  request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);

  request.onload = function() {
    // Begin accessing JSON data here
    const data = JSON.parse(this.response);

    let index = data.findIndex(movie => movie.title.includes("Pom"));
    alert("Gotcha! It is present in the " + index)


  }

  request.send();
}

Answer 2

Вы также можете посмотреть на метод findIndex, доступный в массивах.

var index = data.findIndex(function findFirstLargeNumber(movie) {
  return movie.title.includes("Pom") ;
})

здесь индекс должен дать вам индекс, который вы ищете

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Answer 3

Вам нужно перехватить onchange событие вашего поля ввода. Я надеюсь, что у вас есть вход с его идентификатором или классом. с jQuery вы можете сделать это как

$("#buttonId").on("click", function(){

   userInput = $("#userWord").val();
   requestAndcheckIf(userInput);
})

и измените requestAndcheckIf , приняв один параметр, например

requestAndcheckIf: function (userInput) {

        const request = new XMLHttpRequest();

        // Open a new connection, using the GET request on the URL endpoint
        request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);

        request.onload = function () {
            // Begin accessing JSON data here
            const data = JSON.parse(this.response);

            data.forEach((movie, index) => {
                // Log each movie's title
                console.log(movie.title);

                if (movie.title.includes(userInput)) {
                    alert("Gotcha! It is present in the " + index)
                } else {

                }
            });
        }
        request.send();
}