печать пользовательских списков в JavaScript - PullRequest
Новая
       15

печать пользовательских списков в JavaScript

0 голосов
/ 03 марта 2011

У меня есть собственный список землетрясений, который содержит список землетрясений.Как мне разобрать это в JavaScript, чтобы добавить его в innerHtml и отобразить на экране.Проблема в том, что я не могу отобразить это на экране в div.Когда он анализируется, я не получаю результата, потому что мой JavaScript неверен, и если я пытаюсь просто напечатать результат, я получаю [Object object]

Таким образом, поток поступает из textbox -> web service -> list в 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}]}

Ответы [ 2 ]

1 голос
/ 03 марта 2011

Как сказано в комментарии no.good.at.coding, если ваш объект weatherData содержит правильные данные, то это может быть так просто: 

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

Другой вариант - вызвать parseJSON дляваш объект json, а затем используйте каждую функцию 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).

Вы не указали точную проблему, но, надеюсь, это поможет вам встать на правильный путь.

0 голосов
/ 03 марта 2011

Вот что я мог бы сделать: 

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

Идея заключается в том, что вы делаете свой вызов веб-сервису и указываете jQuery, что ожидаемый ответ - JSON (это полезно, если вы неправильно задаете заголовок content-type в ответе с сервера) .

Как только запрос GET завершится, jQuery вызовет вашу функцию обратного вызова (анонимную функцию, которую вы можете увидеть при вызове $.get(). Из вашего примера JSON я вижу, что вы ожидаете объект earthquakes, который является массив объектов землетрясений.

Затем функция вызывает OnLookupComplete() с каждым массивом землетрясений.

OnLookupComplete() затем перебирает каждое землетрясение, строит правильную строку и добавляет ее к StringBuilder. Наконец, после того, как все землетрясения были рассмотрены, он добавляет полный набор форматированных строк к div с идентификатором divResult.

...