1

Tengo un ajax que hace una consulta a la BD y me devuelve los registros en JSON, lo que no sé es como convertirlo en HTML para mostrar los resultados:

Mi Ajax:

<script>

    let search;

    let url = "{{route('records.search')}}";

    search = document.getElementById('record').value;

    call_to_controller(search);


    function call_to_controller(search) {

        $.ajax({
            type: "get",
            url: url,
            data: {search: search
            },
            
            success: function(data) {

                var json = $.parseJSON(data);
                    $.each(json.data,function(key,value){

                    }); 

            },

            error: function (error) { 
                console.log(error); 
            }

        });
    };
</script>

Me devuelve este JSON:

{"data":[{"name":"Jos\u00e9 Hern\u00e1ndez","din":"12457852","email":"[email protected]"},{"name":"Andrea Barrera","din":"1251478","email":"[email protected]"}]}

Y este es el código HTML que debo sustituir:

<tr>
    <td scope="row">{{ $record->name }}</td>
    <td scope="row">{{ $record->dni }}</td>
    <td scope="row">{{ $record->email }}</td>
    <td scope="row" class="text-left">
        <div class="btn-group">
          {!! Form::open([ 'method'  => 'get', 'route' => [ 'records.edit', $record->id ] ]) !!}
            <button type="submit" class="btn btn-sm btn-success">Editar</button>
          {!! Form::close() !!}
          {!! Form::open([ 'method'  => 'delete', 'route' => [ 'records.destroy', $record->id ] ]) !!}
            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('¿Confirma que quieres eliminar este REGISTRO?');" >Eliminar</button>
          {!! Form::close() !!}
         </div>
    </td>
</tr>

No sé como sustituir el JSON por el HTML para poder mostrar los resultados e incluir en él, los valores correspondientes que me trae el JSON

4
  • Es en la tabla donde quieres mostrar los datos recuperados o dónde quieres que esos datos se pinten?
    – user128299
    Commented el 26 ago. 2020 a las 23:18
  • Sí, en la tabla
    – Joseph
    Commented el 26 ago. 2020 a las 23:20
  • 1
    Sería cuestión de leer el JSON construyendo la tabla usando cada clave:valor del JSON. Aunque parecería que usas algún framework o herramienta que no es Javascript puro ¿? Si es así conviene mencionarlo por si dicho framework tuviera formas propias de leer un JSON que faciliten el trabajo. Lo digo por código como este que veo: {!! Form::open(...)
    – A. Cedano
    Commented el 27 ago. 2020 a las 2:46
  • {!! Form::open(...) es Laravel Collective
    – Joseph
    Commented el 27 ago. 2020 a las 11:19

1 respuesta 1

3

Puedes llenarlo de forma manual generando las etiquetas dede javascript.

let search;

    let url = "{{route('records.search')}}";

    search = document.getElementById('record').value;

    call_to_controller(search);


    function call_to_controller(search) {

        $.ajax({
            type: "get",
            url: url,
            data: {
                search: search
            },

            success: function (data) {

                var json = $.parseJSON(data);
                addRegistros(json.data);
            },
            error: function (error) {
                console.log(error);
            }
        });
    };
    function addRegistros(datos) {
        $.each(datos, function (key, value) {
            var row = document.createElement('tr');
            var col_name = document.createElement('td');

            var col_din = document.createElement('td',);
            var col_email = document.createElement('td');
            var col_btns = document.createElement('td');

            var divBtns = document.createElement('div');
            var btnEliminar = document.createElement('button');
            var btnEditar = document.createElement('button');

            col_name.innerHTML = value.name;
            col_din.innerHTML = value.din;
            col_email.innerHTML = value.email;

            divBtns.className = "btn-group";

            btnEliminar.className = "btn btn-sm btn-success";
            btnEliminar.innerHTML = "Editar";
            btnEliminar.type = "submit";


            btnEditar.className = "btn btn-sm btn-danger";
            btnEditar.innerHTML = "Eliminar";
            btnEditar.type = "submit";
            btnEditar.onclick = (() => { return confirm('¿Confirma que quieres eliminar este REGISTRO?'); })

            divBtns.append(btnEliminar, btnEditar);
            col_btns.append(divBtns);
            row.append(col_name, col_din, col_email, col_btns);
            document.getElementById('Datos').append(row);
        });
    }

Este es un ejemplo de como quedara.

$(document).ready(function () {



    let search;

    let url = "{{route('records.search')}}";

    search = document.getElementById('record').value;

    // call_to_controller(search);
    //Comento tu llamada por que me va a generar un error en el ejemplo


    function call_to_controller(search) {

        $.ajax({
            type: "get",
            url: url,
            data: {
                search: search
            },

            success: function (data) {

                var json = $.parseJSON(data);
                addRegistros(json.data);
            },
            error: function (error) {
                console.log(error);
            }
        });
    };
    function addRegistros(datos) {
        $.each(datos, function (key, value) {
            var row = document.createElement('tr');
            var col_name = document.createElement('td');

            var col_din = document.createElement('td',);
            var col_email = document.createElement('td');
            var col_btns = document.createElement('td');

            var divBtns = document.createElement('div');
            var btnEliminar = document.createElement('button');
            var btnEditar = document.createElement('button');

            col_name.innerHTML = value.name;
            col_din.innerHTML = value.din;
            col_email.innerHTML = value.email;

            divBtns.className = "btn-group";

            btnEliminar.className = "btn btn-sm btn-success";
            btnEliminar.innerHTML = "Editar";
            btnEliminar.type = "submit";


            btnEditar.className = "btn btn-sm btn-danger";
            btnEditar.innerHTML = "Eliminar";
            btnEditar.type = "submit";
            btnEditar.onclick = (() => { return confirm('¿Confirma que quieres eliminar este REGISTRO?'); })

            divBtns.append(btnEliminar, btnEditar);
            col_btns.append(divBtns);
            row.append(col_name, col_din, col_email, col_btns);
            document.getElementById('Datos').append(row);
        });
    }

    //Esta función la mando llamar yo, para fines de pruebas
    addRegistros([{ "name": "Jos\u00e9 Hern\u00e1ndez", "din": "12457852", "email": "[email protected]" }, { "name": "Andrea Barrera", "din": "1251478", "email": "[email protected]" }])

});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <input type="text" id="record" value="">
    <br />
    <br />
    <table id="Tabla" class="table table-striped table-bordered table-hover">
        <thead>
            <td>Nombre</td>
            <td>Dni</td>
            <td>Email</td>
            <td></td>
        </thead>
        <tbody id="Datos"></tbody>
    </table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.