CODEWITHSUNDEEP
jqueryarraysimagehtmlpost
Rainer Sauerstoff
Rainer Sauerstoff

Reputation: 279

Posting array using formdata

I am using the new HTML5 FormData-Object to post some values and an image via Ajax. It works fine so far. Now, I want to post an array using this object, but all I´ve got on server-side is "[object - object]". How can I post an array with formdata?

What I´ve got so far

var formData=new FormData();
formData.append('text', $('#text').attr('value'));
formData.append('headline',$('#headline').attr('value'));
formData.append('myarray',{key1: 'bla', key2: 'blubb'});

The last line doesn´t work. I send the request with this code

                 $.ajax({
                        url: 'xyz',
                        data: formData,
                        type: 'POST',
                        processData: false,
                        contentType: false,
                        success: function(data) { 
                            var decoded=$.parseJSON(data);
                            displaySuccess('Success', decoded.message); 
                        },error: function(data){
                            var decoded=$.parseJSON(data);
                            displayError('Error', decoded.message);
                        },complete: function(data){
                            $('#cursor').hide();
                            $("#submitbutton").removeAttr('disabled')
                        }
                    });

Thanks in advance.

Upvotes: 9

Views: 32008

Answers (5)

Shailendra bind
Shailendra bind

Reputation: 11

my arrary list is like this

billlists = [{ Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "1"SizeNo2: "1"StoneColorCost: "20000"StoneColorWT: "0.006"Type: "1"__proto__: Object1: Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "0.5"SizeNo2: "0.7"StoneColorCost: "6"StoneColorWT: "0.005"Type: "1"},

{ Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "1"SizeNo2: "1"StoneColorCost: "20000"StoneColorWT: "0.006"Type: "1"__proto__: Object1: Color: "White"Quantity: "1"Shape: "2.0"SizeNo1: "0.5"SizeNo2: "0.7"StoneColorCost: "6"StoneColorWT: "0.005"Type: "1"}]

This code used to format data like key-value pairs

function serializeData(name, arr)
 {
   var a = [];
    for (var i = 0; i < arr.length; i++) 
        {
      for (var key in arr[i]) 
    {
 a.push({ name: name + '[' + i + '].' + key + '', value: arr[i][key] });
     }
        }
         return a;
                  }

  var mydata = serializeData('billlist', billlists);

  $.each(mydata, function (key, input) {
       fd.append(input.name, input.value);
            });

This is output of serialized Data 

0: {name: "billlist[0].Type", value: "1"}
1: {name: "billlist[0].Color", value: "White"}
2: {name: "billlist[0].Shape", value: "2.0"}
3: {name: "billlist[0].SizeNo1", value: "1"}
4: {name: "billlist[0].SizeNo2", value: "1"}
5: {name: "billlist[0].Quantity", value: "1"}
6: {name: "billlist[0].StoneColorWT", value: "0.006"}
7: {name: "billlist[0].StoneColorCost", value: "20000"}
8: {name: "billlist[1].Type", value: "1"}
9: {name: "billlist[1].Color", value: "White"}
10: {name: "billlist[1].Shape", value: "2.0"}
11: {name: "billlist[1].SizeNo1", value: "0.5"}
12: {name: "billlist[1].SizeNo2", value: "0.7"}
13: {name: "billlist[1].Quantity", value: "1"}
14: {name: "billlist[1].StoneColorWT", value: "0.005"}
15: {name: "billlist[1].StoneColorCost", value: "6"}

Its working for me

But in other post i seen data is pass like 

 {name: "billlist[0][Type]", value: "1"}

Way it not working for me

Upvotes: 0

Bill
Bill

Reputation: 46

From your syntax, you appear to be trying to pass an object, not an array. I don't think you can pass objects through HTML form.

{ key1 : value1 , key2 : value2 }

vs

[ value1, value2 ]

This is a handy reference to general JS syntax

Upvotes: 3

codegrid
codegrid

Reputation: 1007

Try this. It worked for me.

var files = $scope.myFile;
        var fd = new FormData();
        fd.append("file", files[0]);
        fd.append("assignment", JSON.stringify({ classAssignment: $scope.editItem }));

Upvotes: 2

Matt Stapleton
Matt Stapleton

Reputation: 196

Using .append() on each element of the associative array might produce the results you're expecting.

In place of this line:

formData.append('myarray',{key1: 'bla', key2: 'blubb'});

You might try the following: 

var myarray = {key1: 'bla', key2: 'blubb'};

jQuery.each(myarray, function(key, value) {
    formData.append('myarray['+key+']', value);
});

Upvotes: 16

Rainer Sauerstoff
Rainer Sauerstoff

Reputation: 279

Thanks. I now came up with this solution:

                for (i = 0; i < social_networks.length; i++) {
                    formData.append("myarray["+i+"][mykey]",arr[i]['mykey']);
                    formData.append("myarray["+i+"][mykey2]",arr[i]['mykey2']);
                }

Upvotes: 7

Related Questions