Как сделать значение свойства объекта доступным для поиска из входного тега

Question

У меня есть этот API, с которым я работаю, я бы хотел, чтобы страна (т. Е. Value.slug == china) была элементом поиска пользователем no, так как я вручную ввожу их в код, чтобы получить результат каждая страна.

Я хочу иметь возможность подключить API с моим тегом ввода html, чтобы пользователь мог самостоятельно искать страну.

Вот код

fetch('https://api.covid19api.com/summary')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            let country = data.Countries.filter((value) => value.Slug == 'china')
            appendData(country);

        })
        .catch(function (err) {
            console.log(err);
        });

Answer 1

С чистым javascript вы можете сделать следующее:

var input = document.querySelector("#input")
input.addEventListener("change", function(event) { // enter key triggers event
   var value = event.target.value;
   console.log(value);
   getData(value);
});

function appendData(data) {
  // stub
  console.log(data);
}

function getData(country) {
fetch('https://api.covid19api.com/summary')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            let country = data.Countries.filter((value) => value.Slug == country)
            appendData(country);

        })
        .catch(function (err) {
            console.log(err);
        });
}

<input type="text" id="input" />