POST array data with javascript

Question

I'm trying to post some data to a http connector but cant figure out how i can post Array data...

My data Looks like that:

var data = [{ 
    key:'myKey',
    keyName:'myKeyName',
    value:'value',
    valueName:'valueName' 
}, { 
    key:'mySecondKey', 
    keyName:'mySecondKeyName',
    value:'secondValue',
    valueName:'secondValueName'
}, ...and so on ];

I try to post it via Ajax like this:

$.ajax({
    type:   "POST",
    url:    url,
    data:   data,
    error:  function(){
        alert("Error");
    },
    success: function(){
        alert("OK");
    }
});

The request Returns ok but when i look at the request data it Posts undefined=value&undefined=secondValue

How can i solve this? I Need to save all those informations for configurations

A simple post with just some keys and values like key=value&key2=value2 works like a charm.

You should serialize your json object before send it, like: data: JSON.stringify(data) — Alessandro
– Alessandro, Commented May 16, 2017 at 13:43
@Alessandro — Only if the server expects the data to be in JSON format … and only if you set the content-type header to match. — Quentin
– Quentin, Commented May 16, 2017 at 13:49

Woodrow · Accepted Answer · 2017-05-16 13:50:39Z

17

I'm assuming you're making a POST request with a JSON payload. First, you want to make sure your payload is formatted JSON correctly, use: http://pro.jsonlint.com/

Secondly, you can send the payload using JSON.stringify and you will want to set the contentType:

data: JSON.stringify(data), contentType: "application/json; charset=utf-8"

If you run this and look at your network tab in Dev Tools in Chrome, it will error out, but you will at least see the payload formatted to send to the server: http://prntscr.com/f8hf6s

var data = [{
    "key": "myKey",
    "keyName": "myKeyName",
    "value": "value",
    "valueName": "valueName"
  },
  {
    "key": "mySecondKey",
    "keyName": "mySecondKeyName",
    "value": "secondValue",
    "valueName": "secondValueName"
  }
];

var url = "http://swapi.co/api/";

$.ajax({
  type: "POST",
  url: url,
  data: JSON.stringify(data),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  error: function() {
    alert("Error");
  },
  success: function() {
    alert("OK");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 16, 2017 at 13:50

answered May 16, 2017 at 13:49

Woodrow

2,8221 gold badge17 silver badges20 bronze badges

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

1 Comment

Woodrow Over a year ago

Maybe, but it is a JS object array in his example, so I went with a default guess...

Collectives™ on Stack Overflow

POST array data with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related