eclipseIzHere eclipseIzHere - 2 months ago 7
Javascript Question

Formatting Objects with one property per line when represented as a string

I have an object:

var computer={
"Home":{},
"Desktop":{},
"Documents":{},
"Downloads":{},
"Library":{},
"Movies":{},
"Music":{},
"Pictures":{},
"Library":{},
"Downloads":{},
"Files":{},
"Devices":{},
"USB":{},
"Hard_Drive":{}
}


I output it into HTML with.

var exp=JSON.stringify(computer);
$("#targetDiv").append('<p class="text">'+exp+'</p>');


but the output is this:

{"Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},"Movies":{},"Music":{},"Pictures":{},"Files":{},"Devices":{},"USB":{},"Hard_Drive":{}}


Example:



var computer={
"Home":{},
"Desktop":{},
"Documents":{},
"Downloads":{},
"Library":{},
"Movies":{},
"Music":{},
"Pictures":{},
"Library":{},
"Downloads":{},
"Files":{},
"Devices":{},
"USB":{},
"Hard_Drive":{}
};

var exp=JSON.stringify(computer);
$("#targetDiv").append('<p class="text">'+exp+'</p>');

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





How do I format it so it would look like this?

{
"Home":{},
"Desktop":{},
"Documents":{},
"Downloads":{},
"Library":{},
"Movies":{},
"Music":{},
"Pictures":{},
"Files":{},
"Devices":{},
"USB":{},
"Hard_Drive":{}
}


I think I need a loop that loops through the output and whenever there is a
,
or a
}
, it puts a
<br/>
HTML tag, but I have no idea how to do that.

Answer

As Tushar mentioned, one way is to put the output of JSON.stringify() inside a <pre>.

$("#targetDiv").append('<pre>' + JSON.stringify(computer,null,1) + '</pre>');    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Set up the 'computer' variable:-->
<script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},
    "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{},
    "Devices":{},"USB":{},"Hard_Drive":{} }</script>
<div id="targetDiv"></div>

If you want to use a <pre>, but really don't want the whitespace at the beginning of each line (i.e. formatted exactly as in the desired output in the question):

$("#targetDiv").append('<pre>' + JSON.stringify(computer,null,1).replace(/^\s*/gm,'') + '</pre>');    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Set up the 'computer' variable:-->
<script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},
    "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{},
    "Devices":{},"USB":{},"Hard_Drive":{} }</script>
<div id="targetDiv"></div>

If you don't want to use a <pre>, you could separate the lines with a <br/>.

$("#targetDiv").append(JSON.stringify(computer,null,'<br/>').replace(/}\s*}/,'}<br/>}'));    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Set up the 'computer' variable:-->
<script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},
    "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{},
    "Devices":{},"USB":{},"Hard_Drive":{} }</script>
<div id="targetDiv"></div>

Alternately, you could enclose each line in a <p class="text"></p>. The code in your question implies that this is what you desire.

//Note: The following uses replace to both enclose each line in <p></p> and remove
//  all excess whitespace.  Removing the whitespace is not needed, but may be
//  desirable as including the whitespace results in additional text nodes between
//  each <p>.
$("#targetDiv").append(JSON.stringify(computer,null,1).replace(/^\s*([^\n]*)\n/gm,'<p class="text">$1</p>'));    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Set up the 'computer' variable:-->
<script>var computer={ "Home":{},"Desktop":{},"Documents":{},"Downloads":{},"Library":{},
    "Movies":{},"Music":{},"Pictures":{},"Library":{},"Downloads":{},"Files":{},
    "Devices":{},"USB":{},"Hard_Drive":{} }</script>
<div id="targetDiv"></div>