0

Hola amigos estoy recibiendo datos de un ajax y todo bien solo quisiera saber como indagar dentro del objeto y en mi success llenar una tabla, esto es lo que tengo

// -- /get-owners
function getowners(){
    
    $.ajax({
        type: 'GET',
        url: '/get-owners',
        dataType: 'json',
        success: (data)=>{
            alert(data);
            $.each(data,(index,item) => {
                alert(index,item);
            });
        }

    });
    //$("#ownerT").load();

};

getowners();



// objeto Json que me devuelve


[
    {
        "id": 3,
        "created_at": "2019-03-21T05:20:44.100Z",
        "username": "xxxx",
        "name": "xxxx",
        "lastnameP": "xxxx",
        "lastnameM": "xxxx",
        "pass": "$2a$10$xvj8YrAT5QP8ezLHEgcAy.Jmslo/x6q/6BjICBtmysfttd3n9Joka",
        "mail": "[email protected]",
        "admin": null,
        "user": null,
        "owner": 1,
        "gender": null,
        "datenac": "1965-03-01T06:00:00.000Z",
        "phone": "9611545746",
        "calle": null,
        "colonia": null,
        "estado": null,
        "cp": null,
        "img": '/somewhere/myimage.jpg',
        "id_usercreated": 2,
        "status": null
    }
]
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <h3>Owner de proyecto</h3>
  <div class="top2 table-wrapper-scroll-y">


    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Img</th>
          <th scope="col">Name</th>
          <th scope="col">Action</th>

        </tr>
      </thead>
      <tbody id="ownerT">


      </tbody>
    </table>

3 respuestas 3

2

Aquí te dejo una manera de llenar la tabla en el caso que nos has enseñado. Si necesitas más campos, etc. Creo que podrás guiarte con esto:

function getowners(){

    $.ajax({
        type: 'GET',
        url: '/get-owners',
        dataType: 'json',
        success: (data)=>{
            alert(data);
            $.each(data,(index,item) => {

                const fila = $('<tr></tr>'); // Creamos la fila

                const img = $('<td></td>').append($('<img class="image">'));

                const name = $('<td></td>').addClass('name');

                const action = $('<td></td>').addClass('action');

                fila.append(img).append(name).append(action); // Preparamos la fila

                data.forEach(dato => { // Iteramos los datos

                  const miFila = fila.clone(); // Clonamos la fila.

                  miFila.find('img').attr('src', dato.img); // Ponemos la imagen

                  miFila.children('.name').html(dato.name); // Ponemos el nombre

                  $('#ownerT').append(miFila); // Pegamos la fila a la tabla

                });
            });
        }

    });
    //$("#ownerT").load();

};
1

Te dejo una solución más sencilla, escribiendo HTML en JS y con datos interpolados.

Que te sirva

function getowners(){
    $.ajax({
        type: 'GET',
        url: '/get-owners',
        dataType: 'json',
        success: (data) => {

            data.forEach( ( item ) => {
                const row = `<tr>
                    <td><img src="${ item.img }"></td>
                    <td>${ item.name }</td>
                    <td><button>Eliminar</button></td>
                </tr>`;
                $('#ownerT').append( row );
            });
        }
    });
}
1

Buena tarde, quizá te ayude esto:

//JSON que retorna tu AJAX
var json = [{
    "id": 3,
    "created_at": "2019-03-21T05:20:44.100Z",
    "username": "xxxx",
    "name": "xxxx",
    "lastnameP": "xxxx",
    "lastnameM": "xxxx",
    "pass": "$2a$10$xvj8YrAT5QP8ezLHEgcAy.Jmslo/x6q/6BjICBtmysfttd3n9Joka",
    "mail": "[email protected]",
    "admin": null,
    "user": null,
    "owner": 1,
    "gender": null,
    "datenac": "1965-03-01T06:00:00.000Z",
    "phone": "9611545746",
    "calle": null,
    "colonia": null,
    "estado": null,
    "cp": null,
    "img": "/somewhere/myimage.jpg",
    "id_usercreated": 2,
    "status": null
  }];

//Código que debes hacer en tu .each() para rellenar tu tabla
$.each(json, (index, item) => {
  var tdData =
    '<tr><td>' + json[index].id + '</td>' +
    '<td>' + json[index].created_at + '</td>' +
    '<td>' + json[index].username + '</td>' +
    '<td>' + json[index].name + '</td>' +
    '<td>' + json[index].lastnameP + '</td>' +
    '<td>' + json[index].lastnameM + '</td>' +
    '<td>' + json[index].pass + '</td>' +
    '<td>' + json[index].mail + '</td></tr>';
  $('#ownerT').append(tdData);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Owner de proyecto</h3>


<table class="table table-hover" border="1">
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">created_at</th>
      <th scope="col">username</th>
      <th scope="col">name</th>
      <th scope="col">lastnameP</th>
      <th scope="col">lastnameM</th>
      <th scope="col">pass</th>
      <th scope="col">mail</th>

    </tr>
  </thead>
  <tbody id="ownerT">


  </tbody>
</table>

Tu Respuesta

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

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