Javascript 在html中打印javascript数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31829826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
print javascript array in html
提问by Anand
Not sure how to print results onto HTML. I can do so through alerts. How do I print on the browser?
不确定如何将结果打印到 HTML 上。我可以通过警报做到这一点。如何在浏览器上打印？
<!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?
不确定如何将结果打印到 HTML 上。我可以通过警报做到这一点。如何在浏览器上打印？
回答by VizardCrawler
<!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>回答by bwright
Create an element in your HTML page that will contain the output and assign it an appropriate unique id, such as "target-id".
在您的 HTML 页面中创建一个包含输出的元素并为其分配适当的唯一 ID，例如“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.
然后使用下面的方法将所需的文本/HTML 插入该元素。
document.getElementById('target-id').innerHTML = 'html data';
See also: Inserting HTML into a div
另请参阅：将 HTML 插入 div
回答by NJInamdar
Create an element e.g. div or label inside the html body with a specific attribute e.g.class,id,name
使用特定的属性 egclass,id,name 在 html 正文中创建一个元素，例如 div 或 label
HTML
HTML
<label id="arrayMessage"> </label>
Javascript
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.
您可以使用元素的其他属性按类、名称或 html 标签类型获取它们。
回答by Neil Munro
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>
...
回答by Ismael Chery
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.
这是一个简单的解决方案，我们使用 JSON.stringify() 将对象数组转换为字符串。希望它是你想做的。
<!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>
回答by Plippie
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.
最简单的解决方案是使用带有缩进选项和标签的 JSON.stringify()。JSON.stringify(JSON,null,4) 4 个空格缩进。
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>