JSON 在不同的 div 中显示键和值答案

【问题标题】：JSON display key and values in different divsJSON 在不同的 div 中显示键和值
【发布时间】：2017-06-09 13:46:07
【问题描述】：

我有一个 JSON 对象，它在一个长的单个对象（> 10,000 行）中有不同的键。如何使用js遍历每个键并在一个div中显示键并在另一个div中显示它的值？

我有一个保存这个对象的变量和控制台记录它们，我可以看到它们应该是的。但我的问题在于抓住每一个，因为钥匙总是不同的。通常 el.key 将获得您所追求的键/值，但由于键总是在对之间变化，我如何访问所有键并将它们发送到 div#keys 然后获取所有值并将它们发送到 div#价值观？

这是 JSON 对象的 sn-p：

示例 html：

<div id="keys">keys go here</div>
<div id="values">values go here</div>

谢谢，

塞尔吉奥

【问题讨论】：

k = Object.keys(obj); 和 v = k.map(x => obj[x]);。 jsfiddle

标签： javascript jquery html json

【解决方案1】：

var test = {10: 1,11: 1,13: 1,15: 1,20: 1,21: 2,22: 2,25: 2,28: 3,32: 
1,33: 3,37: 1,38: 1,39: 2,41: 1,45: 2};

for(var i in test){
    document.getElementById('keys').innerHTML += i + ' ,';
    document.getElementById('values').innerHTML += test[i] + ' ,';
}

【讨论】：

【解决方案2】：

您可以通过Object.keys(yourObject) 获取所有密钥。您也可以通过Object.entries(yourObject) 获取键值。一旦你有了一个包含所有键和所有值的数组，你可以简单地join 数组并将它添加到你的 div 中：

document.getElementById("keys").innerHTML = keys;

jsbin 在这里：https://jsbin.com/vabeboyexo/edit?html,js,output

【讨论】：

【解决方案3】：

我的 2 美分；

var input = {
  10: 1,
  11: 1,
  13: 1,
  15: 1,
  20: 1,
  21: 2,
  22: 2,
  25: 2,
  28: 3,
  32: 1,
  33: 3,
  37: 1,
  38: 1,
  39: 2,
  41: 1,
  45: 2
};

function createKV(kv, isKey) {

  var div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "100px";

  var color = isKey ? "green" : "blue";

  div.style.background = color;
  div.style.color = "white";
  div.innerHTML = kv;

  var placing = isKey ? "keys" : "values";

  document.getElementById(placing).appendChild(div);

}

for (var key in input) {
  console.log(key);
  createKV(key, true);
  console.log(input[key]);
  createKV(input[key], false);
}

https://jsfiddle.net/1k6ndwxb/1/

但是，它也可以做得非常不同：D

【讨论】：

【解决方案4】：

您可以在没有循环的情况下执行此操作：（仅适用于 Chrome 和 FireFox，因为其他浏览器尚不支持 Object.values(obj)）

var obj = {
  10: 1,
  11: 4,
  15: 2
};

document.getElementById("keys").innerHTML = Object.keys(obj);
document.getElementById("values").innerHTML = Object.values(obj);

<div id="keys">keys go here</div>
<div id="values">values go here</div>

【讨论】：

【解决方案5】：

$(YourJsonVar).each(function(){
$('#keys').append(this.key);
$('#values').append(this.value)

})

每个函数 (JQ) 用于迭代任何东西 ..从变量值到 dom 中的元素，所以你只是在你的 json 值上运行一个 for 循环

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。