打印自定義JavaScript列表

Question

我有一個包含地震列表的自定義列表地震。我如何在JavaScript中解析它以將其添加到innerHtml並顯示在屏幕上。問題是我無法將它顯示在div上的屏幕上。當它解析我沒有得到任何結果，因爲我的JavaScript是錯誤的，如果我嘗試只是打印結果我得到[Object對象]

所以流轉輸入的文本框 - > Web服務 - >列表中的JavaScript

地震類：

public class earthquakes 
{ 
    public string eqid { get; set; } 

    public double magnitude { get; set; } 

    public double lng { get; set; } 

    public string source { get; set; } 

    public DateTime date { get; set; } 

    public int depth { get; set; } 

    public double lat { get; set; } 
} 

dataEarthquakes類

public class dataPostalCodes 
{ 
    public List<postalCodes> postalCodes { get; set; } 
} 

的WebService：

public static dataEarthQuakes getEarthquakes(dataPostalCodes postalCodes) 
    { 
     double lat = postalCodes.postalCodes[0].lat; 
     double lng = postalCodes.postalCodes[0].lng; 

     Uri address = new Uri(String.Format(FindEarthquakes, lat, 0, lng, 0)); 
     WebClient client = new WebClient(); 
     string jsonResponse = string.Empty; 
     jsonResponse = client.DownloadString(address.AbsoluteUri); 
     var results = JsonConvert.DeserializeObject<dataEarthQuakes>(jsonResponse); 

     return results; 
    } 

的Javascript：

function OnLookupComplete(e) { 
    var result = e; 
    var weatherData = new Sys.StringBuilder(); 
    var line; 
    for (var property in result.dataPostalCodes) { 
     line = String.format("<b>{0}:</b> {1}<br/>", 
         property, result.dataPostalCodes[property]); 
     weatherData.append(line); 
    } 
    $get('divResult').innerHTML = weatherData.toString(); 
} 

JSON字符串：

{"earthquakes":[{"eqid":"2010utc5","magnitude":7.7,"lng":97.1315,"src":"us","datetime":"2010-04-06 20:15:02","depth":31,"lat":2.3602}, {"eqid":"2009kdb2","magnitude":7.6,"lng":92.9226,"src":"us","datetime":"2009-08-10 17:55:39","depth":33.1,"lat":14.0129},{"eqid":"2010zbca","magnitude":7.6,"lng":123.533,"src":"us","datetime":"2010-07-23 20:51:11","depth":576.3,"lat":6.4939},{"eqid":"2010xkbv","magnitude":7.5,"lng":91.9379,"src":"us","datetime":"2010-06-12 17:26:50","depth":35,"lat":7.7477},{"eqid":"c0000rxc","magnitude":7.4,"lng":143.7392,"src":"us","datetime":"2010-12-21 16:19:41","depth":14.9,"lat":26.8656},{"eqid":"2010zbcd","magnitude":7.4,"lng":123.2677,"src":"us","datetime":"2010-07-23 21:15:08","depth":616.7,"lat":6.7489},{"eqid":"2010wbaq","magnitude":7.4,"lng":96.0805,"src":"us","datetime":"2010-05-09 03:59:44","depth":61.4,"lat":3.7284},{"eqid":"2007hvbq","magnitude":7.4,"lng":142.6846,"src":"us","datetime":"2007-09-28 11:38:58","depth":261.3,"lat":21.98},{"eqid":"2010zbbz","magnitude":7.3,"lng":123.4788,"src":"us","datetime":"2010-07-23 20:08:11","depth":604.5,"lat":6.7079},{"eqid":"2007xvam","magnitude":7.3,"lng":126.292,"src":"us","datetime":"2007-01-21 10:27:42","depth":10,"lat":1.2071}]} 

Answer 1

這裏是我可以做什麼：

$.get('my-webservice-url', 
    function(data) { 
     OnLookupComplete(data['earthquakes']); 
    }, 
    'json'); 

function OnLookupComplete(e) { 
    var weatherData = new Sys.StringBuilder(); 
    for(var i=0;i<e.length;i++) { 
     var line; 
     for (var property in e[i].dataPostalCodes) { 
      line = String.format("<b>{0}:</b> {1}<br/>", 
          property, e[i].dataPostalCodes[property]); 
      weatherData.append(line); 
     } 
    } 
    $('#divResult').html(weatherData.toString()); 
} 

這裏的想法是，你讓你的電話到您的Web服務，並表示將jQuery的預期反應是JSON（這是在的情況下非常有用，你是不是在來自服務器的響應中正確設置content-type標題）。

一旦GET請求完成後，jQuery將調用你的回調函數（匿名函數可以在調用看到$.get()。從您的JSON例子，我看到你期待的對象earthquakes這是地震的對象數組詳細信息。

然後函數調用OnLookupComplete()與每個地震陣列。

OnLookupComplete()然後每次地震在迭代，建立正確的字符串，並將其追加到StringBuilder。最後，當所有的地震進行了處理，它追加完整的集合的格式化行div與編號divResult。

Answer 2

由於no.good.at.coding的評論說，如果你的weatherData對象包含正確的數據，那麼它可能是儘可能簡單：

$('#divResult').html(weatherData.toString());

另一種選擇可能是調用您的json對象上的parseJSON，然後使用jQuery的每個功能遍歷這些結果：

var results = $.parseJSON(e); 
$(results).each(function (i, val) { 
    $('#divResult').append('<p>' + val.eqid + '<p>'); // can add markup here for magnitude and other properties 
}); 
 

如果你不知道你的對象是在JavaScript什麼，firebug是一個不錯的調試工具（或者你可以使用內置在Chrome瀏覽器開發人員工具）。

你沒有說明確切的問題，但希望這會幫助你走上正確的軌道。