javascriptで連想配列をx-www-form-urlencodedで送信する方法がわからなくて困っています。

Question

javascriptで連想配列をapplication/x-www-form-urlencodedで送信する方法がわからなくて困っています。
サーバー側プログラムの都合により、application/jsonではうまくいかなく、application/x-www-form-urlencodedで送信しようとしています。

この形式のデータ送信を行いたいです。dataで単一オブジェクトを送信はうまくいくのですが、
連想配列(配列に入れているオブジェクト)ではうまく送信ができなく困っています。

Server側のオブジェクトのプロパティ名は大文字で始まるため、送信時は合わせています。
どなたかご教授お願いします。

// 送信したいデータ
const data = [
    { Id: 1, Name: Test1 },
    { Id: 2, Name: Test2 }
];

// (OK)　dataで単一オブジェクトを送信

// dataをURLSearchParamsで変換
const data = {
    Id: 1,
    Name: Test1
}

const param = getUrlSearchParams(data);

function getUrlSearchParams(data) {
    var params = new URLSearchParams();
    Object.keys(data).forEach(function (key) {
        if (key == "Id") {
            params.append(key, data[key]);
        } else {
            if (data[key] != null) {
                params.append(key, data[key]);
            } else {
                params.append(key, "");
            }
        }
    });

    return params;
}

// Send
axios({
    method: "post",
    url: "/Tests/Register"
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    data: param
}).then((response) => {
    console.log("Ok");
}).catch((response) => {
    console.log("NG");
});

// (NG)　連想配列(配列に入れているオブジェクト)を送信しようとしているがうまくいかない

// dataをURLSearchParamsで変換
const data = [
    { Id: 1, Name: Test1 },
    { Id: 2, Name: Test2 }
];

const params = tempRowData.reduce((accumulator, currentValue) => {
    accumulator.push(getUrlSearchParams(currentValue));
    return accumulator; 
}, []);

function getUrlSearchParams(data) {
    var params = new URLSearchParams();
    Object.keys(data).forEach(function (key) {
        if (key == "Id") {
            params.append(key, data[key]);
        } else {
            if (data[key] != null) {
                params.append(key, data[key]);
            } else {
                params.append(key, "");
            }
        }
    });

    return params;
}

// Send
axios({
    method: "post",
    url: "/Tests/Register"
    headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
    },
    data: params
}).then((response) => {
    console.log("Ok");
}).catch((response) => {
    console.log("NG");
});

// サーバー側

[HttpPost]
public async Task<IActionResult> Register(IList<Test> tests) {
    // ...

Answer 1

サーバ側の仕様が不明ですが、ともかく1つのリクエストでURLSearchParamsは1つしか送れないので、単純に1つのURLSearchParamsに足し込めばよいのでは。

function getUrlSearchParams(dataList) {
    var params = new URLSearchParams();
    dataList.forEach(data => {
        Object.keys(data).forEach(function (key) {
            if (key == "Id") {
                params.append(key, data[key]);
            } else {
                if (data[key] != null) {
                    params.append(key, data[key]);
                } else {
                    params.append(key, "");
                }
            }
        });
    });

    return params;
}

const params = getUrlSearchParams(data);

Id=1&Name=Test1&Id=2&Name=Test2 のようなパラメータになります。

Comments

[退会済みユーザー]

コメントありがとうございます。

1つのリクエストでURLSearchParamsは1つしか送れないとのことで、試してみました。
教えて頂いたコードではできませんでしたが、下記の通りで実施することができました。

サーバー側の仕様で実際には下記の形式にする必要がありました。

Tests[0].Id=1&Tests[0].Name=Test1&Tests[1].Id=2&Tests[1].Name=Test2

Answer 2

■　x-www-form-urlencodedで送信する方法

サーバー側の仕様で、データを次の形式にしてから、URLSearchParamsで変換する必要があった。Tests[0].Id=1&Tests[0].Name=Test1&Tests[1].Id=2&Tests[1].Name=Test2

(追記)
x-www-form-urlencodedの質問の趣旨とはずれてしまいますが、
サーバー側の仕様？で　本来、application/jsonで送信したかったのですが失敗していました。
その原因が、日付がISO8601形式ではなかったことが原因でした。

x-www-form-urlencodedだとURLSearchParamsで変換するコードが必要なので、
場合にもよりますが、なるべくapplication/jsonでシンプルにPOSTした方がいいかもしれません。