Trouble in JSON to DataTable

Trouble in JSON to DataTable

andresfjobsandresfjobs Posts: 5Questions: 1Answers: 0
edited August 2017 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 21,763Questions: 26Answers: 5,033

    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

  • andresfjobsandresfjobs Posts: 5Questions: 1Answers: 0
    edited August 2017

    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" }
                                ]
                            } );
    
  • Dalex73Dalex73 Posts: 30Questions: 4Answers: 4

    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"},

  • andresfjobsandresfjobs Posts: 5Questions: 1Answers: 0
    edited August 2017

    @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);

  • andresfjobsandresfjobs Posts: 5Questions: 1Answers: 0
    edited August 2017

    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"}]}

  • kthorngrenkthorngren Posts: 21,763Questions: 26Answers: 5,033

    Does that mean your Datatables is working?

    Kevin

  • andresfjobsandresfjobs Posts: 5Questions: 1Answers: 0

    @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.

This discussion has been closed.