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

问题描述

我正在使用google-analytics api

我使用的代码取自此处仅更改了客户端 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，因此我需要在收到数据时动态创建标签。我在底部使用此代码，但问题是它只显示第一个国家和用户。（它工作一次）迪拜，28961

在第一个国家控制台节目出现错误之后Cannot set property 'innerHTML' of undefined

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

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

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

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>

请任何人帮助

标签： javascript

看，这就是你应该做的。

不需要内部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>

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

问题描述

解决方案

推荐阅读