Question

var obj = {
    "data": [{
            "codice_comparto": "PRO",
            "descrizione_codice": "Competenze fisse per il personale a tempo indeterminato",
            "codice_siope": "1101",
            "descrizione_ente": "",
            "ricerca": false,
            "idtable": "000717409-1101",
            "cod_ente": "000717409",
            "anno": "2014",
            "periodo": "12",
            "codice_gestionale": "1101",
            "imp_uscite_att": "756",
            "importo_2013": "37718576",
            "importo_2014": "32810124",
            "importo_2015": null
    }, {
            "codice_comparto": "PRO",
            "descrizione_codice": "Straordinario per il personale tempo indeterminato",
            "codice_siope": "1102",
            "descrizione_ente": "",
            "ricerca": false,
            "idtable": "000720006-1102",
            "cod_ente": "000720006",
            "anno": "2014",
            "periodo": "12",
            "codice_gestionale": "1102",
            "imp_uscite_att": "0",
            "importo_2013": null,
            "importo_2014": "242532",
            "importo_2015": null
    }, {
            "codice_comparto": "PRO",
            "descrizione_codice": "Altre competenze ed indennità accessorie per il personale a tempo indeterminato",
            "codice_siope": "1103",
            "descrizione_ente": "",
            "ricerca": false,
            "idtable": "000720006-1103",
            "cod_ente": "000720006",
            "anno": "2014",
            "periodo": "12",
            "codice_gestionale": "1103",
            "imp_uscite_att": "0",
            "importo_2013": "2262257",
            "importo_2014": "6227024",
            "importo_2015": null
    }],
        "cosa": false
}
$.each(obj, function () {
    $.each(this, function (key, val) {
        var table = '<tr>' + '<td>' + JSON.stringify(key) + ':' + JSON.stringify(val) + '</td>' + '</tr>';
        $('#table').append(table);
        console.log(this);
    })
})

这是输出：

<table id="table">
        <tr>
            <td>0:{"codice_comparto":"PRO","descrizione_codice":"Competenze fisse per il personale a tempo indeterminato","codice_siope":"1101","descrizione_ente":"","ricerca":false,"idtable":"000717409-1101","cod_ente":"000717409","anno":"2014","periodo":"12","codice_gestionale":"1101","imp_uscite_att":"756","importo_2013":"37718576","importo_2014":"32810124","importo_2015":null}</td>
        </tr>
        <tr>
            <td>1:{"codice_comparto":"PRO","descrizione_codice":"Straordinario per il personale tempo indeterminato","codice_siope":"1102","descrizione_ente":"","ricerca":false,"idtable":"000720006-1102","cod_ente":"000720006","anno":"2014","periodo":"12","codice_gestionale":"1102","imp_uscite_att":"0","importo_2013":null,"importo_2014":"242532","importo_2015":null}</td>
        </tr>
        <tr>
            <td>2:{"codice_comparto":"PRO","descrizione_codice":"Altre competenze ed indennitÃ&nbsp; accessorie per il personale a tempo indeterminato","codice_siope":"1103","descrizione_ente":"","ricerca":false,"idtable":"000720006-1103","cod_ente":"000720006","anno":"2014","periodo":"12","codice_gestionale":"1103","imp_uscite_att":"0","importo_2013":"2262257","importo_2014":"6227024","importo_2015":null}</td>
        </tr>
</table>

相反，我正在寻找类似的输出：

<table>
    <tr>
        <th>codice_comparto</th>
        <th>descrizione_codice</th>
        <th>codice_siope</th>
    </tr>
    <tr>
        <td>PRO</td>
        <td>Competenze fisse per il personale a tempo indeterminato</td>
        <td>1101</td>
    </tr>
    <tr>
        <td>PRO</td>
        <td>Straordinario per il personale tempo indeterminato</td>
        <td>1102</td>
    </tr>

</table>

由于密钥始终相同，我认为最好在<th>中输出一次。

Answer 1

假设data中的所有对象具有相同顺序的相同属性，则会动态生成表：

$(function() {
    var html = "";

    // Generate header
    html+='<tr>';
    for(var key in json.data[0]) {
        html+='<th>'+key+'</th>';
    }
    html+='</tr>';

    // create rows
    for(var rowKey in json.data) {
        html+='<tr>';
        for(var colKey in json.data[rowKey]) {
            html+='<td>'+json.data[rowKey][colKey]+'</td>';
        }
        html+='</tr>';
    }

    // Finally set generated html
    $("#table").html(html);

});

Answer 2

this指针是第二个array中的$.each，键是数组索引;值是对象。

这是一个不使用jQuery的解决方案。只是为了好玩;）

var items = json.data,
    item,
    table,
    header,
    headerRow,
    headerColumn,
    body,
    row,
    column;

table = document.createElement('table');

//create header
header = document.createElement('thead');
headerRow = document.createElement('tr');
for(var heading in items[0]){
    headerColumn = document.createElement('th');
    headerColumn.innerHTML = heading;
    headerRow.appendChild(headerColumn);
}
header.appendChild(headerRow);

//create body
body = document.createElement('tbody');
for(var i=0; i<items.length; i++){
    item = items[i];
    row = document.createElement('tr');
    for(var propert in item){
        column = document.createElement('td');
        column.innerHTML = item[propert];
        row.appendChild(column);
    }
    body.appendChild(row);
}

table.appendChild(header);
table.appendChild(body);

//$('#something').append(table);

在jQuery中循环使用Object

2 个答案: