Node.js 和 Express：推送到数组会导致“[object Object]”答案

【问题标题】：Node.js & Express: Pushing to array results in "[object Object]"Node.js 和 Express：推送到数组会导致“[object Object]”
【发布时间】：2016-05-27 12:07:40
【问题描述】：

我是网络开发的新手，正在学习它的课程。在挑战主要项目之前，我正在设计一个测试 Web 服务器。对于此测试，我尝试从文本块中获取值，并将其附加到响应部分，同时进行此操作，以便在刷新页面时不会丢失数据。

当前当我按下按钮时，它会附加：[object Object][object Object][object Object]

以下是我为这个应用程序准备的 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();

对此问题的任何回应将不胜感激。如果有人认为将来可能会出现问题，请发表评论。谢谢！

【问题讨论】：

标签： javascript html arrays node.js express

【解决方案1】：

[object Object]的出现表示you're converting objects to strings。

这可能发生在客户端 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;

另外，这条线 server-side 并没有达到您的预期：

res.json(myData).ProjectName;

如果您只想将项目名称发送给客户端，则必须遍历该数组并创建另一个。你可以通过.map() 做到这一点。

res.json(myData.map(d => d.ProjectName));

【讨论】：

【解决方案2】：

您收到的响应是一个对象数组。您需要选择此对象内部的属性以显示数据。

for (var i = 0; i < arr.length; i++) {
 s+=arr[i]['ProjectName'];
}

将响应附加到您的元素。

【讨论】：

this 和 res.json(myData).ProjectName;乔纳森·洛诺夫斯基（Jonathan Lonowski）说的有效。你们是对的，这是对象属性的问题！