impression personnalisée Liste en JavaScript

Question

J'ai une liste personnalisée des séismes qui contient une liste de tremblements de terre. Comment puis-je l'analyser en JavaScript pour l'ajouter à innerHtml et l'afficher à l'écran. Le problème est que je n'arrive pas à l'afficher sur l'écran dans un div. Quand il analyse que je reçois aucun résultat parce que mon javascript est faux et si j'imprime simplement le résultat que je reçois [objet Object]

Ainsi, le flux passe d'entrée de zone de texte -> service Web -> liste javascript

Les tremblements de terre classe:

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 classe

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

chaîne 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

Voici ce que je pourrais faire:

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

L'idée ici est que vous faites appel à votre service Web et indiquer à jQuery que la réponse attendue est JSON (ce qui est utile au cas où vous n'êtes pas définir correctement l'en-tête content-type dans la réponse du serveur).

Une fois la demande GET complète, jQuery appellera votre fonction de rappel (la fonction anonyme, vous pouvez voir dans l'appel à $.get(). A partir de votre exemple JSON, je vois que vous attendez un objet earthquakes qui est un tableau d'objets du tremblement de terre détails.

la fonction appelle ensuite OnLookupComplete() à chaque tableau de tremblements de terre.

OnLookupComplete() puis itère sur chaque tremblement de terre, construit la chaîne de droite et l'ajoute à la StringBuilder. Enfin, une fois que tous les tremblements de terre ont été traités, il ajoute l'ensemble complet des lignes formatées au div avec l'ID divResult.

Answer 2

Comme no.good.at.coding dit dans le commentaire, si votre objet DonneesMeteo contient les données correctes, alors il pourrait être aussi simple que:

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

Une autre option peut être d'appeler parseJSON sur votre objet json, puis d'utiliser chaque fonction de jquery à itérer les résultats:

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

Si vous n'êtes pas sûr de ce que vos objets sont en javascript, firebug est un excellent outil pour le débogage (ou vous pouvez utiliser les outils de développement qui sont construits pour Chrome).

Vous n'avez pas indiqué un problème exact, mais j'espère que cela vous aidera à vous mettre sur la bonne voie.