如何減少 Javascript 代碼中的重復？

Question

我有 ASP.NET 代碼，它使用 JS 作為視圖的數據表。 我做了一些重復的代碼，因為我有 3 個表（在這種情況下）我有相同的列。 只是我從 controller 獲得的不同數據（json）。

這是JS代碼

<script type="text/javascript">

    function parseDate(date) {
        if (!date) {
            return ""
        }
        return new Date(parseInt(date.substr(6))).toLocaleString();
    }

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });

                $("#getAllToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });

        $("#getAll_wrapper").addClass("w-100");

    });

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllSentByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data?.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });


                $("#getAllSentToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });
    });

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllFailedByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });

                $("#getAllFailedToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });


    });

</script>

我可以減少這些代碼的重復。 如果可以，請幫助我。 所以我可以嘗試申請另一個有同樣問題的頁面。 謝謝你。

Answer 1

更新，@Roamer-1888 的建議終於我嘗試了，它有效！

function renderTable(action, tableId) {
    $.ajax({
        "url": action,
        "type": "GET",
        "datatype": "json",
        "success": function(res) {
            const mapped = res.data.map((dt) => {
                return {
                    ...dt,
                    CreatedDate: parseDate(dt.CreatedDate),
                    Status: dt.Status ? "Sukses" : "Gagal",
                    IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                };
            });

            $(tableId).DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "data": mapped,
                "dom": 'Bfrtip',
                "buttons": ['copy', 'excel'],
                "columns": [
                    { "data": "Nama" },
                    { "data": "NoHP" },
                    { "data": "Content" },
                    { "data": "Sender" },
                    { "data": "IsUsingTemplate" },
                    { "data": "Status" },
                    { "data": "CreatedDate" }
                ],
                columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                order: [0, 'desc'],
            });

        }
    });
}

$(document).ready(function() {
    renderTable("@Url.Action("GetAllByUser", "Dashboard")", "#getByUser")
    renderTable("@Url.Action("GetAllSentByUser", "Dashboard")", "#getSentByUser")
    renderTable("@Url.Action("GetAllFailedByUser", "Dashboard")","getFailedByUser")
});