lecture json de jquery

Question

Salut tout le monde J'essaie de lire quelques json et faire 2 choses. Insérez une partie des données json dans une UL. La deuxième chose est de créer une fonction qui peut être appelée à partir d'une balise d'ancrage et affiche les autres données. Laissez-moi essayer d'expliquer avec mon code.

Mon JSON ressemble à ceci

[{lakeName:"Lake 1",lakeCode:"111",Readings[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5],]}{lakeName:"Lake 2",lakeCode:"222",Readings[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5],]}] 

Je suis en train de remplir ma liste comme celle

$(document).ready(function() { 
     $.ajax({ 
      url: "http://theaboveJSONisreturnedFromMyUrl", 
      method: 'GET', 
      dataType: 'json', 
      success: onDataReceived 
     }); 



     var data = []; 

     function onDataReceived(series) { 

      data = [series]; 
      $(data).each(function (i, data) { 
       $('#myList').append("<li>" + "<a href=\"javascript:GetLake(" + data.lakeCode + ");\">" + data.lakeName + "</a></li>"); 
      }); 

     } 
    }); 

      function GetLake(lake) { 

      alert('some how get the readings for the clicked lake code e.g. lakeCode 111 and display them here ["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5]); 

      } 

Maintenant, je vois des valeurs dans les données mais je ne peux pas accéder au semble par exemple data.lakeCode

Qu'ai-je fait de mal?

Toute aide serait géniale !!!

Answer 1

Il existe plusieurs erreurs de syntaxe dans votre fichier JSON. Il devrait ressembler à ceci:

[{lakeName:"Lake 1",lakeCode:"111",Readings:[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5]]},{lakeName:"Lake 2",lakeCode:"222",Readings:[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5]]}] 

Certains : et , ont été portés disparus, , inutiles entre les deux et un ] était inutile à la fin.

Answer 2

quand vous n'êtes pas sûr de votre syntaxe de JSON il suffit de vérifier avec qui: http://www.jsonlint.com/

Answer 3

Pour être valide, votre JSON a besoin les modifications suivantes (you can check always validity with JSONLint here):

• Commas entre les objets du tableau principal
• Aucune commande de fuite dans les tableaux Readings
• guillemets autour des noms de membres
• : entre Readings et sa valeur

Dans l'ensemble, il devrait ressembler à ceci:

[{"lakeName":"Lake 1","lakeCode":"111","Readings":[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5] ]},{"lakeName":"Lake 2","lakeCode":"222","Readings":[["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5] ]}] 
//compared to your current version: 
[{ lakeName :"Lake 1", lakeCode :"111", Readings [["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5],]} { lakeName :"Lake 2", lakeCode :"222", Readings [["24-Oct-10",12.5],["24-Oct-10",10.5],["24-Oct-10",15.5],]}] 

En outre, vous devez utiliser $.each() ici au lieu, comme ceci:

$.each(data, function() { 
    $('#myList').append("<li>" + "<a href=\"javascript:GetLake(" + this.lakeCode + ");\">" + this.lakeName + "</a></li>"); 
}); 

Ou un un peu mieux, utilisez des méthodes DOM comme ceci:

$.each(data, function() { 
    $('<a />', { href: '#', click: function() { GetLake(this.lakeCode); } }) 
    .wrap('<li />').parent().appendTo('#myList'); 
});