Object property changes after AJAX POST request

Question

I am building an app using node + express and I am making a POST request where I post an array of strings. However, when I print out the request body on the server side, the object property changes:

var test_array = ['1', '2', '3', '4'];

$.ajax({
  type: 'POST',
  url: 'some_url/',
  headers: {
        'x-access-token': 'some_token'
  },
  data: {
    myArray: test_array
  },
  success: function () {
    console.log('success!');
  },
  error: function (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
  }
});

HOWEVER, when i log out the request on the server side, I get:

console.log(req.body);

{ 'myArray[]': [ '1', '2', '3', '4' ] }

Does anyone know why myArray became myArray[] on the server side? Thanks in advance!

That's just how jQuery serializes array data for `application/x-www-form-urlencoded` encoding. How do you want the data to be read at the server, as JSON? — Phil, Nov 21 '16 at 23:56
Hi - I want the server side to read it as `myArray` instead of `myArray[]` — Trung Tran, Nov 22 '16 at 00:09

score 0 · Accepted Answer · answered Nov 22 '16 at 00:10

0

You can add contentType: 'application/json' and dataType: 'json' in the ajax post request to post the data as json to the server as below

var test_array = ['1', '2', '3', '4'];

$.ajax({
  type: 'POST',
  url: 'some_url/',
  headers: {
        'x-access-token': 'some_token'
  },
  contentType: 'application/json',
  dataType: 'json',
  data: {
    myArray: test_array
  },
  success: function () {
    console.log('success!');
  },
  error: function (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
  }
});

answered Nov 22 '16 at 00:10

Aruna

11,959
3
28
42

1

`dataType` refers to the response format, not the request. – Phil Nov 22 '16 at 02:19
@Phil Yeah agreed, we don't know whether he will send the json data back from the server. – Aruna Nov 22 '16 at 02:20
Did you actually try this, because for me it's still sending `myArray%5B%5D=1&myArray%5B%5D=2&myArray%5B%5D=3&myArray%5B%5D=4` (jQuery 1.12.4) – Phil Nov 22 '16 at 02:22
I haven't tried this, but I guess, is this because of `body-parser` module? – Aruna Nov 22 '16 at 02:26
Nothing to do with what happens server-side. Your answer is sending an `application/json` content-type header but it is not sending JSON, it is sending `application/x-www-form-urlencoded`. The result is the same in jQuery 1, 2 and 3 – Phil Nov 22 '16 at 02:28
Do you mean, `contentType: 'application/json'` and `data: {}` as passing as `application/x-www-form-urlencoded`? Please create a fiddle and I will check since it worked for me. I misunderstood your first question differently. – Aruna Nov 22 '16 at 02:31
@Phil May I know the reason, why you down vote it which worked for the user and me. If this is not working for you, you may have other issues where you need to raise different question? – Aruna Nov 22 '16 at 02:40
2

You got a downvote because this is generally bad advice. If it works for OP, it is pure luck or due to a badly written request parsing library. Simply, you are telling the server to expect JSON but you are not sending JSON. Any decent HTTP request handler will throw an exception on attempting to interpret the request. – Phil Nov 22 '16 at 02:59
What you should do is outlined here ~ http://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data – Phil Nov 22 '16 at 03:01

Object property changes after AJAX POST request

1 Answers1