已获取数据但无法渲染至innerHTML列表的问题求助

问题说明 #

已通过fetch成功获取服务器数据，但无法将数据遍历渲染到列表的innerHTML中，请求状态正常，需定位代码错误并学习问题原因。

原代码问题分析 #

JavaScript代码中的错误 #

const URL =`https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/search?query=&limit=10&exchange=NASDAQ`;
const searchInpt = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchButton');
const results = document.getElementById('displayResults'); // 错误1：元素选择错误
const loader = document.getElementById('spinner'); // 变量名是loader，后续却用spinner
searchBtn.addEventListener('click', grabData);
function grabData() {
    spinner.style.display = "block"; // 错误2：未定义spinner，应该用loader
    fetch(URL).then((response) => {
        return response.json()
    }).then((data) => {
        presentData(data);
    })
}
function presentData(data) {
        const listComp = []; // 错误3：声明为数组却赋值字符串，无意义
        for (let i = 0; i < data.length - 1; i++) { // 错误4：循环条件少遍历最后一个元素
        listComp = data[i].name + " " + data[i].symbol;
        results.innerHTML += `<li style="list-style: none;"><a href="./company.html?symbol=${data[i].symbol}" target="_blank">${listComp}</a></li>`;
            spinner.style.display = 'none'; // 错误2+错误5：循环内重复隐藏loader，逻辑不合理
         }
    }

HTML代码中的错误 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
    crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css">
</head>
<body>
   <span id="inputHolder"><input id="searchInput" type="text" placeholder="aa">
    <button id="searchButton">Search</button> </span>
    <div id="nasdaqUl"> 
        
        <div id="spinner" class="spinner-border" role="status">
            <span class="visually-hidden"></span>
          </div>

        
        <ul id="nasdaqLi">
            <li class="displayResults"></li> <!-- 错误：JS中用getElementById找displayResults，但这里是class -->
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
            <li class="displayResults"></li>
        </ul>
    </div>
    
</span> <!-- 错误：多余的闭合span，前面inputHolder已经闭合，导致DOM结构异常 -->
<script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous">
      </script>
    <script src="./js.js"></script>
</body>
</html>

具体错误讲解与修复方案 #

1. 元素选择错误

   • 问题：JS中用getElementById('displayResults')，但HTML里displayResults是li的class而非id，导致results变量为null，无法操作innerHTML。
   • 修复：获取列表容器<ul id="nasdaqLi">，修改JS代码为const results = document.getElementById('nasdaqLi');

2. 变量名不匹配

   • 问题：定义了const loader = document.getElementById('spinner');，但后续操作时用了未定义的spinner.style.display，触发ReferenceError。
   • 修复：统一使用变量名loader，把spinner.style.display改为loader.style.display。

3. 循环条件错误

   • 问题：for (let i = 0; i < data.length - 1; i++)会跳过数组最后一个元素，因为当i等于data.length-1时条件不成立。
   • 修复：改为for (let i = 0; i < data.length; i++)，确保遍历所有数据。

4. 无意义的数组声明

   • 问题：const listComp = [];声明为数组，但后续直接赋值为字符串，数组未被使用，属于冗余代码。
   • 修复：直接声明为字符串变量let listComp;，或直接在模板字符串中拼接内容。

5. loader隐藏逻辑不合理

   • 问题：在循环内部每次都设置loader隐藏，第一次循环就会隐藏加载状态，逻辑上应在所有数据渲染完成后再隐藏。
   • 修复：把loader.style.display = 'none';移到循环外面。

6. DOM结构异常

   • 问题：HTML末尾有多余的</span>，无对应起始标签，导致浏览器解析DOM异常，可能影响元素选择和渲染。
   • 修复：删除多余的</span>标签。

修复后的完整代码 #

JavaScript代码 #

const URL =`https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/search?query=&limit=10&exchange=NASDAQ`;
const searchInpt = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchButton');
const results = document.getElementById('nasdaqLi');
const loader = document.getElementById('spinner');
searchBtn.addEventListener('click', grabData);

function grabData() {
    loader.style.display = "block";
    fetch(URL)
        .then((response) => response.json())
        .then((data) => {
            presentData(data);
        })
        .catch(err => {
            // 新增错误捕获，处理请求失败情况
            console.error('请求出错:', err);
            loader.style.display = 'none';
        });
}

function presentData(data) {
    // 先清空原有内容，避免多次点击重复添加
    results.innerHTML = '';
    for (let i = 0; i < data.length; i++) {
        const listComp = `${data[i].name} ${data[i].symbol}`;
        results.innerHTML += `<li style="list-style: none;"><a href="./company.html?symbol=${data[i].symbol}" target="_blank">${listComp}</a></li>`;
    }
    loader.style.display = 'none';
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
    crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css">
</head>
<body>
   <span id="inputHolder">
        <input id="searchInput" type="text" placeholder="aa">
        <button id="searchButton">Search</button>
    </span>
    <div id="nasdaqUl"> 
        <div id="spinner" class="spinner-border" role="status" style="display: none;">
            <span class="visually-hidden"></span>
        </div>
        <ul id="nasdaqLi"></ul>
    </div>
    
<script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous">
</script>
    <script src="./js.js"></script>
</body>
</html>

额外优化说明：

• 新增fetch错误捕获，避免请求失败时loader一直显示。
• 渲染前清空results.innerHTML，避免多次点击重复添加列表项。
• 给spinner初始设置style="display: none;"，避免页面加载时显示加载动画。

内容的提问来源于stack exchange，提问作者JavaScriptStudent