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: "[email protected]"
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "[email protected]"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "[email protected]"
        }];

        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
– RN Kushwaha, Commented Aug 5, 2015 at 10:55
using document.write puts in a single line. i would want all fields in separate lines — Anand
– Anand, Commented Aug 5, 2015 at 10:57

Risadinha · Accepted Answer · 2015-08-05 11:48:36Z

4

<!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: "[email protected]"
                }, {
                    firstname: "Ja",
                    lastname: "joe",
                    email: "[email protected]"
                }, {
                    firstname: "Janet",
                    lastname: "joes",
                    email: "[email protected]"
                }];
                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>

edited Aug 5, 2015 at 11:48

Risadinha

16.8k2 gold badges97 silver badges99 bronze badges

answered Aug 5, 2015 at 10:34

VizardCrawler

1,30310 silver badges16 bronze badges

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

2 Comments

Anand Over a year ago

this still displays the result in one line as the document.write statement

VizardCrawler Over a year ago

check it now and if u want the text area to look like Div u can edit its CSS accordingly

Nagama Inamdar · Accepted Answer · 2015-08-05 10:32:48Z

2

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.

answered Aug 5, 2015 at 10:32

Nagama Inamdar

2,85522 gold badges41 silver badges50 bronze badges

Comments

NMunro · Accepted Answer · 2015-08-05 10:33:07Z

2

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>
...

answered Aug 5, 2015 at 10:33

NMunro

9105 silver badges21 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:23:07Z

1

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';

Comments

Plippie · Accepted Answer · 2021-07-09 07:37:22Z

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 9, 2021 at 7:37

answered Jan 22, 2020 at 11:44

Plippie

2,88634 silver badges29 bronze badges

Comments

Ismael Chery · Accepted Answer · 2019-11-19 00:50:31Z

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: "[email protected]"`enter code here`
        }, {
            firstname: "Ja",
            lastname: "joe",
            email: "[email protected]"
        }, {
            firstname: "Janet",
            lastname: "joes",
            email: "[email protected]"
        }];
        myObject.forEach(element => {
   document.getElementById("elements").innerHTML= JSON.stringify(myObject); 
});


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

Collectives™ on Stack Overflow

print javascript array in html

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related