JavaScript循环两个对象数组时data变量返回undefined问题排查

核心错误原因 #

• 异步请求时序问题：$.get是异步操作，你调用load()时请求还未完成，DB仍是空数组，所以DB[index]返回undefined。
• 数据存储错误：接口返回的是数组格式，你用DB.push(res)会把整个数组作为单个元素存入DB，导致DB变成[ [ {...}, {...} ] ]，即使请求完成，DB[index]也取不到正确数据。
• HTML标签语法错误：<h4 u-text-${classNum[index].text}">缺少class=属性前缀，既会导致样式失效，也存在语法错误。

修复后的完整代码 #

HTML部分（无需修改） #

<div id="recently-added" class="u-repeater">
<!-- here to load multiple cards -->
</div>

JavaScript部分 #

var DB = [];

// 将load()放在异步请求回调内，确保数据获取完成后再执行渲染
$.get(`http://localhost:8080/real-estate/monthly`, function(res) {
    // 直接赋值而非push，匹配接口返回的数组格式
    DB = res;
    load();
}) 

function load() {
    var card = '';
    var classNum = [
        { 'list': '1', 'text': '2'},
        { 'list': '2', 'text': '5'}
    ];
    for (let index = 0; index < classNum.length; index++) {
         var data = DB[index];
         // 修复h4标签的class属性语法错误
         card += 
            `
             <div class="u-list-item-${classNum[index].list}">
              <div class="u-container-layout-${classNum[index].list}">
              <img class="u-image-${classNum[index].list}">
              <p class="u-text">Click to select the text box</p>
              <h4 class="u-text-${classNum[index].text}">${data.title}</h4>
              <a class="u-btn-${classNum[index].list}">detail</a>
              </div>
            </div>
           `    
        }
    $("#recently-added").html(card);
}

额外优化建议 #

• 增加数据校验，避免数组长度不匹配导致的错误：

function load() {
    if (DB.length !== classNum.length) {
        console.warn('数据数组与样式配置数组长度不匹配');
        return;
    }
    // 后续渲染代码...
}

• 使用forEach遍历简化代码：

classNum.forEach((item, index) => {
    const data = DB[index];
    card += `
        <div class="u-list-item-${item.list}">
            <div class="u-container-layout-${item.list}">
            <img class="u-image-${item.list}">
            <p class="u-text">Click to select the text box</p>
            <h4 class="u-text-${item.text}">${data.title}</h4>
            <a class="u-btn-${item.list}">detail</a>
            </div>
        </div>
    `;
});

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