Блог

Главная - Вопросы по программированию - Как я могу правильно получить API

Как я могу правильно получить API

#javascript

Вопрос:

Я создал 10 , каждый из которых отображает один идентификатор в API. Я использовал querySelectorAll, чтобы найти все и использовать цикл for, чтобы содержимое каждого содержало один идентификатор в API, но когда я пытаюсь закодировать, как вы можете видеть, один будет содержать все десять идентификаторов, и я не знаю, как это сделать возможным

 function onResponse(response) {
    return response.json();
}

function data(data) {
    //create a function to display the element 
    var htmls = data.map(function(post) {
        return `<li>
                <h2> ${post.id}</h2>
                </li>`
    });

    
    var html = htmls.join('');
    const p = document.querySelectorAll('span');
    for (let i = 0; i < p.length; i  ) {
        p[i].innerHTML = html;
    }

}
fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data); 
    

<body>
    <form>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>

            <span></span>

            <span></span>

            <span></span>
            <span></span>

            <span></span>



           
        </div>
    </form>
</body>

</html>

Ответ №1:

html это уже HTML каждого id из них . Вы назначаете его каждому span innerHTML , в результате чего получается 9 дубликатов.

Вместо этого просто назначьте span родительскому innerHTML :

 function onResponse(response) {
    return response.json();
}

function data(data) {
    //create a function to display the element 
    var htmls = data.map(function(post) {
        return `<li>
                <h2> ${post.id}</h2>
                </li>`
    });

    
    var html = htmls.join('');
    const div = document.querySelector('div');
    div.innerHTML = html;

}
fetch('https://jsonplaceholder.typicode.com/users').then(onResponse).then(data); 
 <body>
    <form>
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>

            <span></span>

            <span></span>

            <span></span>
            <span></span>

            <span></span>



           
        </div>
    </form>
</body>

</html>
Метки: