how to loop inside datatables?

Sultan216

so I have a json like this

{
    "data": [
        {
            "ID": 2,
            "CreatedAt": "2021-03-14T08:38:36.285+07:00",
            "UpdatedAt": "2021-03-14T08:38:36.446+07:00",
            "title": "Mercenary Enrollment",
            "alternative": "입학용병; Ibhag yongbyeong",
            "Chapter": [
                {
                    "ID": 30,
                    "CreatedAt": "2021-03-14T08:42:31.244+07:00",
                    "UpdatedAt": "0001-01-01T00:00:00Z",
                    "Name": "Chapter 2",
                    "Slug": "chapte-2",
                    "ChapterRefer": 2
                },
                {
                    "ID": 31,
                    "CreatedAt": "2021-03-14T08:45:23.682+07:00",
                    "UpdatedAt": "0001-01-01T00:00:00Z",
                    "Name": "Chapte 2",
                    "Slug": "chapte-2",
                    "ChapterRefer": 2
                }
            ]
        }
    ]
}

then how to call only the name of the chapter to be included in the datables via ajax? I've tried the tutorial from this website and it's still failing. Please help me

colin

I'm not clear what you're after, but if you want the Chapter data in the table, set ajax.dataSrc to be data.Chapter,

Colin

Sultan216

@colin
after doing that, I got an error
"Uncaught TypeError: Cannot read property 'length' of undefined"
this is the code i use

$(document).ready(function () {
            var t = $('.broh').DataTable({
                "ajax": {
                    "url": xoxoxo,
                    "dataSrc": "data.Chapter",
                },
                "columns": [{
                        "data": "ID"
                    },
                    {
                        "data": "Name"
                    },
                    {
                        "data": null
                    },
                ],
                "columnDefs": [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                }],
                "language": {
                    "paginate": {
                        "previous": `
                        <i class="fas fa-angle-left"></i>
                        `,
                        "next": `
                        <i class="fas fa-angle-right"></i>
                        `
                    }
                },
                "order": [
                    [1, 'asc']
                ]
            });

            t.on('order.dt search.dt', function () {
                t.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
        })

colin

That's because you've defined both columns and columnDefs. Remove columnDefs, and add those options to columns, something like:

                "columns": [{
                        "data": "ID",
                        "searchable": false,
                        "orderable": false
                    },
                    {
                        "data": "Name"
                    },
                    {
                        "data": null
                    },
                ],
                "language": {
                    ...

Colin

Sultan216

@colin still error "Uncaught TypeError: Cannot read property 'length' of undefined
"
this is the code

<div class="table-responsive ">
    <table class="table table-flush broh">
        <thead class="thead-light">
            <tr>
                <th>No</th>
                <th>Chapter</th>
                <th>Action</th>
            </tr>
        </thead>

    </table>
</div>

var base = window.location.origin;
var title = $(".title").val();
var cokxx = encodeURIComponent(title.trim());
var xoxoxo = base + "/api/post/" + cokxx;
$(document).ready(function () {
    var t = $('.broh').DataTable({
                "ajax": {
                    "url": xoxoxo,
                    "dataSrc": "data.Chapter",
                },
                "columns": [{
                        "data": "ID",
                        "searchable": false,
                        "orderable": false
                    },
                    {
                        "data": "Name"
                    },
                    {
                        "data": null
                    },
                ],
                "language": {
                    "paginate": {
                        "previous": `
                        <i class="fas fa-angle-left"></i>
                        `,
                        "next": `
                        <i class="fas fa-angle-right"></i>
                        `
                    }
                },
                "order": [
                    [1, 'asc']
                ]
            });

            t.on('order.dt search.dt', function () {
                t.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
        })

json

{
    "data": [
        {
            "ID": 1,
            "CreatedAt": "2021-03-15T16:15:53.493+07:00",
            "UpdatedAt": "2021-03-15T16:15:53.66+07:00",
            "title": "Return Of Immortal Emperor",
            "alternative": "仙帝归来",
            "Chapter": [
                {
                    "ID": 1,
                    "CreatedAt": "2021-03-15T16:22:07.083+07:00",
                    "UpdatedAt": "0001-01-01T00:00:00Z",
                    "Name": "Chapter 1",
                    "Slug": "chapter-1",
                    "ChapterRefer": 1
                },
                {
                    "ID": 2,
                    "CreatedAt": "2021-03-15T16:22:39.845+07:00",
                    "UpdatedAt": "0001-01-01T00:00:00Z",
                    "Name": "Chapter 2",
                    "Slug": "chapter-2",
                    "ChapterRefer": 1
                }
            ]
        }
    ]
}

kthorngren

Trying using the defaultContent with the data: null column. Something like this:

                    {
                        "data": null,
                        "defaultContent": ""
                    },

Kevin

Sultan216

@kthorngren
it doesn't work

kthorngren

The data object of the JSON response is an array. So you will need something like this:

                "ajax": {
                    "url": xoxoxo,
                    "dataSrc": "data[0].Chapter",
                },

This accesses the first element in the array.

Kevin

Sultan216

@kthorngren it doesn't work either
"DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter 'ID' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

printing the text below into the table
[
o
b
j
e
c
t
]
etc

kthorngren

I copied your code and the sample data into this test case:
http://live.datatables.net/tozebovi/1/edit

It does work. The JSON response will need to be debugged. Look at the JSON response using the browser's network inspector. Is it the correct structure?

Or post a link to your page or a test case replicating the issue. You could grab a debugger trace for the developers to look at. See the instructions here.

Kevin

Sultan216

@kthorngren
I don't know why it worked. but when i put on ajax from url it didn't work. and I think the json format is correct

colin

As Kevin said, to progress this. please post a link to your page for us to look at, or update the test case to do so.

Colin