我想將所有 api 結果打印到頁面

Question

我有 API 的這個結果

我想訪問這個數組中的所有值，但是當我嘗試 for 循環或 forEach 循環時，它只打印數組的最后 9 項

像這樣

const options = {
        method: 'GET',
        headers: {
            'X-RapidAPI-Key': 'API-key',
            'X-RapidAPI-Host': 'contextualwebsearch-websearch-v1.p.rapidapi.com'
        }
    };
    
    fetch(`https://contextualwebsearch-websearch-v1.p.rapidapi.com/api/Search/WebSearchAPI?q=${query}&pageNumber=1&pageSize=10&autoCorrect=true`, options)
        .then(response => response.json())
        .then(response => {
            
             for(let i = 0; i < response.value.length; i++){
                result = `
                
                <h3>${response.value[i].title}</h3>
                
                `;
                document.getElementById("result").innerHTML = result;
             }






            //  response.value.forEach(res => {
            //      result = `
            //      <h3><a href="${res.url}">${res.title}</a></h3><br><a href="${res.url}" color="#bdc1c6">${res.url}</a><br>
            //      <p>${res.snippet}</p>
            //      `
            //      document.getElementById("result").innerHTML = result;
            //  ;
            //  });
            console.log(response.value)})
        .catch(err => console.error(err));
})

這就是我正在嘗試的，請告訴我我的代碼是否錯誤或給我一個適當的答案

Answer 1

這可能是你的問題：

document.getElementById("result").innerHTML = result;

在這里，您將在每次循環后覆蓋內部的值，這就是為什么您只會找到顯示的最后一個值的原因。

您可以使用+=運算符將 HTML 遞增到result元素中的現有內容。

document.getElementById("result").innerHTML += result;