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

Question

I want to parse data to display to my html. I get this error, but I'm not sure how to fix it. Been on this for a while.

I stringify the data in this file:

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);
        })
})

enter image description here And then on my clients where I get the error is where a parse it:

superhero-movies.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();

Any help is appreciated. Can't wrap my head around this. Thank you in advance.

Answer 1

The problem seems to be that you make two 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 expects to be passed two arguments:

• A template name
• An object which contains the key/data pairs to be inserted into that template

It then, by default, outputs an HTML content-type with the data merged into the document.

Your second argument is a string (the output of JSON.stringify … into which the arguments you are passing are nonsense anyway). This will get converted to an object, but not in any useful way as the only properties it has are things like the number of characters in its length .

If you want to output JSON then use res.json :

res.json(results);

---

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

This also makes little sense. 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.