如何在接收Google Analytics API响应后动态创建标签？

嘿，我看你在处理Google Analytics API返回的数据时遇到了动态创建标签的问题——只能显示第一个国家数据，还报Cannot set property 'innerHTML' of undefined的错误，这就来帮你搞定！

首先，先确认下你拿到的API返回数据格式是没问题的，包含了总用户数和各个国家的用户数组：

{
  "kind": "analytics#gaData",
  "id": "in here my ID",
  "query": {
    "start-date": "30daysAgo",
    "end-date": "today",
    "ids": "ga:172427234",
    "dimensions": "ga:country",
    "metrics": [ "ga:users" ],
    "start-index": 1,
    "max-results": 1000
  },
  "itemsPerPage": 1000,
  "totalResults": 7,
  "selfLink": "there some link",
  "profileInfo": {
    "profileId": "172427234",
    "accountId": "116539423",
    "webPropertyId": "UA-116539423-1",
    "internalWebPropertyId": "172991088",
    "profileName": "any info for website",
    "tableId": "ga:172427234"
  },
  "containsSampledData": false,
  "columnHeaders": [
    {
      "name": "ga:country",
      "columnType": "DIMENSION",
      "dataType": "STRING"
    },
    {
      "name": "ga:users",
      "columnType": "METRIC",
      "dataType": "INTEGER"
    }
  ],
  "totalsForAllResults": { "ga:users": "43523" },
  "rows": [
    [ "Dubai", "28961" ],
    [ "Germany", "1400" ],
    [ "Netherlands", "111" ],
    [ "Poland", "10" ],
    [ "Russia", "1021" ],
    [ "Ukraine", "28" ],
    [ "United States", "11992" ]
  ]
}

你的问题出在JS代码的循环逻辑上：嵌套的循环完全没必要，而且当你用document.querySelectorAll(".country-users")的时候，此时DOM里还没创建足够的元素，导致countryUsers[j]找不到对应节点，就报了undefined错误。还有那个while循环完全是多余的，只会让代码重复执行多次。

先看看你当前的JS代码：

.then(function(response) {
  let users = JSON.parse(response.result.totalsForAllResults["ga:users"]);
  var country = response.result.rows;
  var toAdd = document.createDocumentFragment();
  console.log(country.length);
  while (country.length > 0) {
    for(let i = 0;i < country.length;i++){
      var span = document.createElement('span');
      span.className = "country-users";
      document.querySelector('.google-text-block').appendChild(span);
      document.querySelector('.google-text-block').appendChild(document.createElement('br'));
      for (let j = 0; j < country.length; j++) {
        let countryUsers = document.querySelectorAll(".country-users");
        countryUsers[j].innerHTML = country[i];
      }
    }
  }
})

对应的HTML：

<div class="google-text-block">
  <span class="users-numb">Users:</span>
  <span class="numb"></span>
</div>

现在给你修复后的代码，逻辑更清晰，还能正确显示总用户数和每个国家的用户数据：

.then(function(response) {
  // 获取总用户数并显示
  const totalUsers = response.result.totalsForAllResults["ga:users"];
  document.querySelector('.numb').textContent = totalUsers;

  // 获取国家用户数据数组
  const countryRows = response.result.rows;
  // 获取容器元素，避免重复查询DOM
  const container = document.querySelector('.google-text-block');

  // 遍历每个国家数据
  countryRows.forEach(row => {
    const countryName = row[0];
    const userCount = row[1];
    // 创建span标签
    const span = document.createElement('span');
    span.className = "country-users";
    // 设置内容，比如"Dubai: 28961"
    span.textContent = `${countryName}: ${userCount}`;
    // 添加到容器
    container.appendChild(span);
    // 添加换行
    container.appendChild(document.createElement('br'));
  });
})

代码说明： #

• 先处理总用户数，把它放到.numb标签里，补上你之前遗漏的总用户数展示逻辑
• 提前获取容器元素，避免在循环里重复查询DOM，提升性能
• 用forEach遍历国家数据数组，每个row就是一个国家和对应的用户数，逻辑更直观
• 每个国家创建一个span，直接设置它的textContent（比innerHTML更安全，避免XSS风险）
• 依次把span和换行添加到容器里，步骤清晰，不会出现找不到元素的问题

这样修改后，就能根据返回的国家数量动态创建标签，不会再报undefined的错误啦！

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