Insert values of "Images" into img tag and place them into childrow

TheNerdy97

**

    function CRow(row, data, index) {

        var Date = data.date;
        var ImgHeader = '<b>' + 'Last Updated' + ' - ( ' + accountDate + ' )</b><br><br>';
        var Imgs = data.images;

        const images = JSON.parse(data).data[0].images;

        let text = "";
        for (let x of images){
            text += '<img src="static/images/char/' + x + '.png">';
        }

        


        var childHTML = ImgHeader+ text + '<br>';
        $('#Table').DataTable().row(index).child(childHTML).show();

        var child = $('#Table').DataTable().row(index).child();
        $(child[0].childNodes[0]).addClass('change');
        };

**:

**DataTables warning: table id=accountsTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7**:
**
I'm quite new to these JS things and I'm pretty sure that my problem may be with the JSON.parse(data) part. but I'm not sure.
The CRow function was working when I directly made the img tag before saving it on the DB, but it took too long to write it, so I made it that only the images name are saved and then insert into the img tag before adding the child row

I'm using REST API for the DT data and it looks like this

{

    "data": [{
        "index": 0,
        "code": "OZANEX",
        "MAR": 8860,
        "price": 59,
        "date": "Tue Jul 12 2022",
        "images": [
            "1322",
            "1172",
            "0966",
            "1296",
            "1170",
            "0903",
            "0776",
            "0527"
        ]
    }]
}.

**:

and this is the whole code

$(document).ready(function () {
        var dataJSON = '/api/table/?format=datatables'
        var table = $('#Table').DataTable({
            order: [[2, 'asc']],
            createdRow: CRow,
            
            columns: [


                {   title: 'Code',
                    data: 'code',
                },
                {   title: 'MAR',
                    data: 'MARS',
                    sortable: true,
                    render: getMAR
                },
                {   title:'Price',
                    data: 'price',
                    render: getPrice,

                },
                {   data:'images',
                    className: 'never'

                },
                {   data:'date',
                    className:'never'

                }

                ],      
            
            columnDefs: [
              { "width": "20%", "targets": 0}


    
            deferRender: true,
            stateSave: true,
            processing:true,
            serverSide: true,
            ajax:
            { 
            url: dataJSON,
            dataSrc: 'data',
            
            },
            
        });

        function CRow(row, data, index) {

        var Date = data.date;
        var ImgHeader = '<b>' + 'Last Updated' + ' - ( ' + accountDate + ' )</b><br><br>';
        var Imgs = data.images;

        const images = JSON.parse(data).data[0].images;

        let text = "";
        for (let x of images){
            text += '<img src="static/images/char/' + x + '.png">';
        }

        


        var childHTML = ImgHeader+ text + '<br>';
        $('#Table').DataTable().row(index).child(childHTML).show();

        var child = $('#Table').DataTable().row(index).child();
        $(child[0].childNodes[0]).addClass('change');
        };




                
            function getPrice(price) {
            return '$' + price;
    };

            function getMAR(MAR){
            return '<img src="  static/images/items/MAR.png " width="22" height="22" styleL="padding-bottom:3px;" /> '+ MAR;
            };
    
        
                


        });
    

allan

Hi,

Did you follow the instructions at the tech note the error message links to? What does the browser's network inspector show that the server is responding with? The error suggests that it is not valid JSON.

If you can link to a page showing the issue I can take a look.

Allan