0

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);
Improve this question
2
  • Can you share your code please? Commented Jul 18, 2017 at 11:33
  • append your key=>value pair to a div and style it Commented Jul 18, 2017 at 11:34

3 Answers 3

Reset to default
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>

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

2 Comments

Perfect, thank you.
@LarsPeterson glad to help you :):)
1 

const items = { 'name': 'John', 'Rank': 2, 'Country': 'USA' } output.textContent = JSON.stringify(items, null, 2);
<pre id="output"></pre>

Improve this answer

Comments

-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]); } }
Improve this answer

6 Comments

Hi why this voted down ?
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.
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
And may be if he work with json object so he know about append and html and appendBefore and appendAfter functions of jquery
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.