我的 api 中的数据不会显示在我的 html 中（我还是编码新手，但这是我的代码）

Question

var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
    e.preventDefault();
    var inputValue = searchApi.value; 
    fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/'     +inputValue, options)
    .then(response => response.json())
    .then(response => console.log(response))
    .then((data) => {
        var title = document.createElement("li")
        title.setAttribute = ".list-item";
        title.innerText = data;
    })
    .catch(err => console.error(err));

});

//Html portion

<h2 class="justify-center flex">Results</h2>
<ul id="result-list">
  <li class="list-item "></li>

</ul>

The api works fine as it displays the data in the console, i just can figure how to get it in my html.

Answer 1

When you create an element with document.createElement it exists only in memory-- it isn't actually attached to the DOM yet. You need to insert it somewhere, like so:

var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
    e.preventDefault();
    var inputValue = searchApi.value; 
    fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/'     +inputValue, options)
    .then(response => response.json())
    .then(response => console.log(response))
    .then((data) => {
        var title = document.createElement("li")
        title.setAttribute = ".list-item"
        title.innerText = data;
        var list = document.getElementById("result-list");
        list.appendChild(title);
    })
    .catch(err => console.error(err));

});

Also note your line title.setAttribute = ".list-item" won't work as you expect-- you are overwriting the setAttribute function with a string. Better to just use classList as title.classList.add('list-item');

Also , as user Andy points out in the comments, you have another problem with your chaining of .then s-- specifically, you have a .then() that console.log s the result and returns nothing. The way promise chains work is that the next .then will act on the result passed from the previous .then ; however, .then(response => console.log(response)) will return undefined , so the data argument coming into your next .then will be undefined . Below is a code example that fixes both the setAttribute issue and the .then issue:

var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
    e.preventDefault();
    var inputValue = searchApi.value; 
    fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/'     +inputValue, options)
    .then(response => response.json())
    .then(response => {
        console.log(response);
        return response;
    })
    .then((data) => {
        var title = document.createElement("li")
        title.classList.add("list-item");
        title.innerText = data;
        var list = document.getElementById("result-list");
        list.appendChild(title);
    })
    .catch(err => console.error(err));

});

Finally, if you are just attempting to insert a plain object or array as text into the DOM you will likely get unexpected results, such as it displaying simply as "object Object" in the <li> . Let's presume for a moment that your response looks something like this:

{
    data: ['MacReady', 'Childs', 'Blair', 'Nauls', 'Clark', 'Palmer']
}

To write this data to the DOM, you'd need to access it at the data property, then map over it (either with a loop or using an array method like .forEach ) and add each item to an element (like an <li> in your case) and insert it to the DOM. Here's an example:

var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
    e.preventDefault();
    var inputValue = searchApi.value; 
    fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/'     +inputValue, options)
    .then(response => response.json())
    .then(response => {
        console.log(response);
        return response;
    })
    .then((data) => {
        let myList = data.data;

        myList.forEach(datum => {
            var title = document.createElement("li")
            title.classList.add("list-item");
            title.innerText = datum;
            var list = document.getElementById("result-list");
            list.appendChild(title);
        });
    })
    .catch(err => console.error(err));

});

There are other approaches to this-- using a for loop, or using DOM fragments to increase performance, but something along these lines should work for your use case.

Answer 2

The only missing part is how you loop over your data and add items to your list, so here's a quick example.

 // Cache the list element const ul = document.querySelector('ul'); // Your data will look something like this // where `data` is an object with a property // with an array const data = { cities: [ { name: 'London' }, { name: 'Paris' } ] }; // Once your data has returned, loop // over the array, and then add each new item // to the list for (const city of data.cities) { const item = document.createElement('li'); item.textContent = city.name; ul.appendChild(item); }

 <ul></ul>

If you wanted another approach that uses more "modern" methods:

 // Cache the list element const ul = document.querySelector('ul'); // Your data will look something like this // where `data` is an object with a property // with an array const data = { cities: [ { name: 'London' }, { name: 'Paris' } ] }; // Create an array of HTML strings by mapping // over the data const html = data.cities.map(city => { return `<li>${city.name}</li>`; }).join(''); // And then adding that joined string to the list ul.insertAdjacentHTML('beforeend', html);

 <ul></ul>

Addition information

• map

• join

• Template/string literals

• insertAdjacentHTML

Answer 3

You need to update an element that is in the dom.

var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
    e.preventDefault();
    var inputValue = searchApi.value; 
    fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/'     +inputValue, options)
    .then(response => response.json())
    .then(response => console.log(response))
    .then((data) => {
        listApi.innerText = data;
    })
    .catch(err => console.error(err));

});