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

我有一个JSON对象，在一个长的单个对象中有不同的键（>10000行）。如何使用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
}

示例html：

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

钥匙放在这里
价值观在这里

谢谢

---

Sergio

您可以通过

对象获取所有密钥。密钥（您的对象）

。您还可以通过

Object.entries（您的对象）

获取键值。一旦您拥有一个包含所有键和所有值的数组，您就可以简单地

加入该数组并将其添加到div中：

document.getElementById（“keys”）.innerHTML=keys

请点击这里：

each函数（JQ）用于迭代任何东西。从变量值到dom中的元素，因此您只需在json值上运行for循环

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

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);
}


但是，它也可以做得非常不同：D
您可以不使用循环来完成此操作，例如：（仅适用于Chrome和FireFox，因为其他浏览器尚不支持）


var obj={
10: 1,
11: 4,
15: 2
};
document.getElementById（“keys”）.innerHTML=Object.keys（obj）；
document.getElementById（“值”）.innerHTML=Object.values（obj）
钥匙放在这里
值位于此处
k=Object.keys（obj）和
v=k.map（x=>obj[x]）。虽然这段代码可以回答这个问题，但提供关于它如何和/或为什么解决问题的附加上下文将提高答案的长期价值。
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);
}