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?
6 answers
solution1
2 2015-08-05 10:34:24
<!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>solution2
1 2015-08-05 10:28:40
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
solution3
1 2015-08-05 10:32:48
Create an element eg div or label inside the html body with a specific attribute egclass,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.
solution4
1 2015-08-05 10:33:07
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>
...
solution5
1 2020-01-22 11:44:43
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>
solution6
0 2019-11-19 00:50:31
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.