JavaScript print Array to HTML | Example code

  • by

Create an element in your HTML page that will contain the output and assign it an appropriate unique id, such as “target-id”. Then use innerHTML and getElementById to print Array to HTML using JavaScript.

JavaScript print Array to HTML

Simple example code printing array elements.

<!DOCTYPE html>
<html>
<body>
  <pre id="arrPrint"></pre>

  <script>
    let arr = ["Jack", "Mike", "Steve"];
    document.getElementById("arrPrint").innerHTML = arr;
  </script>
  
</body>
</html>

Output:

You can loop over the array and print each element to the console as follows:

let arr = ["A", "B", "C"];

for(let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

Output:

> "Jack"
> "John"
> "James"

Print JavaScript array in HTML using jQuery

<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";          
                    }
                }                           
</script>

Output:

firstname: Jane
lastname: Doe
email: [email protected]
firstname: Ja
lastname: joe
email: [email protected]
firstname: Janet
lastname: joes
email: [email protected]

Do comment if you have any doubts or suggestions on this JS print topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.