Ajuda na programação, respostas a perguntas / Json / JQuery JSON de arquivo para objeto - json, parsing, getjson

JSON JQuery de arquivo para objeto - json, parsing, getjson

Copiei isso do site jquery. Estou tentando aprender como obter dados json para uma página da web. A data foi validada em: http://jsonlint.com/

Os resultados da execução do meu script são: [objeto objeto] [objeto objeto] [objeto objeto] [objeto objeto] [objeto objeto]

Preciso analisar os dados ou getJSON faz isso.
Este é o código que estou usando:

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

Dicas de solução de problemas seriam ótimas e, claro, uma resposta também seria ótima!

data.json

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

resposta console.log (dados):

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

Respostas:

1 para resposta № 1

Bem perto, tente isto: (contanto que o arquivo "data.json" seja um arquivo válido)

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

EDITAR

A forma como seu json está configurado, $.each irá iterar a matriz externa que contém os objetos. O que torna o key um índice numérico, e o val o objeto real. Com isso dito, mudando o $.each parte para ficar assim:

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

deve fazer o truque

(nota: id "s não devem começar com um número)

2 para resposta № 2

Eu tive o mesmo problema. Resolvi colocando o objeto JSONP em console.log() e, em seguida, olhando para a árvore no Chromeferramentas de desenvolvimento. Lá eu percebi que "objeto" era apenas o nome que o analisador deu a todos os diferentes objetos dentro do arquivo JSON, então você deve levar isso em consideração ao buscar os valores.

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

Os dados que você deseja estão em um par chave: valor dentro um objeto chamado "objeto que está dentro de uma matriz (isto é o que está sendo percorrido quando você faz $.each())

Então você tem que dizer ao JQuery para olhar dentro do objeto e então diga qual chave procurar.

Não coloquei nenhum ID porque não tenho certeza do que você queria que eles fossem. Você apenas queria que cada elemento tivesse "bytes" como o ID? Os ID "s devem ser exclusivos (pelo menos de acordo com este http://css-tricks.com/the-difference-between-id-and-class/)

Se o que você quer é um class para que você possa fazer CSS / JQuery em todo o lote, então você pode tentar algo como "<li class ="" + object.key + "">"