2016-10-10 40 views
0

我有這個JSON文件後,從JSON文件中的元素:如何只顯示AJAX調用

[{ 
    "id": "1", 
    "name": "Mario", 
    "cognome": "Rossi", 
    "CF": "MROS4343242", 
    "eta": "45", 
    "sesso": "Uomo", 
},{ 
    "id": "2", 
    "name": "Simon", 
    "cognome": "Jason", 
    "CF": "JSOS4343242", 
    "eta": "30", 
    "sesso": "Uomo", 
}] 

我做了一個AJAX調用打印一張小桌子只有「名」和「cognome」,然後我將建立一個按鈕,顯示的每一個細節全部user..so這是我現在看到:

Mario | Rossi | "Button to see Mario'details" 
Simon | Jason | "Button to see Simon'details" 

,但我怎麼能做到這一點與jQuery/AJAX?

這是現在的代碼:

function getData() { 
$.ajax({ 
    type: 'GET', 
    url: 'data/persona1.json', 
    dataType: 'json', 
    success:showData, 
    error: function() { 
     // richiesta fallita 
     alert("ERRORE!"); 
    } 
}); 
} 


function showData(pdata) 
var container = $('#tableContainer tbody'); 

container.append(
    '<tr>' + 
    '<td>' + pdata.nome + '</td>' + 
    '<td>' + pdata.cognome + '</td>' + 
    '<td><a href="#modalContainer" rel="modal:open" onclick="getDetails()">Details</a></td></tr>' + 
    '</tr>' 
); 

}

+0

我很困惑 - 你說你正在做一個AJAX請求,然後問你如何用AJAX做。目前還不清楚你在問什麼。另外,你目前的代碼是什麼? –

+0

我做了一個打印「名稱」和「cognome」的ajax請求,那我怎麼做才能顯示每個用戶的詳細信息?我不知道如果我需要做另一個Ajax請求,或者如果我能以另一種方式做到這一點.. – razer90

+0

如果你有第一個需要的信息,你不應該需要另一個AJAX請求。你可以編輯你的問題,包括你到目前爲止的代碼 –

回答

0

你可以爲每個用戶的所有數據存儲在隱藏瓦爾,一旦你按一下按鈕,你可以加載數據用戶。你不需要ajax調用,它沒有意義,因爲你不需要去服務器加載或威脅數據。

如果您需要在服務器上加載比您在json文件上更多的信息,情況會有所不同。然後,您只需要將該數據存儲在服務器上,然後放在頁面上即可。

你的問題對我來說不是很清楚。

0

我建議你爲person對象創建一個構造函數,並將每個人作爲一個變量存儲在一個表中。那麼你就可以根據自己的喜好使用每個人的信息,而且絕對不需要另一個Ajax電話。我的建議的一個小例子:jsfiddle

$(document).ready(function(){ 

    var JSONTable = [{ 
     "id": "1", 
     "name": "Mario", 
     "cognome": "Rossi", 
     "CF": "MROS4343242", 
     "eta": "45", 
     "sesso": "Uomo", 
    },{ 
     "id": "2", 
     "name": "Simon", 
     "cognome": "Jason", 
     "CF": "JSOS4343242", 
     "eta": "30", 
     "sesso": "Uomo", 
    }]; 

    function personData(id,name,cognome,CF,eta,sesso){ 
     this.id = id; 
     this.name = name; 
     this.cognome = cognome; 
     this.CF = CF; 
     this.eta = eta; 
     this.sesso = sesso; 
    } 

    function parseData(json){ 
     var parsedTable = new Array(); 

     for (var i=0; i<json.length;i++){ 
     parsedTable[i] = new personData(json[i].id, json[i].name, json[i].cognome,json[i].CF,json[i].eta, json[i].sesso); 
     } 
     for (var i=0; i<parsedTable.length;i++){ 
      console.log(parsedTable[i]); 
     var htmlCode = '<tr><td>' + parsedTable[i].name +  '</td><td>' + parsedTable[i].cognome + '</td><td><button id="clickInfo' + i + '" >Click me</button></td></tr>' 
     var moreInfo = "CF:" + parsedTable[i].CF + " Eta:" + parsedTable[i].eta + " Sesso:" + parsedTable[i].sesso; 

     $(htmlCode).appendTo("#personInfo"); 

     $("#clickInfo"+i).on('click',function(){ 
     alert(moreInfo); 
     }); 
     } 

    } 

    parseData(JSONTable); 

    });` 

很抱歉的設計,它只是給你的,你可以如何利用你已經存儲變量的一個小想法。