Aide à la programmation, réponses aux questions / Json / JQuery JSON du fichier à l'objet - json, analyse, getjson

JQuery JSON du fichier à l'objet - json, parsing, getjson

J'ai copié ceci depuis le site jquery. J'essaie d'apprendre comment obtenir des données json sur une page Web. La date a été validée le : http://jsonlint.com/

Les résultats de l'exécution du script my sont : [objet Objet] [objet Objet] [objet Objet] [objet Objet] [objet Objet]

Dois-je analyser les données ou est-ce que getJSON le fait.
C'est le code que j'utilise en utilisant:

<!doctype html>
<html>
<head>

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

<script type="text/javascript">
$.getJSON("data.json", function(data) {
var items = [];

$.each(data, function(key, val) {
items.push("<li id="" + key + "">" + val + "</li>");
});

$("<ul/>", {
"class": "my-new-list",
html: items.join("")
}).appendTo("body");
});
</script>
</head>
<body>

</body>
</html>

Des conseils de dépannage seraient super et bien sûr une réponse serait super aussi !

data.json

[
{
"bytes": "476.577044"
},
{
"bytes": "136113.5289"
},
{
"bytes": "118870.8151"
},
{
"bytes": "55001.67852"
}
]

réponse console.log (données) :

[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]
JSON.html (line 14)
[Object { bytes="476.577044"}, Object { bytes="136113.5289"}, Object { bytes="118870.8151"}, Object { bytes="55001.67852"}]

Réponses:

1 pour la réponse № 1

Assez proche, essayez ceci : (tant que le fichier "data.json" est un fichier valide)

$(document).ready(function(){
$.getJSON("data.json", function(data) {
var items = [];

$.each(data, function(key, val) {
items.push("<li id="" + key + "">" + val + "</li>");
});

$("<ul/>").addClass("my-new-list").html(items.join("")).appendTo("body");
});
});

MODIFIER

La façon dont votre json est configuré, $.each va itérer le tableau externe contenant les objets. Ce qui fait le key un index numérique, et le val l'objet réel. Cela dit, changer le $.each partie pour ressembler à ceci:

$.each(data, function(key, val) {
items.push("<li id="" + key + "">" + val.bytes + "</li>");
});

devrait faire l'affaire

(note : les identifiants ne doivent pas commencer par un chiffre)

2 pour la réponse № 2

J'ai eu le même problème. Je l'ai résolu en mettant l'objet JSONP dans console.log() puis en regardant l'arbre dans Chrome"soutils de développement. Là, j'ai réalisé que "objet" n'était que le nom que l'analyseur a donné à tous les différents objets à l'intérieur du fichier JSON, vous devez donc en tenir compte lors de la récupération des valeurs.

$(document).ready(function(){
$.getJSON("data.json", function(data) {
var items = [];

$.each(data, function(key, val) {
items.push("<li >" + data.object.bytes + "</li>");
});

$("<ul/>").addClass("my-new-list").html(items.join("")).appendTo("body");
});
});

Vos données que vous voulez sont dans une paire clé:valeur à l'intérieur un objet appelé "objet qui est à l'intérieur d'un tableau (c'est ce qui est parcouru lorsque vous faites $.each())

Vous devez donc dire à JQuery de regarder à l'intérieur de l'objet et puis dites-lui quelle clé rechercher.

Je n'ai pas mis d'ID car je ne suis pas vraiment sûr de ce que vous vouliez qu'ils soient. Vouliez-vous simplement que chaque élément ait des « octets » comme ID ? Les ID doivent être uniques (au moins selon cela http://css-tricks.com/the-difference-between-id-and-class/)

Si ce que vous voulez est un class afin que vous puissiez faire CSS/JQuery sur l'ensemble du lot, vous pouvez essayer quelque chose comme "<li class ="" + object.key + "">"