javascript - 如何在收到服务器响应时动态创建标签？

Question

我在使用 google-analytics api

我使用的代码取自 here只更改了客户端 ID。

当我请求谷歌服务器时，它在底部返回给我一个 JSON 文件。

{
  "kind": "analytics#gaData",
  "id": "in here my ID",
  "query": {
    "start-date": "30daysAgo", //monthly statistic
    "end-date": "today", //last day today
    "ids": "ga:172427234",
    "dimensions": "ga:country", //regions
    "metrics": [
      "ga:users" //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" //all users count which were in site
  },
  "rows": [ // regions from which they came to the site and how much user-entered from each region
    [
      "Dubai",
      "28961"
    ],
    [
      "Germany",
      "1400"
    ],
    [
      "Netherlands",
      "111"
    ],
    [
      "Poland",
      "10"
    ],
    [
      "Russia",
      "1021"
    ],
    [
      "Ukraine",
      "28"
    ],
    [
      "United States",
      "11992"
    ]
  ]
} 

问题是，如您所见，有多个国家以及每个国家有多少用户

我需要在收到服务器响应时动态创建标签。国家可以是 10、100 或 1000，因此我需要在收到数据时动态创建标签。我在底部使用此代码，但问题是它只显示第一个国家和用户。(它工作一次)Dubai, 28961

在第一个国家/地区控制台显示错误后无法设置未定义的属性“innerHTML”

顺便说一句，这段代码有效(显示德国，1400)

document.querySelector(".numb").innerHTML = country[1];

但我不能使用它，因为它不是动态的。我只是无法复制它并更改变量国家/地区中提供的值

我提供了一段代码，我从顶部链接的 queryCoreReportingApi 函数更改

.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>

请大家帮忙

Answer 1

看，这就是你应该做的。

不需要内部 for 循环。

var info = [
    [
      "Dubai",
      "28961"
    ],
    [
      "Germany",
      "1400"
    ],
    [
      "Netherlands",
      "111"
    ],
    [
      "Poland",
      "10"
    ],
    [
      "Russia",
      "1021"
    ],
    [
      "Ukraine",
      "28"
    ],
    [
      "United States",
      "11992"
    ]
  ];
  
  
  
  var country = info;
          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'));

             span.innerHTML = country[i];
          }
          
          
          
          
          
          

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