print custom List in JavaScript

I have a custom list earthquakes which contains a list of earthquakes. How do I parse this in JavaScript in order to add it to innerHtml and display on the screen. The problem is that I cannot get this to display on the screen in a div. When it parses I get no result because my javascript is wrong and if I try just printing the result i get [Object object]

So the flow goes input from textbox -> web service -> list to javascript

earthquakes class:

 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 class

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 string:

{"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}]}

Solution

Here's what I might do:

$.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()); 
}

The idea here is that you make your call to your web service and indicate to jQuery that the response expected is JSON (this is useful in case you aren't setting the content-type header correctly in the response from the server).

Once the GET request completes, jQuery will call your callback function (the anonymous function you can see in the call to $.get(). From your JSON example, I see that you expect an object earthquakes which is an array of objects of earthquake details.

The function then calls OnLookupComplete() with each the earthquakes array.

OnLookupComplete() then iterates over each earthquake, builds the right string and appends it to the StringBuilder. Finally, once all earthquakes have been dealt with, it appends the complete set of formatted lines to the div with the id divResult.