如何使用jQuery从json对象中获取一些值？

Question

我有这个json文件，我在json对象中转换它：

[
  {
    "id": "1",
    "nome": "erwrw",
    "cognome": "sdsfdfs",
    "CF": "qwert",
    "eta": "27",
    "sesso": "uomo",
    "indirizzo": "qwerrt",
    "luogo": "wewrw",
    "provincia": "ewrewrw",
    "citta": "erwrwr",
    "comune": "ewrewrw"
  },

  {
    "id": "2",
    "nome": "mario",
    "cognome": "rossi",
    "CF": "MRSI4343242",
    "eta": "35",
    "sesso": "uomo",
    "indirizzo": "via rossi 10",
    "luogo": "bergamo",
    "provincia": "bergamo",
    "citta": "bergamo",
    "comune": "bergamo"
  }
]

使用ajax，我可以在html文件中获取并打印所有键和值：

function getData()  {
    var container = $('div.container');

    console.log("container",container);
    $.ajax({
        type: 'GET',
        url: 'data/persona1.json',
        dataType: 'json',
        success:function(data){
            console.log(data);
            console.log(data[0].nome);

            $.each(data, function(index, item) {
                $.each(item, function(key, value){
                    container.append(key + ' : ' + value + '<br/>');
                });
                container.append('<br/><br/>');
            });
        },

});
};

但我怎样才能打印每个物体的“nome”，“cognome”，“citta”？

Answer 1

如果您知道要检索的属性的名称，则可以直接通过名称访问它们而不使用循环，请尝试以下操作：

 var data = [{ "id": "1", "nome": "erwrw", "cognome": "sdsfdfs", "CF": "qwert", "eta": "27", "sesso": "uomo", "indirizzo": "qwerrt", "luogo": "wewrw", "provincia": "ewrewrw", "citta": "erwrwr", "comune": "ewrewrw" }, { "id": "2", "nome": "mario", "cognome": "rossi", "CF": "MRSI4343242", "eta": "35", "sesso": "uomo", "indirizzo": "via rossi 10", "luogo": "bergamo", "provincia": "bergamo", "citta": "bergamo", "comune": "bergamo" }] var container = $('div.container'); $.each(data, function(index, item) { container.append('Nome : ' + item.nome + '<br/>Cognome : ' + item.cognome + '<br/>Citta : ' + item.citte + '<br/><br/><br/>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="container"></div> 

Answer 2

删除内部each循环。 然后打印你想要的键：

$.each(data, function(index, item) {
    container.append('nome : ' + item['nome']+ '<br/>');
    container.append('cognome : ' + item['cognome']+ '<br/>');
    container.append('citta: ' + item['citta']+ '<br/>');
    container.append('<br/><br/>');
});

Answer 3

最快的方法 - 使用您需要的密钥创建一个数组，并在密钥位于数组中时检查循环。

fields = ['nome','cognome','citta'];
...
if ($.inArray(key, fields)){
    ...
}

这样，修改字段比分别添加if / else或每个名称要容易得多。

Answer 4

只需在$.each() if条件

 var data = [ { "id": "1", "nome": "erwrw", "cognome": "sdsfdfs", "CF": "qwert", "eta": "27", "sesso": "uomo", "indirizzo": "qwerrt", "luogo": "wewrw", "provincia": "ewrewrw", "citta": "erwrwr", "comune": "ewrewrw" }, { "id": "2", "nome": "mario", "cognome": "rossi", "CF": "MRSI4343242", "eta": "35", "sesso": "uomo", "indirizzo": "via rossi 10", "luogo": "bergamo", "provincia": "bergamo", "citta": "bergamo", "comune": "bergamo" } ] $.each(data, function(index, item) { console.log(item) $.each(item, function(key, value){ if(key == "nome" || key == "cognome" || key == "citta") $('.container').append(key + ' : ' + value + '<br/>'); }); $('.container').append('<br/><br/>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"></div> 

Answer 5

$.each非常慢。 如果您有大量数据，可以使用for loop来获得更高的性能。

链接测试性能： 链接

 var data = [{ "id": "1", "nome": "erwrw", "cognome": "sdsfdfs", "CF": "qwert", "eta": "27", "sesso": "uomo", "indirizzo": "qwerrt", "luogo": "wewrw", "provincia": "ewrewrw", "citta": "erwrwr", "comune": "ewrewrw" }, { "id": "2", "nome": "mario", "cognome": "rossi", "CF": "MRSI4343242", "eta": "35", "sesso": "uomo", "indirizzo": "via rossi 10", "luogo": "bergamo", "provincia": "bergamo", "citta": "bergamo", "comune": "bergamo" }] var container = $('div.container'); for(var t=0;t<data.length;t++){ container.append('Nome : ' + data[t].nome + '<br/>Cognome : ' + data[t].cognome + '<br/>Citta : ' + data[t].citte + '<br/><br/><br/>'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="container"></div>