JSON 值的迭代只会将一个值打印到 DOM答案

【问题标题】：Iteration of JSON values only prints out one value to the DOMJSON 值的迭代只会将一个值打印到 DOM
【发布时间】：2018-03-09 20:35:15
【问题描述】：

for (var of Object.values()) 只打印一个值，而不是全部。

不明白为什么会发生这种情况，因为它应该遍历每个值并打印出所有值。

现在只有第一个块显示值，而另一个不显示。我已将 cmets 放入 HTML，以便您可以看到应该在哪里打印来自 JSON 的结果。

const response = {
  "internal": {
    "services": {
      "core": "OK",
      "comments": "NOK",
      "id": "OK"
    },
    "db": {
      "pgsql": "OK",
      "redis": "OK"
    }
  },
  "external": {
    "gitlab": "OK",
    "trello": "OK",
    "geonames": "OK"
  }
}
const json = JSON.parse(response);

// Internal
for (let value of Object.values(json.internal.services)) {
  if (value === 'OK') {
    d3.select('#p-status').html('<p>No issues</p>');
    d3.select('.status-icon').html('<i class="fas fa-check-circle"></i>');
    d3.select('.status').classed('no-issues', true);
    loading.remove;
  } else {
    d3.select('#p-status').html('<p>Has issues</p>');
    d3.select('.status-icon').html('<i class="fas fa-exclamation-circle"></i>');
  }
}

// External
for (let value of Object.values(json.external)) {
  if (value === 'OK') {
    d3.select('#p-status').html('<p>No issues</p>');
    d3.select('.status-icon').html('<i class="fas fa-check-circle"></i>');
    d3.select('.status').classed('no-issues', true);
    loading.remove;
  } else {
    d3.select('#p-status').html('<p>Has issues</p>');
    d3.select('.status-icon').html('<i class="fas fa-exclamation-circle"></i>');
  }
}

body>div>div>div>div {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 2.5%;
  box-shadow: 0 0 10px #bfbfbf;
}

.fa-react {
  font-size: 24px;
  color: cyan;
}

.fa-comment {
  font-size: 24px;
}

.p-name {
  border-bottom: 1px solid #bfbfbf;
  padding-bottom: 10px;
  margin-bottom: 0;
}

#p-status {
  font-weight: 700;
  padding-top: 10px;
  margin-top: 0;
}

#p-status p {
  margin-top: 0;
}

.group {
  padding: 0 10px;
}

.status-icon {
  float: right;
}

.fa-check-circle {
  font-size: 28px;
  color: green;
  padding-right: 5px;
}

.fa-exclamation-circle {
  font-size: 28px;
  color: red;
  padding-right: 5px;
  animation: pulseEff 1.5s infinite;
}

@keyframes pulseEff {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.has-issues {
  border: 1px solid red;
}

.no-issues {
  border: 1px solid green;
}

<div class="col-lg-6 col-md-12 col-xs-11">
  <div class="status">
    <div class="group">
      <div class="row middle-xs">
        <div class="col-lg-1 col-xs-2">
          <i class="fab fa-react"></i>
        </div>
        <div class="col-lg-3 col-xs-4">
          <p class="p-name">Core</p>
          <div id="p-status">
            <!-- this gets removed after the values are available, loading animation -->
            <img src="./src/img/Double Ring-3s-200px.gif" width="30" height="30" alt="loading-animation">
          </div>
        </div>
        <div class="col-lg-8 col-xs-6">
          <div class="status-icon">
            <!-- this gets removed after the values are available, loading animation -->
            <img src="./src/img/Double Ring-3s-200px.gif" width="30" height="30" alt="loading-animation">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-6 col-md-12 col-xs-11">
  <div class="status">
    <div class="group">
      <div class="row middle-xs">
        <div class="col-lg-1 col-xs-2">
          <i class="fas fa-comment"></i>
        </div>
        <div class="col-lg-3 col-xs-4">
          <p class="p-name">Comments</p>
          <div id="p-status">
            <!-- this gets removed after the values are available, loading animation -->
            <img src="./src/img/Double Ring-3s-200px.gif" width="30" height="30" alt="loading-animation">
          </div>
        </div>
        <div class="col-lg-8 col-xs-6">
          <div class="status-icon">
            <!-- this gets removed after the values are available, loading animation -->
            <img src="./src/img/Double Ring-3s-200px.gif" width="30" height="30" alt="loading-animation">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

感谢任何帮助。我会回复每条评论和答案。

【问题讨论】：

大量无用的代码噪音。您可以将其本地化为几行代码。这样做时，您很有可能会自己发现问题。
一开始我想剪一些代码，但我想我应该把所有制作组件的代码都贴上去，相信我什至尝试了不同的方法，没有结果。
@JaredSmith 试过，打印出OK。

标签： javascript for-loop iteration

【解决方案1】：

不需要JSON.parse，它已经是一个对象了。

【讨论】：

const json = JSON.parse(response);
确实如此。我的错，那会抛出并且几乎可以肯定是问题的（部分）。
是的，我确实需要，控制台会抛出 Cannot read property of services of undefined，但是当我解析对象时，它会打印出值。我放了一个静态数据，我需要的数据来自服务器。
是的，没错，我看到你的 JS Bin 正在显示我需要的结果。如果我的代码没问题，我想知道为什么它只将结果打印到 DOM 中的一个节点而不是所有节点。
@VladimirJovanović，所以我尝试了几件事。 1. 你提到了 Object.entries(obj) 这行为如下：for(let val of Object.entries(json.internal.services)){ console.log(val) } output: ["core", "OK"] ["cmets", "NOK"] ["id", "OK"] 2. 你使用for (let val of Object.values(json.internal.services)) { console.log(val) } 输出：“OK”“NOK”“OK”所以你的解决方案如你所愿。见这里：链接（jsbin.com/yukabibise/edit?html,css,js,console,output）

【解决方案2】：

我的猜测是，因为您没有确定选择范围，所以您一直在打印最后一个值。使用for 循环并减少一点噪音..

var values=['a', 'b', 'c'];
for(var val of values) {
    d3.select('#someEl').html(val);
}

如果我对 d3.select 的理解正确，它每次都会选择相同的元素，对吧？如果是这样，您将在每次迭代中覆盖之前的值：

val=a，结果为<div id="someEl">a</a>
val=b，结果为<div id="someEl">b</a>
val=c，结果为<div id="someEl">c</a>

您可能想要附加您的内容..

var values=['a', 'b', 'c'];
for(var val of values) {
    d3.select('#someEl').append("<span>" + val + "</span>");
}

【讨论】：

试过了，它不起作用，但你对you're getting the last value printed all the time 是对的，这就是正在发生的事情。没关系，我会想办法的。

【解决方案3】：

我决定稍微思考一下，深入分析我的代码，大约一个小时后，我设法解决了我的问题。问题不在for () 方法中，而是我错误地使用了d3.js 中的错误函数。

所以不要使用

d3.select('class').html();

我不得不使用

d3.selectAll('class').html();

我设法通过在Chrome Developer Tools 中使用Event Listener Breakpoints 解决了这个问题。我注意到 for () 方法可以正常工作，但它只选择 DOM 中同名的第一个 class 节点，而不选择其余节点。将代码从d3.select() 重写为d3.selectAll() 后，问题已得到修复。

我想“继续努力，不要放弃”最终会得到回报。

【讨论】：