检查对象是否包含值0并注入DOM

Question

我有一个对象，我想：

1. 循环通过对象
2. 检查是否有任何值=== 0
3. ，然后只将该键值注入到DOM.

中。

但是，当我循环遍历对象时，这个值会被注入DOM两次(可能是因为对象中有两个键/值)。但我只希望注入一次，因为显然只有一个键，其值为=== 0。

(另一个=== 1)

这里有一个例子：

window.gaData['UA-123'].experiments = {
  TestA: "1"
  TestB: "0"
}

，我就是这样循环的：

 Object.keys(window.gaData["UA-123"].experiments).forEach(function(key, value) {
    if (window.gaData["UA-123"].experiments[key] == 0) {

      console.log(`${key}: ${value}`);

      result += `
        <div>
          <p value="${key}">${key}:Test: ${key} is set to value: ${value}</p>
        </div>
        `
      document.getElementById('container').innerHTML = result;
    }
  });

我做错了什么？

在我的DOM中，我会看到：

"Test: TestB is set to value: 0"
"Test: TestB is set to value: 0"

而不是仅仅一次。

如果我的对象增长并且有多个键，值为0，那么当然，我也希望显示这些键。

但到目前为止，我不希望在DOM中两次显示我的值。

谢谢。

我正在创建一个chrome扩展，下面是完整的代码：

var actualCode = '(' + function() {
  var dataLayer = window.dataLayer;
  console.log('WINDOW', window);
  // console.log('DATALAYER', dataLayer);

  let result = '';

 Object.keys(window.gaData["UA-123"].experiments).forEach(function(key, value) {
if (window.gaData["UA-123"].experiments[key] == 0) {

  console.log(`${key}: ${value}`);

  result += `
    <div>
      <p value="${key}">${key}:Test: ${key} is set to value: ${value}</p>
    </div>
    `
  document.getElementById('container').innerHTML = result;
  }
 });

  if (dataLayer.ABTest) {
    console.log('True');

    if (dataLayer.ABTest.test) {
        console.log(dataLayer.ABTest.test);

        result += `
          <div class="container">
            <p>Date Launched: ${dataLayer.animal.test.date}</p>
            <p>Test ID: ${dataLayer.animal.test.id}</p>
            <p>Test Description: ${dataLayer.animal.test.name}</p>
            <p>Variant Active: ${dataLayer.animal.test.variant}</p>
            <button id="${dataLayer.animal.test.id}">Switch variant</button>
          </div>
          `
        document.getElementById('container').insertAdjacentHTML('beforeend', result);
        document.getElementById(dataLayer.animal.test.id).addEventListener('click', function() {
          console.log('clicked!')
          // Delete
          window.document.cookie = '_gaexp=COOKIE-1; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.abc.co.uk'
          // Add
          window.document.cookie = '_gaexp=COOKIE-2; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/; domain=.abc.co.uk'
          window.location.reload(); 
      });
    }
  }
} + ')();';

Answer 1

代之以：

if (window.gaData["UA-123"].experiments[key] == 0) {

在这方面：

if (window.gaData["UA-123"].experiments[key] == "0") {

您的数据包含字符串，而不是整数。