[英]Node.js & Express: Pushing to array results in “[object Object]”
我是Web开发的新手,正在上一门课程。 在挑战主要项目之前,我正在设计一个测试Web服务器。 对于此测试,我一直在尝试从文本块中获取值并将其附加到响应部分,以确保刷新页面时不会丢失数据。
当前,当我按下按钮时,它会追加:[对象对象] [对象对象] [对象对象]
以下是此应用程序的3个文件
首先是index.html:
<html>
<head>
<title> Website Test </title>
</head>
<body>
<h1> Website Test </h1>
<p> press the button </p>
<input type="text" id="input_block">
<button id="test_button" onclick="sendData(document.getElementById
('input_block').value)"> Press Me Now </button>
<p id="response"></p>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>
接下来是StaticServerProgram:
var express = require("express");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.json());
app.use(express.static('public'));
var myData = [];
app.get("/data", function(req, res){
console.log(req.body);
res.json(myData).ProjectName;
});
app.post("/data", function (req, res){
console.log("POST Request to: /");
console.log(req.body);
res.send(req.body);
myData.push(req.body);
});
app.listen(3000, function() {
console.log("listening on port 3000");
})
最后是script.js:
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/data", true)
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
// got a response
console.log(xhr.responseText);
var arr = JSON.parse(xhr.responseText);
console.log(arr);
var s = "";
for (var i = 0; i < arr.length; i++) {
s+=arr[i];
}
document.getElementById("response").innerHTML = s;
}
};
}
function sendData(project_name){
console.log("sending POST to /data");
var obj = { ProjectName : project_name, ActivityName : "bites" };
var postXhr = new XMLHttpRequest();
postXhr.open("POST", "/data", true);
postXhr.setRequestHeader("Content-type", "application/json");
postXhr.send(JSON.stringify(obj));
getData();
}
getData();
任何对此问题的回应将不胜感激。 如果有人发现将来可能会出现问题,请发表评论。 谢谢!
[object Object]
意味着您正在将对象转换为字符串 。
这可能发生在客户端,带有s+=arr[i]
:
var s = "";
for (var i = 0; i < arr.length; i++) {
s+=arr[i];
}
要显示一个普通的Object
,您必须找到或创建一些东西来对其进行格式化。 一种选择是将它们转换回JSON:
s+=JSON.stringify(arr[i]);
或者,访问不是另一个对象的对象的属性。
s+=arr[i].ProjectName;
另外,此行在服务器端并没有达到您的期望:
res.json(myData).ProjectName;
如果仅要将项目名称发送给客户端,则必须遍历数组并创建另一个。 您可以使用.map()
做到这一点。
res.json(myData.map(d => d.ProjectName));
您收到的响应是一个对象数组。 您需要选择此对象内部的属性以显示数据。
for (var i = 0; i < arr.length; i++) {
s+=arr[i]['ProjectName'];
}
将响应附加到您的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.