Trouble in JSON to DataTable

andresfjobs

well i had search a lot about the topic a lot of people is having the same problem but i cant find specifically what is going on in my case.

here is the JSON im trying to convert into dataTable.

{"dataUser":[{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":46,"nombreUsuario":"Lui2","nombre":"Luis Carlos","primerApellido":"Garcia","segundoApellido":"Bolivar","contrasena":"carlitos","numeroTelefono":5478963,"numeroCelular":3005475598,"direccion":"Cll44a8897","estadoCivil":"Casado","fechaNacimiento":"08/16/2017","fechaCreacion":"08/14/2017"},

this is the javascript .

$.ajax(
{
type: "POST",
url: "URL",
success: function (data)
{
console.log(data);
var strData = JSON.stringify(data);
console.log(strData);

                        $('#actualizarUsuario').DataTable( {
                            "data": strData,
                            "columns" : [
                                { "dataUser" : "tipoDocumento" },
                                { "dataUser" : "numeroDocumento" },
                                { "dataUser" : "nombreUsuario" },
                                { "dataUser" : "nombre" },
                                { "dataUser" : "primerApellido" },
                                { "dataUser" : "segundoApellido" },
                                { "dataUser" : "contrasena" },
                                { "dataUser" : "numeroTelefono" },
                                { "dataUser" : "NumeroCelular" },
                                { "dataUser" : "direccion" },
                                { "dataUser" : "estadoCivil" },
                                { "dataUser" : "fechaNacimiento" },
                                { "dataUser" : "fechaCreacion" }
                            ]
                        } );

this is the HTML.

<div id="crearUsuarioFrm" style="margin-top: 50px; margin-left: 50px;">
    <table id="actualizarUsuario" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>tipoDocumento</th>
                <th>numeroDocumento</th>
                <th>nombreUsuario</th>
                <th>nombre</th>
                <th>primerApellido</th>
                <th>segundoApellido</th>
                <th>contrasena</th>
                <th>numeroTelefono</th>
                <th>numeroCelular</th>
                <th>direccion</th>
                <th>estadoCivil</th>
                <th>fechaNacimiento</th>
                <th>fechaCreacion</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>tipoDocumento</th>
                <th>numeroDocumento</th>
                <th>nombreUsuario</th>
                <th>nombre</th>
                <th>primerApellido</th>
                <th>segundoApellido</th>
                <th>contrasena</th>
                <th>numeroTelefono</th>
                <th>numeroCelular</th>
                <th>direccion</th>
                <th>estadoCivil</th>
                <th>fechaNacimiento</th>
                <th>fechaCreacion</th>
            </tr>
        </tfoot>
    </table>
</div>

if anyone can give me a hint of what is going on it will be a lot of help to me. Thanks
i already try to pass data as a javascript object instead of a string

kthorngren

To start with the columns definition uses the property data as described in columns.data. Replace dataUser with data, like this:

    "columns" : [
        { "data" : "tipoDocumento" },
....

Next you will probably need to set strData to your dataUser object like this:

var strData = JSON.stringify(data.dataUser);

Kevin

andresfjobs

Thanks for the help Kevin @kthorngren .

Based in what i understand i replaced my code without luck, this is how i changed it.

    $.ajax(
            {
                type: "POST",
                url:   "URL",              
                success: function (data)
                {                 
                    console.log(data);
                    var strData = JSON.stringify(data.dataUser);
                    console.log(strData);

                        $('#actualizarUsuario').DataTable( {
                            "data": data,
                            "columns" : [
                                { "data" : "tipoDocumento" },
                                { "data" : "numeroDocumento" },
                                { "data" : "nombreUsuario" },
                                { "data" : "nombre" },
                                { "data" : "primerApellido" },
                                { "data" : "segundoApellido" },
                                { "data" : "contrasena" },
                                { "data" : "numeroTelefono" },
                                { "data" : "NumeroCelular" },
                                { "data" : "direccion" },
                                { "data" : "estadoCivil" },
                                { "data" : "fechaNacimiento" },
                                { "data" : "fechaCreacion" }
                            ]
                        } );

Dalex73

You should change the JSON accordingly so,

{"data":[{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":46,"nombreUsuario":"Lui2","nombre":"Luis Carlos","primerApellido":"Garcia","segundoApellido":"Bolivar","contrasena":"carlitos","numeroTelefono":5478963,"numeroCelular":3005475598,"direccion":"Cll44a8897","estadoCivil":"Casado","fechaNacimiento":"08/16/2017","fechaCreacion":"08/14/2017"},

andresfjobs

@Dalex73 Thanks man im really new in javascript and im missing a lot of basics.

Do this line does what you are saying?

var strData = JSON.stringify(data.dataUser);

andresfjobs

as an update i changed my JSON like suggested and now its looks like this.

{"data":[{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":4654897987,"nombreUsuario":"Lui2","nombre":"Luis Carlos","primerApellido":"Garcia","segundoApellido":"Bolivar","contrasena":"carlitos","numeroTelefono":5478963,"numeroCelular":3005475598,"direccion":"Cll44a8897","estadoCivil":"Casado","fechaNacimiento":"08/16/2017","fechaCreacion":"08/14/2017"},{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":10235896471,"nombreUsuario":"anaguirre","nombre":"Andres Felipe","primerApellido":"Aguirre","segundoApellido":"Carmona","contrasena":"123","numeroTelefono":3578964,"numeroCelular":3214569875,"direccion":"Cll12a N 43 12","estadoCivil":"Casado","fechaNacimiento":"07/07/2019","fechaCreacion":"08/23/2017"},{"tipoDocumento":"Tarjeta de identidad","numeroDocumento":56115,"nombreUsuario":"asaa","nombre":"Adrin","primerApellido":"asda","segundoApellido":"dasad","contrasena":"1233456","numeroTelefono":64564,"numeroCelular":5,"direccion":"cll31a","estadoCivil":"s","fechaNacimiento":"02/02/2005","fechaCreacion":"08/15/2017"},{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":123546789,"nombreUsuario":"Andres","contrasena":"AGUIRRE","numeroTelefono":0,"numeroCelular":0,"direccion":"0","estadoCivil":"Soltero","fechaNacimiento":"08/01/2017","fechaCreacion":"08/11/2017"},{"tipoDocumento":"Cedula de ciudadania","numeroDocumento":123456789,"nombreUsuario":"aaguirr5","nombre":"Andres Felipe","primerApellido":"Aguirre","contrasena":"asd123","numeroTelefono":2587412,"numeroCelular":3005687425,"direccion":"Cll31aNo53a63","estadoCivil":"Soltero","fechaNacimiento":"08/08/2017","fechaCreacion":"08/11/2017"}]}

kthorngren

Does that mean your Datatables is working?

Kevin

andresfjobs

@kthorngren i found the error i dont need my json to have a {"data": the javascript can interpretate that itself so when u send the json without the reference and put it in "data" as a javascript object instead of a string i could make it work. Thanks for the help.