JSON display key and values in different divs

Question

I have a JSON object that has different keys in one long single object (> 10,000 lines). How can I iterate through each key and display the key in one div and its value in another div using js?

I have a variable holding this object and console logging them I can see them as they should be. But my problem lies in grabbing each one since the keys are always different. Normally el.key will get the key/value you are after but since the key is always changing from pair to pair how can I access all keys and send them to the div#keys and then grab all the values and send them to div#values?

Here's a snippet of the JSON object:

Sample html:

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

Thanks,

Sergio

k = Object.keys(obj); and v = k.map(x => obj[x]);. jsfiddle — Washington Guedes
– Washington Guedes, Commented Jun 9, 2017 at 13:52

srmeile · Accepted Answer · 2017-06-09 14:00:52Z

3

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

edited Jun 9, 2017 at 14:00

answered Jun 9, 2017 at 13:53

srmeile

4684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ttncrch · Accepted Answer · 2017-06-09 13:56:31Z

3

You can get all keys via Object.keys(yourObject). You can also get the key value via Object.entries(yourObject). Once you have an array with all key and all value, you can simply join the array and add it to your div :

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

jsbin here : https://jsbin.com/vabeboyexo/edit?html,js,output

edited Jun 9, 2017 at 13:56

answered Jun 9, 2017 at 13:49

ttncrch

7,31311 gold badges39 silver badges62 bronze badges

Comments

nettutvikler · Accepted Answer · 2017-06-09 13:55:37Z

My 2 cents;

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/

But, it can be done very differently too :D

palaѕн · Accepted Answer · 2017-06-09 14:02:43Z

1

You can do this without loop like: (Works only in Chrome & FireFox as Object.values(obj) is not supported yet in other browsers)

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>

answered Jun 9, 2017 at 14:02

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

RAHUL S R · Accepted Answer · 2017-06-10 19:11:16Z

0

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

})

the each function (JQ) is used for iterating anything ..from variable values to elements in the dom so you are just running a for loop over your json value

edited Jun 10, 2017 at 19:11

answered Jun 9, 2017 at 13:51

RAHUL S R

1,5891 gold badge12 silver badges22 bronze badges

1 Comment

Badacadabra Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

JSON display key and values in different divs

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related