Arrays in AJAX request JSON object data

Question

I am sending a request to a Node/Express server using jQuery thats data is a JSON object containing an array:

var data = {
    "name": "James Jamesy",
    "children": [
        {
            "name": "Tiny James",
            "age": "4"
        },
        {
            "name": "Little James",
            "age": "6"
        },
        {
            "name": "Graham",
            "age": "8"
        }
    ]
}

var request = $.ajax({
    method: 'PUT',
    url: apiPath + 'updateuser',
    data: data,
    dataType: 'json'
});

The request itself is working fine, however the server is reporting the data as:

{ 
    name: 'James Jamesy',
    'children[0][name]': 'Little James',
    'children[0][age]': '4',
    'children[1][name]': 'Medium James',
    'children[1][age]': '6',
    'children[2][name]': 'Graham',
    'children[2][age]': '8'
}

Now I've figured out that I can get my desired result by instead stringifying the children array:

var data = {
    "name": "James Jamesy",
    "children": JSON.stringify([ ... ])
}

And then JSON.parse()ing it on the server.

However I am hoping someone can explain why the array is converted as it is in the request, and whether I should be handling this a different way? As in this instance converting the single array is fine, but going forward I might have semi-complex objects I'm looking to send to the server.

Thanks in advance!

EDIT: Additionally and strangely(?), if I send the JSON result back as the passed JSON, it works perfectly:

res.json(JSON.parse(req.body.categories));

The browser logs out the object and I can manipulate it perfectly fine.

Try changing dataType: 'json' to contentType: 'json' in the ajax call — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Apr 6, 2017 at 4:13
Thanks for the response! Unfortunately this results in the server simply receiving an empty object. ({}) — stuntboots
– stuntboots, Commented Apr 6, 2017 at 4:16
I see a lot of JSON mistakes lol Are you using body parser in Express? — Luis Estevez
– Luis Estevez, Commented Apr 6, 2017 at 4:18
Since children is an array of objects, you will see children[0] to refer to the first entry, children[1] for the second entry. And then using bracket notation to add the properties seems like the way it is working to add properties to each of those array entries - children[0][name] is at least somewhat looking like bracket notation, although it's a little confusing because normally you would see children[0]["name"] in that case? So it is a little confusing as to what is happening. — Ken H.
– Ken H., Commented Apr 6, 2017 at 4:23
@LuisEstevez I'm working in someone else's framework, and just had a look and it does appear that it's using body-parser. Could this be what's causing the behaviour? — stuntboots
– stuntboots, Commented Apr 6, 2017 at 4:33

Luis Estevez · Accepted Answer · 2017-04-06 23:03:39Z

1

You weren't passing a JSON string through ajax which is why you couldn't handle the data on the back end.

var data = {
    "name": "James Jamesy",
    "children": [
        {
            "name": "Tiny James",
            "age": "4"
        },
        {
            "name": "Little James",
            "age": "6"
        },
        {
            "name": "Graham",
            "age": "8"
        }
    ]
}

var request = $.ajax({
    method: 'PUT',
    url: apiPath + 'updateuser',
    data: JSON.stringify(data),
    contentType: 'application/json', // for request
    dataType: 'json' // for response
});

answered Apr 6, 2017 at 23:03

Luis Estevez

1,41713 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Arrays in AJAX request JSON object data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related