Uncaught TypeError: Cannot read property 'length' of undefined

monsterdking

hello guys i create a simple rest api and i need my table load the data

my api rest return this ..

[
{
"id": 1,
"nombre": "Quesadillas",
"imagenUrl": "https://www.divinacocina.es/wp-content/uploads/quesadilla-de-pollo-1.jpg",
"tiempo": 20,
"ingredients": [
{
"id": 2,
"nombre": "tortillas de harina"
},
{
"id": 3,
"nombre": "queso oaxaca"
},
{
"id": 4,
"nombre": "salsa"
}
],
"pasos": [
{
"id": 5,
"nombre": "Decebrar el queso"
},
{
"id": 6,
"nombre": "Poner el queso entre dos tortillas "
},
{
"id": 7,
"nombre": "Ponerlas en el comal y dejar dorar"
}
]
}
]

and i try load the data with :

    $(document).ready(function() {
        $('#table').DataTable( {
            "ajax": "http://localhost:8080/Api/listar",
            "columns": [
                { "data": "id" },
                { "data": "nombre" },
                { "data": "imagenUrl" },
                { "data": "tiempo" }
            ]
        } );
    });

but all time crash and said this :

jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.dataTables.min.js:48
at i (jquery.dataTables.min.js:35)
at Object.success (jquery.dataTables.min.js:35)
at fire (jquery-3.3.1.js:3268)
at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398)
at done (jquery-3.3.1.js:9305)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)

kthorngren

Looks like that is one row of data?

[{
    "id": 1,
    "nombre": "Quesadillas",
    "imagenUrl": "https://www.divinacocina.es/wp-content/uploads/quesadilla-de-pollo-1.jpg",
    "tiempo": 20,
    "ingredients": [{
            "id": 2,
            "nombre": "tortillas de harina"
        },
        {
            "id": 3,
            "nombre": "queso oaxaca"
        },
        {
            "id": 4,
            "nombre": "salsa"
        }
    ],
    "pasos": [{
            "id": 5,
            "nombre": "Decebrar el queso"
        },
        {
            "id": 6,
            "nombre": "Poner el queso entre dos tortillas "
        },
        {
            "id": 7,
            "nombre": "Ponerlas en el comal y dejar dorar"
        }
    ]
}]

If that is the full response then you will need to use ajax.dataSrc like the second example in the doc.

Kevin

monsterdking

in the moment yes only have one data but i can add more example ;:

[{
"id": 1,
"nombre": "Quesadillas",
"imagenUrl": "https://www.divinacocina.es/wp-content/uploads/quesadilla-de-pollo-1.jpg",
"tiempo": 20,
"ingredients": [{
"id": 2,
"nombre": "tortillas de harina"
},
{
"id": 3,
"nombre": "queso oaxaca"
},
{
"id": 4,
"nombre": "salsa"
}
],
"pasos": [{
"id": 5,
"nombre": "Decebrar el queso"
},
{
"id": 6,
"nombre": "Poner el queso entre dos tortillas "
},
{
"id": 7,
"nombre": "Ponerlas en el comal y dejar dorar"
}
]
},
{
"id": 1,
"nombre": "Quesadillas",
"imagenUrl": "https://www.divinacocina.es/wp-content/uploads/quesadilla-de-pollo-1.jpg",
"tiempo": 20,
"ingredients": [{
"id": 2,
"nombre": "tortillas de harina"
},
{
"id": 3,
"nombre": "queso oaxaca"
},
{
"id": 4,
"nombre": "salsa"
}
],
"pasos": [{
"id": 5,
"nombre": "Decebrar el queso"
},
{
"id": 6,
"nombre": "Poner el queso entre dos tortillas "
},
{
"id": 7,
"nombre": "Ponerlas en el comal y dejar dorar"
}
]
}
]

colin

Try setting the ajax.dataSrc, something like

"ajax": {
  "url": "http://localhost:8080/Api/listar",
  "dataSrc": ""
}

Cheers,

Colin