Search code examples
javascriptform-data

Is it not possible to use FormData.append in a loop?


This is an ajax call that is able to get current time and change to string with the format that users needed. Because I want to encapsulate the ajax call, I made an array with key-value pairs. I want to use formData.append to put parameters to make an Ajax call. I wrote some code shown below but when I passed an array with only 1 object, after formdata.append executed, formdata is still empty, and make my ajax call unable to get my ideal result. Could I know where I was wrong?

var Data=[{ "NAME": "DATEFORMAT", "VALUE": "yyyy/MM/dd HH:mm:ss" }];
var formData = new FormData();
for (var i = 0; i < Data.length; i += 1) {
    var x=Data[i];
    formData.append(x.NAME, x.VALUE);
}
$.ajax({
    url: "SomeFunction.ashx",
    headers: {
        "X-Requested-With": "XMLHttpRequest",
        "Requested-Type": "DateTimeToString"
    },
    method: "post",
    data: formData,
    processData: false,
    contentType: false,
    success: function (retdata) {
        resolve(retdata);
    },
    error: function (err) {
        reject(err);
    }
});

Solution

  • As I mentioned in the comments, your for loop and formData is working just fine.

    If you add a console.log(formData.get(x.NAME)) inside the for loop, you will see, that the data is successfully being appended to the formData element.

    So your problem is in your ajax request.

    var Data=[{ "NAME": "DATEFORMAT", "VALUE": "yyyy/MM/dd HH:mm:ss" }];
    var formData = new FormData();
    for (var i = 0; i < Data.length; i += 1) {
        var x=Data[i];
        formData.append(x.NAME, x.VALUE);
        console.log(formData.get(x.NAME));
    }