Iterate an API list and populate it in table

Muhammad Izzat

Greeting, I'm having trouble populating datatable data that coming from a API in a form of a list, when I populate it in my table, all the data are populated in 1 single row, can anyone help me with this, thanks

below is my code :

API :

[
    {
        "id": 9,
        "project_name": "Project A",
        "user": [
            "Person A",
            "Person B",
            "Person C",
        ]
    }
]

Javascript :

var artist_table = $('#artist-datatable').dataTable({
                    dom: 'Blrtip',
                    JQueryUI: true,
                    sScrollY: "350px",
                    responsive: false,
                    select: true,
                    ajax: {
                        url: "/api/scheduler/crew-list/" + project_id + "/?format=json",
                        dataSrc: ''
                    },
                    columns: [
                    {"data": "user", "class": "user_id"},

                ]
                })

colin

Hi Muhammad,

The data that's being sent doesn't match what you've configured. For example, do you want to show a user per row, or a project per row with multiple users in that row?

We've created a live example here for you, which as you can see, is using local data rather than AJAX sourced. I would suggest poking about with that until you get what you want, then revert back to trying the AJAX data source.

Hope that helps,

Colin