2023-01-12

Finding - 2 different ways to get result from API to showing by using Datatables.net

 


Reference URL: https://stackoverflow.com/a/68456824/6462295

As of 2023Feb07_1503 - failed to achieve by method of: data: data

Published on
1/12/23 2:25 PM






My html table:

<table id="listaVideos2" class="display">
        <thead>
        <tr>
            <th>nombre</th>
            <th>descripcion</th>
            <th>codigoYoutube</th>
            <th>bpm</th>
        </tr>
        </thead>
    </table>

My JavaScript:

$.ajax({
        "url": "listado2",
        "type": "GET",
        "datatype": 'json',
        "success": function (data) {
            $('#listaVideos2').DataTable({
                "fixedHeader" : true,
                "paging":   false,
                "info":     true,
                "autoWidth": true,
                "order": [],
                data: data,
                select: true,
                columns: [
                    { "data": "nombre" },
                    { "data": "descripcion" },
                    { "data": "codigoYoutube",
                        "title": "Youtube",
                        "orderable": false
                    },
                    { "data": "bpm" },
                ]
            });
        }
    });

or another way you can use:

$('#listaVideos2').DataTable({
        "fixedHeader" : true,
        "paging":   false,
        "info":     true,
        "autoWidth": true,
        "order": [],
        ajax: {
            url: 'listado2',
            dataSrc: ''
        },
        select: true,
        columns: [
            { "data": "nombre" },
            { "data": "descripcion" },
            { "data": "codigoYoutube",
                "title": "Youtube",
                "orderable": false
            },
            { "data": "bpm" },
        ],
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        dom: "Bfrtip",
    });

And my Controller: (if your controller is a @RestController I think you wouldn't need the @ResponseBody)

@GetMapping("/listado2")
    @ResponseBody
    public List<Video> apiListadoVideos() {
        return videosServicio.buscarTodosLosVideos();
    }

where my Video class is this simple (I just remove de getters, setters...):

public class Video {
    private Integer id;
    @NotEmpty
    @NotBlank
    private String nombre;
    private String descripcion;
    @NonNull @NotBlank
    private String codigoYoutube;
    private String bpm;
    private Categoria categoria;
    private Tono tono;
    private Modo modo;
}















Finding: CSRF required to be included in both cookie and header

 


Found out need to have CSRF token in cookies + header



C:\Users\billson.bs.chew>curl "http://localhost:9099/sfa/getrefcountry" -X "POST" -H "Cookie: JSESSIONID=ECF471E0BB423ADF808EFC649965D63D; XSRF-TOKEN=8078038f-017c-4adf-9034-71d0a5624020; OAuth_Token_Request_State=45f11140-bc27-4d82-9e06-ac7716150d9b"
{"timestamp":"2023-01-12T05:14:04.958+00:00","status":403,"error":"Forbidden","message":"Forbidden","path":"/sfa/getrefcountry"}
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>curl "http://localhost:9099/sfa/getrefcountry" -X "POST" -H "Cookie: JSESSIONID=ECF471E0BB423ADF808EFC649965D63D; OAuth_Token_Request_State=45f11140-bc27-4d82-9e06-ac7716150d9b" -H "X-XSRF-TOKEN: 8078038f-017c-4adf-9034-71d0a5624020"
{"timestamp":"2023-01-12T05:14:17.134+00:00","status":403,"error":"Forbidden","message":"Forbidden","path":"/sfa/getrefcountry"}
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>
C:\Users\billson.bs.chew>curl "http://localhost:9099/sfa/getrefcountry" -X "POST" -H "Cookie: JSESSIONID=ECF471E0BB423ADF808EFC649965D63D; XSRF-TOKEN=8078038f-017c-4adf-9034-71d0a5624020; OAuth_Token_Request_State=45f11140-bc27-4d82-9e06-ac7716150d9b" -H "X-XSRF-TOKEN: 8078038f-017c-4adf-9034-71d0a5624020"
[{"id":746,"countryName":"......


But will failed after added -H "X-Requested-With: XMLHttpRequest"

curl "http://localhost:9099/sfa/getrefcountry" -X "POST" -H "Cookie: JSESSIONID=72E583341F34F836CE9D1E791BAA8289; XSRF-TOKEN=8078038f-017c-4adf-9034-71d0a5624020; OAuth_Token_Request_State=45f11140-bc27-4d82-9e06-ac7716150d9b" -H "X-XSRF-TOKEN: 8078038f-017c-4adf-9034-71d0a5624020" -H "X-Requested-With: XMLHttpRequest"

maybe required to add the origin header as well.

curl "http://localhost:9099/sfa/getrefcountry" -X "POST" -H "Cookie: JSESSIONID=4174FC81554467718FC1F68CA393A357; XSRF-TOKEN=9c5dd88b-837b-400a-b083-912cc83aaa9f; OAuth_Token_Request_State=45f11140-bc27-4d82-9e06-ac7716150d9b" -H "X-XSRF-TOKEN: 9c5dd88b-837b-400a-b083-912cc83aaa9f" -H "Origin: http://localhost:9099" -H "X-Requested-With: XMLHttpRequest"