JSON parse on a JSON string throws "Cannot convert object to primitive value"

Question

server.js

uses the body parser middleware, handlebars and express

route

module.exports = function (app) {
    app.post('/questionnaire/submit', function (req, res) { // Ajax Call
        var data = JSON.parse(req.body);
        res.send({});
    });
};

client

function submitData() { // Send a data object to the server
    $.ajax({
        type: 'POST',
        url: '/questionnaire/submit',
        dataType: "json",
        data: JSON.stringify({
            satisfactory: "text 1",
            improvement: "text 2",
            rating: 0.7
        })
    }).done(function () {
        $(location).attr('href', '/sendOff');
    }).fail(function () {

    });
}

when logging req.body I get a JSON string

{ '{"satisfactory":"text 1","improvement":"text 2","rating":0.7}': '' }

and I try to parse this string to an object. When I do so, I get this error message

     TypeError: Cannot convert object to primitive value
     at JSON.parse (<anonymous>)
     at C:\Users\mah\Desktop\FeedbackTool\Server\Routes\questionnaire.js:12:25
     at Layer.handle [as handle_request] (C:\Users\mah\node_modules\express\lib\router\layer.js:95:5)
     at next (C:\Users\mah\node_modules\express\lib\router\route.js:137:13)
     at Route.dispatch (C:\Users\mah\node_modules\express\lib\router\route.js:112:3)
     at Layer.handle [as handle_request] (C:\Users\mah\node_modules\express\lib\router\layer.js:95:5)
     at C:\Users\mah\node_modules\express\lib\router\index.js:281:22
     at Function.process_params (C:\Users\mah\node_modules\express\lib\router\index.js:335:12)
     at next (C:\Users\mah\node_modules\express\lib\router\index.js:275:10)
     at C:\Users\mah\node_modules\body-parser\lib\read.js:130:5

so how can I parse the string to an object?

Normally I would execute JSON.parse(req.body).

*"when logging req.body I get a JSON string"* That doesn't look like a JSON string to me. It looks like something with JSON in it, but the `{ '` at the beginning isn't JSON (and the end looks odd). — T.J. Crowder, Dec 05 '17 at 14:17
@T.J.Crowder It's a string in the form `{ '': '' }`, ie an entire JSON document as the key of another JSON document, except you can't choose to use `'` in JSON, so the outer document isn't valid. — meager, Dec 05 '17 at 14:19
@meagar: Property names and other strings are always in double quotes in JSON. (Edit: Ah, you edited. :-) ) And since the OP is using `JSON.stringify`, we know it won't have single-quoted strings... — T.J. Crowder, Dec 05 '17 at 14:20

Stamos · Answer 1 · 2017-12-05T14:26:09.983

Since you are using body-parser middleware then you dont have to parse req.body again cause it already parsed by body-parser

Example

if you used app.use(bodyParser.json())

then you just have to do this

module.exports = function (app) {
    app.post('/questionnaire/submit', function (req, res) { // Ajax Call
        var data = req.body; // this is already parsed and is an object
        res.send({});
    });
};

as pointed out by @T.J. Crowder you should also send the correct contentType so body-parser knows its json

function submitData() { // Send a data object to the server
    $.ajax({
        type: 'POST',
        url: '/questionnaire/submit',
        contentType: 'application/json',
        data: JSON.stringify({
            satisfactory: "text 1",
            improvement: "text 2",
            rating: 0.7
        })
    }).done(function () {
        $(location).attr('href', '/sendOff');
    }).fail(function () {

    });
}

Good point. This is the other half of the problem (the first half is [sending the right `contentType`](https://stackoverflow.com/a/47655729/157247)). — T.J. Crowder, Dec 05 '17 at 14:22

dhilt · Accepted Answer · 2017-12-05T14:28:59.073

5

You need to setup correct contentType:

$.ajax({
    type: 'POST',
    url: '/questionnaire/submit',
    contentType: 'application/json',
    data: JSON.stringify({ satisfactory: "text 1", rating: 0.7 })
});


app.post('/questionnaire/submit', function (req, res) { // Ajax Call
    var data = JSON.parse(req.body);
    console.log(data.rating); // 0.7
    res.send(data);
});

Also, with body-parser you may avoid JSON.parse calls on the server side, the link.

edited Dec 05 '17 at 14:28

answered Dec 05 '17 at 14:22

dhilt

13,532
6
48
67

But I didn't mention `body-parser` middleware... which is really important – dhilt Dec 05 '17 at 14:23

T.J. Crowder · Answer 3 · 2017-12-05T14:26:07.113

4

dataType doesn't say what type of data you're sending, it says what type of response you expect. You need to say that you're sending JSON, via contentType: "application/json" in your ajax call. Details in the documentation. (You're not the first or only person, by far, to be tripped up by the naming of dataType.)

That's half the problem. See Stamos' answer for the other half.

edited Dec 05 '17 at 14:26

answered Dec 05 '17 at 14:15

T.J. Crowder

879,024
165
1,615
1,639

JSON parse on a JSON string throws "Cannot convert object to primitive value"

3 Answers3