0

地震のリストを含むカスタムリスト地震があります。これをJavaScriptで解析して、innerHtmlに追加し、画面に表示するにはどうすればよいですか。問題は、これをdivの画面に表示できないことです。解析すると、JavaScriptが間違っているため結果が得られません。結果を出力しようとすると、[オブジェクトオブジェクト]が表示されます。

したがって、フローはテキストボックス->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; }
}

ウェブサービス：

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}]}
4

2 に答える 2

1

コメントでno.good.at.codingが述べているように、weatherDataオブジェクトに正しいデータが含まれている場合は、次のように単純になる可能性があります。

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

もう1つのオプションは、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に組み込まれている開発者ツールを使用できます）。

あなたは正確な問題を述べていませんでしたが、うまくいけば、これはあなたを正しい軌道に乗せるのに役立つでしょう。

于 2011-03-03T02:01:17.710 に答える
0

これが私がするかもしれないことです：

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

content-typeここでの考え方は、Webサービスを呼び出し、期待される応答がJSONであることをjQueryに示すことです（これは、サーバーからの応答でヘッダーを正しく設定していない場合に役立ちます）。

リクエストが完了GETすると、jQueryはコールバック関数（への呼び出しで確認できる無名関数）を呼び出し$.get()ます。JSONの例から、earthquakes地震の詳細のオブジェクトの配列であるオブジェクトが必要であることがわかります。

次に、関数はOnLookupComplete()各地震配列で呼び出します。

OnLookupComplete()次に、各地震を繰り返し、適切な文字列を作成して、に追加しStringBuilderます。最後に、すべての地震が処理されると、フォーマットされた行の完全なセットがdividでに追加されdivResultます。

于 2011-03-03T02:33:47.523 に答える