How to walk a Json inside a chain of text [closed]

Question

How to walk a Json inside a chain of text [closed]

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Very good to all, the first is to ask disulpas for the title of the question that perhaps is not the most appropriate but I did not know how to express the doubt better.

I'm painting a table where your data is a json object and you need to be able to walk the json and paint the rows of the table at the same time.

This is my code, I think it is much better understood seeing it. Greetings.

 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>';

javascript json

asked by Lorenzo Martín 12.09.2017 в 18:26

source

2 answers

1

An easy way to do it is through $ .each if you use JQuery. Assuming that your json object has the following format:

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

You can go through it in the following way:

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>'+
    );
   });
}

answered by 12.09.2017 в 19:54

How to get the number of times a value is repeated in an array? Button to close Activity in Android studio

score 2 · Accepted Answer

The possible and most obvious solution may be this:

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

But that's a bit inelegant, why not do something more 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

I do not know the structure of your JSON, so I assumed it this way:

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