Showing Javascript Object Key/Value Pair on Webpage

Question

I am trying to display/append my Java script object on the webpage. I want to display each key and it's corresponding value.

Most of the questions that are similar to mine only have answers that suggest to log it to the console or alert it. Unfortunately, this is not what I want.

I have also tried JSON.stringify(), however this seems to just display a blog of text. If JSON.stringify() is the only way to print/output the objects key/values pairs to the document, is there anyway to style it?

The following is some that I have tried but with no prevail.

JSON.stringify(object, null, 4));

object.__proto__.toString();

Here is an example of what I want:

Name: John
Name: Bob
Name: Thomas

Without any JSON format curly brackets or any other formatting. Just plain text.

EDIT: I am indeed familiar with document.write(), this is not a solution. I need to APPEND to a web page that already has content, the key and value pairs of my Javascript object.

The Javascript object is dynamic and has a unknown length.

Something like this:

$('#container').html(object);
$('#container').append(object);

Can you share your code please? – hallleron Jul 18 '17 at 11:33 — hallleron, Jul 18 '17 at 11:33
append your key=>value pair to a div and style it – Alive to die - Anant Jul 18 '17 at 11:34 — Alive to die - Anant, Jul 18 '17 at 11:34

score 1 · Answer 1 · answered Jul 18 '17 at 11:38

1

const items =  { 'name': 'John', 'Rank': 2, 'Country': 'USA'  }

output.textContent = JSON.stringify(items, null, 2);

<pre id="output"></pre>

answered Jul 18 '17 at 11:38

Hassan Imam

21,956
5
41
51

score 1 · Accepted Answer · answered Jul 18 '17 at 11:50

1

You can do something like this:-

var mydata = {'Ram':'100 points','Shyam':'200 points','Fred-ii':'800 points'};

$.each(mydata,function(key,value){
   $('#my-div').append("<span>"+key +":- "+value+"</span>")

});

#my-div{
float:left;
width:100%;
background:rgb(249, 247, 249);
}

#my-div span {
    float: left;
    width: 100%;
}

span:nth-child(even){
  color:green;
}
span:nth-child(odd){
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

answered Jul 18 '17 at 11:50

Alive to die - Anant

70,531
10
51
98

Perfect, thank you. – Lars Peterson Jul 18 '17 at 11:53
@LarsPeterson glad to help you :):) – Alive to die - Anant Jul 18 '17 at 12:18

score -1 · Answer 3 · edited Jul 18 '17 at 13:03

-1

Loop through object in this way and do your work with key and value-

for (var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + " -> " + obj[key]);
}
}

edited Jul 18 '17 at 13:03

Alive to die - Anant

70,531
10
51
98

answered Jul 18 '17 at 11:36

Osama

2,912
1
12
15

Hi why this voted down ? – Osama Jul 18 '17 at 11:38
this is correct,so +1. But it's not the desired thing. OP want to show this to browser and try to change style of it also. – Alive to die - Anant Jul 18 '17 at 13:04
Ok I don't know if he want to use a div or a table or the way that he want to display the result I give only the way to get the key/value from an object – Osama Jul 18 '17 at 13:08
And may be if he work with json object so he know about append and html and appendBefore and appendAfter functions of jquery – Osama Jul 18 '17 at 13:09
you need to read OP question first carefully and then answer. Otherwise you will always come with a incomplete solution. BTW I have up-voted you not down-voted you – Alive to die - Anant Jul 18 '17 at 13:09
You are true about this. – Osama Jul 18 '17 at 13:11

Showing Javascript Object Key/Value Pair on Webpage

I am trying to display/append my Java script object on the webpage. I want to display each key and it's corresponding value.

3 Answers3