Iterating over a JSON object to add values to FormData in jquery

Question

I have a JSON object in jquery like this :-

userObj =
{ 
 "loginId":"abc123", 
 "class":"5", 
 "email":"[email protected]", 
 "level":"1"
}

I have to send a POST request to the server with multipart/form-data. I have created a FormData object :-

var fd = new FormData();

What I need to do is to iterate over each element in the JSON and append them to my variable fd. This is what I want :-

fd.append('loginId','abc123');
fd.append('class',5);
fd.append('email','[email protected]');

Any idea how to achieve this?

emaniacs · Accepted Answer · 2019-02-18 06:42:45Z

1

You can iterate the object using for

for (var key in userObj) {
  fd.append(key, userObj[key]);
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

answered Feb 18, 2019 at 6:42

emaniacs

1374 bronze badges

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

1 Comment

Akhil Ranjan Over a year ago

Thank you. I get the data on the server side. But the last element was a nested JSON element :-"userRole":{ "role":"STU", "level":"1" }, which doesn't go through. UserRole is null on the server-side whereas it should have been {"role":"STU", "level":"1"}

anshuraj · Accepted Answer · 2019-02-18 06:43:16Z

1

You can do it like this:

let userObj = { 
 "loginId":"abc123", 
 "class":"5", 
 "email":"[email protected]", 
 "level":"1"
};

let fd = new FormData();

for (let key in userObj){
    fd.append(key, userObj[key])
}

answered Feb 18, 2019 at 6:43

anshuraj

3421 gold badge5 silver badges17 bronze badges

Comments

Syed Mohammad Ali · Accepted Answer · 2019-02-18 06:52:04Z

1

var userObj = {
    "loginId": "abc123",
    "class": "5",
    "email": "[email protected]",
    "level": "1"
};
var keys = Object.keys(userObj);
var values = Object.values(userObj);
var fd = new FormData();
for (var i = 0; i < keys.length; i++) {
    fd.append(keys[i], values[i]);
}

answered Feb 18, 2019 at 6:52

Syed Mohammad Ali

1261 silver badge12 bronze badges

Comments

Icewine · Accepted Answer · 2019-02-18 06:56:14Z

1

var userObj =
{ 
 "loginId":"abc123", 
 "class":"5", 
 "email":"[email protected]", 
 "level":"1"
}
var fd = new FormData(); 
$.each(userObj, function(i, val) {
  console.log(i + " " + val);
  fd.append(i, val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Try something like this.

answered Feb 18, 2019 at 6:56

Icewine

1,8511 gold badge13 silver badges22 bronze badges

Comments

Aishwarya · Accepted Answer · 2019-02-18 06:46:59Z

0

let userObj = { 
 "loginId":"abc123", 
 "class":"5", 
 "email":"[email protected]", 
 "level":"1"
};

var newdata= new FormData();

 $.each(userObj, function (key, value) {
    newdata.append(key, userObj[key]);
    console.log(key, userObj[key])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Feb 18, 2019 at 6:46

Aishwarya

64510 silver badges22 bronze badges

Collectives™ on Stack Overflow

Iterating over a JSON object to add values to FormData in jquery

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related