打印自定义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浏览器开发人员工具）。

你没有说明确切的问题，但希望这会帮助你走上正确的轨道。