print javascript array in html

Question

Not sure how to print results onto HTML. I can do so through alerts. How do I print on the browser?

<!DOCTYPE html>
<html>
<body>
    <script>
        var parsed = "";
        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];

        for (i = 0; i < myObject.length; i++) {
            var myobj = myObject[i];
            for (var property in myobj) {
                parsed += property + ": " + myobj[property] + "\n";
                alert(property);
                alert(myobj[property]);
            }
        }            
        alert(parsed);
    </script>
</body>
</html>

Not sure how to print results onto HTML. I can do so through alerts. How can I print on the browser?

Use innerHTML property of any DOM element or use document.write. — RN Kushwaha, Aug 05 '15 at 10:55
using document.write puts in a single line. i would want all fields in separate lines — Anand, Aug 05 '15 at 10:57

score 4 · Answer 1 · edited Aug 05 '15 at 11:48

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     
        </head>
        <body>
            <textarea id="display" style="width:1000px;height:1000px"></textarea>
            <script>
                var parsed = "";
                var myObject = [{
                    firstname: "Jane",
                    lastname: "Doe",
                    email: "jdoe@email.com"
                }, {
                    firstname: "Ja",
                    lastname: "joe",
                    email: "je@email.com"
                }, {
                    firstname: "Janet",
                    lastname: "joes",
                    email: "jsse@email.com"
                }];
                for (i = 0; i< myObject.length; i++) {
                    var myobj=  myObject[i];
                    for (var property in myobj) {
                        parsed += property + ": " + myobj[property] + "\n";          
                    }
                }                           
                $("#display").val(parsed);            
            </script>
        </body>
    </html>

this still displays the result in one line as the document.write statement — Anand, Aug 05 '15 at 10:44
check it now and if u want the text area to look like Div u can edit its CSS accordingly — VizardCrawler, Aug 05 '15 at 11:05

score 2 · Answer 2 · answered Aug 05 '15 at 10:32

Create an element e.g. div or label inside the html body with a specific attribute e.g.class,id,name

HTML

<label id="arrayMessage"> </label>

Javascript

document.getElementById('arrayMessage').innerHTML = parsed ;

Jquery

$("#arrayMessage").html(parsed);

You can use other attributes of elements to fetch them by class,name or html tag type.

score 2 · Answer 3 · answered Aug 05 '15 at 10:33

You could use the simple:

document.write([1,2,3]);

But that ain't going to be too pretty and will override the existing page content.

You could do this:

...
<body>
  <div id="data"></div>
</body>

<script>
  var data = document.getElementById('data');
  myObject.forEach(function(element) {
     var firstname = document.create('div');
     var lastname = document.create('div');
     var email = document.create('div');

     firstname.innerHTML = element.firstname;
     lastname.innerHTML = element.lastname;
     email.innerHTML = element.email;

     data.appendChild(firstname);
     data.appendChild(lastname);
     data.appendChild(email);
  });
</script>
...

score 1 · Answer 4 · edited May 23 '17 at 12:23

Create an element in your HTML page that will contain the output and assign it an appropriate unique id, such as "target-id".

<html>
    <body>
         ...
         <div id="target-id"></div>
         ...
    </body>
</html>

Then use the method below to insert the desried text/HTML into that element.

document.getElementById('target-id').innerHTML = 'html data';

See also: Inserting HTML into a div

Plippie · Answer 5 · 2021-07-09T07:37:22.560

1

For the easiest solution is to use the JSON.stringify() with the indent option and using the tag. JSON.stringify(JSON,null,4) 4 space indent.

let pre = document.getElementById('output');
let jstring = JSON.stringify({ a: 1, b:2,c:3 }, null, 4);

pre.textContent = jstring;

pre{
border:1px solid grey;
min-height:10em;

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

edited Jul 09 '21 at 07:37

answered Jan 22 '20 at 11:44

Plippie

2,836
33
28

score 0 · Answer 6 · answered Nov 19 '19 at 00:50

This is a simple solution we convert the array of objects to a string using JSON.stringify(). hope that it what you want to do.

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>

    <p id="elements"> </p>
    <script>

        var myObject = [{
            firstname: "Jane",
            lastname: "Doe",
            email: "jdoe@email.com"`enter code here`
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "je@email.com"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "jsse@email.com"
        }];
        myObject.forEach(element => {
   document.getElementById("elements").innerHTML= JSON.stringify(myObject); 
});


        </script>
</body>
</html>

print javascript array in html

6 Answers6