Firebase偶现返回空值：加载数据后无法渲染卡片标题求助

你的核心问题是异步请求的时序问题：XMLHttpRequest是异步操作，getAllAgencies发送请求后会立刻继续执行后续代码，不会等待请求返回数据。而testCard中的DOM加载回调可能在Firebase数据还没返回、agencies未被赋值时就触发了，导致循环因agencies为空而跳过。

修复方案：确保数据加载完成后再更新DOM #

有两种简洁的实现方式：

方式1：给数据请求函数添加回调参数

修改getAllAgencies，让它在数据加载完成后执行传入的DOM更新逻辑：

function getAllAgencies(callback) {
  let request = new XMLHttpRequest();

  request.onreadystatechange = function () {
    if (this.readyState == 4) {
      if (this.status == 200) {
        const agencies = JSON.parse(request.responseText);
        // 数据就绪后调用回调更新DOM
        callback(agencies);
      } else {
        alert("Greska prilikom ucitavanja agencije!");
      }
    }
  };
  request.open("GET", firebase + "/agencije.json");
  request.send();
}

function testCard() {
  document.addEventListener("DOMContentLoaded", function () {
    // 等待DOM加载完成后，发起数据请求并传入更新逻辑
    getAllAgencies(function(agencies) {
      let test = document.getElementsByClassName("card-title");
      let i = 0;
      for (let key in agencies) {
        if (i >= test.length) break;
        test[i].textContent = agencies[key]["naziv"];
        i++;
      }
    });
  });
}

方式2：用Fetch API + async/await简化异步逻辑

Fetch API是现代浏览器推荐的异步请求方式，搭配async/await可以让异步代码更易读：

async function getAllAgencies() {
  try {
    const response = await fetch(firebase + "/agencije.json");
    if (!response.ok) throw new Error("请求失败");
    return await response.json();
  } catch (error) {
    alert("Greska prilikom ucitavanja agencije!");
    return []; // 返回空数组避免循环报错
  }
}

function testCard() {
  document.addEventListener("DOMContentLoaded", async function () {
    // 等待数据加载完成后再更新DOM
    const agencies = await getAllAgencies();
    let test = document.getElementsByClassName("card-title");
    let i = 0;
    for (let key in agencies) {
      if (i >= test.length) break;
      test[i].textContent = agencies[key]["naziv"];
      i++;
    }
  });
}

注意事项 #

• 确保调用testCard函数的时机正确（比如在页面脚本最后执行）
• 可以在数据加载过程中添加加载提示，提升用户体验

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