javascript - How To Write Object To Document with document.write()

admin管理员组
文章数量:1022631

I have a simple app that counts repeating numbers inside of an array. Users enter numbers through prompt (i.e. 2, 1, 2, 2).

And when I want to output the result (which is an object) through document.write() function I get: [object Object]

When I output it through console I get the result I expect: Object {2: 3, 1:1}

Down below is html and js, and Plunkr can be found here

I would like the results of the object to be written on the page...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    JAVASCRIPT AND JQUERY STUFF -->
<script src=".2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
</head>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + counts);
});

I have a simple app that counts repeating numbers inside of an array. Users enter numbers through prompt (i.e. 2, 1, 2, 2).

And when I want to output the result (which is an object) through document.write() function I get: [object Object]

When I output it through console I get the result I expect: Object {2: 3, 1:1}

Down below is html and js, and Plunkr can be found here

I would like the results of the object to be written on the page...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    JAVASCRIPT AND JQUERY STUFF -->
<script src="https://code.jquery./jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
</head>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + counts);
});

Share Improve this question asked Sep 4, 2017 at 11:35 prius 1131 gold badge4 silver badges12 bronze badges

You can't. Because HTML itself can't parse objects. You can serialize it to a string though. – Red Commented Sep 4, 2017 at 11:37
I tried using String(counts) but it didn't work. JSON.stringify(counts) did the trick however. Thanks a bunch you guys. – prius Commented Sep 4, 2017 at 11:47
1 string(counts) (does that function even exist?) is wrong. JSON.stringify is correct. See my awnser with the fiddle. – Red Commented Sep 4, 2017 at 11:47
Well, probably not :)... Yup.. I did it your way and it works beautifully.. Thanks – prius Commented Sep 4, 2017 at 19:11

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

You can't. HTML can't parse objects. You can however convert the object to a string

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + JSON.stringify(n) + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

<script src="https://code.jquery./jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>

<div id="content"></div>

Use JSON.stringify(counts) to serialize you object and you can print it in the HTML

document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

You can convert the object to string using JSON.stringify(counts)

$(document).ready(function(){
  var n = prompt("Enter your numbers").split(",");
  console.log(n);
  var counts = {};
  n.forEach(function(x){ 
    counts[x] = (counts[x] || 0) +1; 
  });
  console.log(counts);
  document.write(
  "<h1>Enter numbers when prompted!</h1>" +
  "<p>You entered following numbers:</p>" + n + "<br/>" +
  "<p>The occurence is as follows:</p>" + counts);
});

I have a simple app that counts repeating numbers inside of an array. Users enter numbers through prompt (i.e. 2, 1, 2, 2).

And when I want to output the result (which is an object) through document.write() function I get: [object Object]

When I output it through console I get the result I expect: Object {2: 3, 1:1}

Down below is html and js, and Plunkr can be found here

I would like the results of the object to be written on the page...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    JAVASCRIPT AND JQUERY STUFF -->
<script src=".2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
</head>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + counts);
});

I have a simple app that counts repeating numbers inside of an array. Users enter numbers through prompt (i.e. 2, 1, 2, 2).

And when I want to output the result (which is an object) through document.write() function I get: [object Object]

When I output it through console I get the result I expect: Object {2: 3, 1:1}

Down below is html and js, and Plunkr can be found here

I would like the results of the object to be written on the page...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--    JAVASCRIPT AND JQUERY STUFF -->
<script src="https://code.jquery./jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
</head>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>
</body>
</html>

JAVASCRIPT

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + counts);
});

Share Improve this question asked Sep 4, 2017 at 11:35 prius 1131 gold badge4 silver badges12 bronze badges

You can't. Because HTML itself can't parse objects. You can serialize it to a string though. – Red Commented Sep 4, 2017 at 11:37
I tried using String(counts) but it didn't work. JSON.stringify(counts) did the trick however. Thanks a bunch you guys. – prius Commented Sep 4, 2017 at 11:47
1 string(counts) (does that function even exist?) is wrong. JSON.stringify is correct. See my awnser with the fiddle. – Red Commented Sep 4, 2017 at 11:47
Well, probably not :)... Yup.. I did it your way and it works beautifully.. Thanks – prius Commented Sep 4, 2017 at 19:11

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

You can't. HTML can't parse objects. You can however convert the object to a string

$(document).ready(function(){
var n = prompt("Enter your numbers").split(",");
console.log(n);
var counts = {};
n.forEach(function(x){ 
counts[x] = (counts[x] || 0) +1; 
});
console.log(counts);
document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + JSON.stringify(n) + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

<script src="https://code.jquery./jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous">

</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>
<script src="number-list.js"></script>
<body>
<h1>Enter numbers when prompted!</h1>
<p>Here are the numbers entered on the left and frequency of occurence on the right.</p>

<div id="content"></div>

Use JSON.stringify(counts) to serialize you object and you can print it in the HTML

document.write(
"<h1>Enter numbers when prompted!</h1>" +
"<p>You entered following numbers:</p>" + n + "<br/>" +
"<p>The occurence is as follows:</p>" + JSON.stringify(counts));
});

You can convert the object to string using JSON.stringify(counts)

$(document).ready(function(){
  var n = prompt("Enter your numbers").split(",");
  console.log(n);
  var counts = {};
  n.forEach(function(x){ 
    counts[x] = (counts[x] || 0) +1; 
  });
  console.log(counts);
  document.write(
  "<h1>Enter numbers when prompted!</h1>" +
  "<p>You entered following numbers:</p>" + n + "<br/>" +
  "<p>The occurence is as follows:</p>" + counts);
});

本文标签： javascriptHow To Write Object To Document with documentwrite()Stack Overflow

版权声明：本文标题：javascript - How To Write Object To Document with document.write() - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745526284a2154538.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - How To Write Object To Document with document.write() - Stack Overflow

3 Answers 3

3 Answers 3

更多相关文章