繁体   English   中英

Node.js&Express:推入数组结果为“ [object Object]”

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM