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

Question

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

我

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

下面是 JSON 对象的片段：

{
   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
}

示例网页：

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

谢谢

塞吉奥

Answer 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] + ' ,';
}

Answer 2

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

div：

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

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

Answer 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

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

Answer 5

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

每个函数(JQ(用于迭代任何内容。从变量值到 DOM 中的元素，因此您只需对 JSON 值运行 for 循环