0

Muy buenas a todos, los primero es pedir disulpas por el título de la pregunta que quizas no sea el mas adecuado pero no sabia como expresar la duda mejor.

Estoy pintando una tabla en la que sus datos son un objeto json y necesitaria poder recorrer el json e ir pintando ls filas de la tabla al mismo tiemppo.

Este es mi código, creo que se entiende mucho mejor viendolo. Un saludo .

 return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+


            '<tr>'+
                '<td>Id:</td>'+
                '<td>'+objJson['0'].id+'</td>'+
            '</tr>'+

            '<tr>'+
                '<td>Tarea:</td>'+
                '<td>'+objJson['0'].name+'</td>'+
            '</tr>'+
             '<tr>'+
                '<td>Descripción:</td>'+
                '<td>'+objJson['0'].dsc+'</td>'+
            '</tr>'+
             '<tr>'+
                '<td>Colaborador:</td>'+
                '<td>'+objJson['0'].colab_name+'</td>'+
            '</tr>'+
             '<tr>'+
                '<td>Presupuesto Asignado:</td>'+
                '<td>'+objJson['0'].prsp_def+'</td>'+
            '</tr>'+
             '<tr>'+
                '<td>Gasto Real:</td>'+
                '<td>'+objJson['0'].prsp_ctb+'</td>'+
            '</tr>'+        

        '</table>';
1
  • 2
    ¿Cómo es la estructura de tu JSON? Edita tu pregunta para poder saber como es. :)
    – Hoose
    Commented el 12 sept. 2017 a las 16:31

2 respuestas 2

2

La posible y más obvia solución quizás sea esta:

var fillTable = function() {
    var htmlCode = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';

    for(var counter = 0; counter < objJson.length; counter++) {
        htmlCode += '<tr>'+
                        '<td>Id:</td>'+
                        '<td>'+objJson[counter].id+'</td>'+
                    '</tr>'+

                    '<tr>'+
                        '<td>Tarea:</td>'+
                        '<td>'+objJson[counter].name+'</td>'+
                    '</tr>'+

                    '<tr>'+
                        '<td>Descripción:</td>'+
                        '<td>'+objJson[counter].dsc+'</td>'+
                    '</tr>'+

                    '<tr>'+
                        '<td>Colaborador:</td>'+
                        '<td>'+objJson[counter].colab_name+'</td>'+
                    '</tr>'+

                    '<tr>'+
                        '<td>Presupuesto Asignado:</td>'+
                        '<td>'+objJson[counter].prsp_def+'</td>'+
                    '</tr>'+

                    '<tr>'+
                        '<td>Gasto Real:</td>'+
                        '<td>'+objJson[counter].prsp_ctb+'</td>'+
                    '</tr>';
    } //For's End.

    htmlCode += '</table>';

    return htmlCode;
}//fillTable's End

Pero eso es algo poco elegante, ¿por qué no hacerlo algo más general?

var fillTable = function() {
    var subjects = ["Id:", "Tarea:", "Descripción:", "Colaborador:", "Presupuesto Asignado:", "Gasto Real:"];
    var htmlCode = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    var iSubjects = 0;

    for(var jsonKey in objJson) {
        for(var jsonInnerKeys in objJson[jsonKey]) {
            htmlCode += '<tr>'+
                            '<td>' + subjects[iSubjects] + '</td>'+
                            '<td>' + objJson[jsonKey][jsonInnerKeys] +'</td>'+
                        '</tr>';

            iSubjects = (iSubjects + 1) % subjects.length;
        }
    } //For's End.

    htmlCode += '</table>';

    return htmlCode;
} //fillTable's End

No conozco la estructura de tu JSON, así que lo asumí de esta forma:

var objJson = [{
    "id": 1,
    "name": "duarte",
    "dsc": "developer",
    "colab_name": "pseudonimo",
    "prsp_def": 1200,
    "prsp_ctb": 1000
}, {
    "id": 2,
    "name": "matías",
    "dsc": "developer",
    "colab_name": "pseudonimo",
    "prsp_def": 1200,
    "prsp_ctb": 1000
}, {
    "id": 3,
    "name": "sebas",
    "dsc": "developer",
    "colab_name": "pseudonimo",
    "prsp_def": 1200,
    "prsp_ctb": 1000
}];
1
  • Te luciste con esto: iSubjects = (iSubjects + 1) % subjects.length;
    – juliocpiro
    Commented el 12 sept. 2017 a las 17:17
1

Una forma fácil de hacerlo es mediante $.each si utilizas JQuery. Suponiendo que tu objeto json tiene el siguiente formato:

var objJson = [{
  "id" : ...,
  "name": ...,
  "dsc" : ...,
  "colab_name": ...,
  "prsp_def": ...,
  "prsp_ctb": ...
 }];

Puedes recorrerlo de la siguiente manera:

function llenarTabla(objJson) {
   var tabla = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" id="tabla"><tbody></tbody></table>';

   $.each(objJson, function(obj){
     $('#tabla tbody').append('<tr>' +
       '<td>Id:</td>'+
         '<td>' + obj.id + '</td>'+
       '</tr>' +
       '<tr>'+
         '<td>Tarea:</td>'+
         '<td>'+obj.name+'</td>'+
       '</tr>'+
       '<tr>'+
         '<td>Descripción:</td>'+
         '<td>'+obj.dsc+'</td>'+
       '</tr>'+
       '<tr>'+
          '<td>Colaborador:</td>'+
          '<td>'+obj.colab_name+'</td>'+
        '</tr>'+
       '<tr>'+
          '<td>Presupuesto Asignado:</td>'+
          '<td>'+obj.prsp_def+'</td>'+
       '</tr>'+
       '<tr>'+
          '<td>Gasto Real:</td>'+
          '<td>'+obj.prsp_ctb+'</td>'+
       '</tr>'+
    );
   });
}
1
  • Muchas gracias a los dos, me ha sido de gran ayuda. La respuesta de jquery no la conocía. un saludo Commented el 12 sept. 2017 a las 20:18

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