CODEWITHSUNDEEP
javascriptjqueryarrays
Anand
Anand

Reputation: 21

print javascript array in html

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?

Upvotes: 2

Views: 68025

Answers (6)

Plippie
Plippie

Reputation: 2886

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>

Upvotes: 1

Ismael Chery
Ismael Chery

Reputation: 1

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>

Upvotes: 0

VizardCrawler
VizardCrawler

Reputation: 1303

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

Upvotes: 4

NMunro
NMunro

Reputation: 910

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

Upvotes: 2

Nagama Inamdar
Nagama Inamdar

Reputation: 2857

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.

Upvotes: 2

bwright
bwright

Reputation: 347

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

Upvotes: 1

Related Questions