'How to split list of values in a jQuery datatable?

I have a datatable that includes a column that has a list of values. For example, Activity Phase Dates has a list of comma-separated dates. I cannot use render: function (data) { return moment(data).format("MM/DD/YYYY"); because a list of dates is not a valid date.

How can I split this list of dates to then apply render: function (data) { return moment(data).format("MM/DD/YYYY");? I have tried split(','), but it does not work. Most likely because this list of values is not a string. I also tried replace(',', ' '), but also did not work for probably the same reason.

Actions:

    public JsonResult LoadApplications()
    {
        return Json(new { data = GetApplications("") }, JsonRequestBehavior.AllowGet);
    }

    private IEnumerable GetApplications(string keyword)
    {
        var applications = from a in _db.Applications
                           where a.AppNumber.ToString().Contains(keyword)
                               || a.NonCityMortgageDate.ToString().Contains(keyword)
                               || a.ApplicationActivityPhas.Any(d => d.ActivityPhaseDate.ToString().Contains(keyword))
                           select new
                           {
                               a.AppNumber, a.NonCityMortgageDate, 
                               ActivityPhaseDates = a.ApplicationActivityPhas.Select(d => d.ActivityPhaseDate).ToList(),
                               a.Id
                           };

        return applications;
    }

DataTable:

    $(document).ready(function () {
        $("#ApplicationDataTable").DataTable({
            ajax: {
                url: '@Url.Action("LoadApplications", "Application")',
                datatype: "json",
                type: "GET"
            },
            columns: [
                {
                    data: "AppNumber",
                    render: function (data, type, row) {
                        var applicationDetails = '@Url.Action("Details", "Application")/' + row.Id;
                        return '<a href=\"' + applicationDetails + '">' + data + '</a>';
                    }
                },
                {
                    data: "NonCityMortgageDate",
                    type: "date",
                    render: function (data) {
                        if (data != null) {
                            return moment(data).format("MM/DD/YYYY");
                        }
                        else {
                            return "";
                        }
                    }
                },
                {
                    data: "ActivityPhaseDates",
                    type: "date",
                    render: function (data) {
                        return moment(data).format("MM/DD/YYYY");
                    }
                },
                { data: "Id" }
            ]
        });
    });

Index:

    <div class="pt-2">
        <table class="table table-bordered table-sm" id="ApplicationDataTable">
            <thead class="table-info">
                <tr>
                    <th>Application Number</th>
                    <th>Non City Mortgage Date</th>
                    <th>Activity Phase Dates</th>
                    <th>Id</th>
                </tr>
            </thead>
        </table>
    </div>


Solution 1:[1]

The following is a solution:

{
    data: "ActivityPhaseDates",
    render: function (data) {
        var activityPhaseDates = "";
        for (var i = 0; i < data.length; i++) {
            activityPhaseDates += moment(data[i]).format("MM/DD/YYYY") + " ";
        }
        return activityPhaseDates;
    }
}

The output is:

03/14/2022 03/31/2022 03/31/2022 03/31/2022 03/31/2022

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lupe H