Pomoc w programowaniu, odpowiedzi na pytania / Json / JQuery JSON z pliku do obiektu - json, parsowanie, getjson

JQuery JSON z pliku do obiektu - json, parsing, getjson

Skopiowałem to ze strony jQuery. Próbuję się dowiedzieć, jak przenieść dane json na stronę internetową. Data została zweryfikowana w dniu: http://jsonlint.com/

Wyniki uruchomienia mojego skryptu to: [obiekt Obiekt] [obiekt Obiekt] [obiekt Obiekt] [obiekt Obiekt] [obiekt Obiekt]

Czy muszę analizować dane, czy robi to getJSON.
To jest kod, który używam:

<!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>

Wskazówki dotyczące rozwiązywania problemów byłyby świetne i oczywiście odpowiedź też byłaby świetna!

data.json

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

odpowiedź console.log (dane):

[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"}]

Odpowiedzi:

1 dla odpowiedzi № 1

Całkiem blisko, spróbuj tego: (o ile plik „data.json” jest prawidłowym plikiem)

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

EDYTOWAĆ

Sposób konfiguracji json, $.each zamierza iterować zewnętrzną tablicę zawierającą obiekty. Co sprawia, że key indeks numeryczny, a val rzeczywisty obiekt. Mając to na uwadze, zmiana $.each część wygląda następująco:

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

powinien zrobić lewy

(uwaga: identyfikatory nie powinny zaczynać się od cyfry)

2 dla odpowiedzi nr 2

Miałem ten sam problem. Rozwiązałem to, wstawiając obiekt JSONP console.log() a następnie patrząc na drzewo w Chromenarzędzia deweloperskie. Tam zdałem sobie sprawę, że „obiekt” to po prostu nazwa nadana przez parser wszystkim różnym obiektom w pliku JSON, więc musisz wziąć to pod uwagę podczas pobierania wartości.

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

Twoje dane, które chcesz, znajdują się w parze klucz: wartość wewnątrz obiekt o nazwie „obiekt, który znajduje się wewnątrz tablicy (to jest właśnie to, co jest cyklicznie przełączane, kiedy to robisz) $.each())

Musisz więc powiedzieć JQuery, aby zajrzał do wnętrza obiektu i następnie powiedz mu, jaki klucz ma szukać.

Nie umieściłem żadnych identyfikatorów, ponieważ nie jestem do końca pewien, jakie mają być. Czy chcesz, aby każdy element miał „bajty” jako identyfikator? Identyfikatory powinny być unikalne (przynajmniej zgodnie z tym http://css-tricks.com/the-difference-between-id-and-class/)

Jeśli chcesz, to plik class abyś mógł wykonać CSS / JQuery przez całą partię, możesz spróbować czegoś takiego "<li class ="" + object.key + "">"