Uncaught SyntaxError: Unexpected token &lt; in JSON at position 0 at JSON.parse (<anonymous> ) 在 XMLHttpRequest.xmlhttp.onreadystatechange</anonymous>

Question

我想解析数据以显示到我的 html。 我收到此错误，但我不确定如何修复它。 有一段时间了。

我将此文件中的数据字符串化：

index.js：

    sqlDatabase.query("SELECT users.username, comments.comments, comments.date FROM users INNER JOIN comments ON users.user_id=comments.user_id",
        function(error, results, fields) {
            if (error) throw error;
            console.log(err);
            console.log(error);

            var object =
                JSON.parse(JSON.stringify({ results }))
            res.status(200).render('superhero-movies', object);
            // res.json(results);
            console.log(object);
        })
})

在此处输入图像描述然后在我收到错误的客户端上解析它：

超级英雄电影.js：

let username = document.querySelector('#username');
let date = document.querySelector('#date');
let comments = document.querySelector('#comments');
let submitbtn = document.querySelector('#submitbtn');
let commentOutput = document.querySelector('#message');

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var object = JSON.parse(this.responseText);
        console.log(object);


        document.getElementById('output').innerHTML = '';



        var results = JSON.parse(object);

        results.forEach((user) =>

            {

                var newName = document.createElement("h5");
                var newDate = document.createElement("h5");
                let newMessage = document.createElement("h6");


                newName = document.createTextNode(object.username);
                newDate = document.createTextNode(Object.date);
                newMessage = document.createTextNode(object.comments);

                output.appendChild(newName);
                output.appendChild(newDate);
                output.appendChild(newMessage);
            });
    }
}

xmlhttp.open("GET", "/superhero-movies", true);
xmlhttp.send();

任何帮助表示赞赏。 无法解决这个问题。 先感谢您。

Answer 1

问题似乎是你做了两个JSON.parse

        var object = JSON.parse(this.responseText);
        console.log(object);
        document.getElementById('output').innerHTML = '';
        // object is already an object
        var results = JSON.parse(object);

Answer 2

res.render期望通过两个 arguments：

• 模板名称
• 一个object ，其中包含要插入该模板的密钥/数据对

然后，默认情况下，它会输出 HTML 内容类型，并将数据合并到文档中。

您的第二个参数是一个字符串（JSON.stringify 的JSON.stringify ......无论如何，您传递的 arguments 都是无稽之谈）。 这将被转换为 object，但没有任何用处，因为它的唯一属性是其length中的字符数。

如果你想 output JSON 然后使用res.json ：

res.json(results);

---

 var object = JSON.parse(this.responseText); var results = JSON.parse(object);

这也没什么意义。 It is possible to double-encode JSON so you have a JSON representation of a string of JSON which in turn represents an object … but you shouldn't get yourself into that position in the first place.