9

Tenho um código parecido a este no JSFiddle. No meu servidor WAMP em casa que fiz pra tentar trabalhar com o JSON (o JSFiddle não contém o arquivo JSON pra testar).

Em uma pergunta que fiz sobre como inserir dados em um database com jQuery me responderam que seria uma boa opção armazenar os dados em arquivos JSON. O autor da resposta me mostrou como seria mais ou menos a sintaxe do arquivo JSON. Disse que poderia fazer o seguinte:

[
   { titulo: 'ET', ano: 1982 },
   { titulo: 'Indiana Jones', ano: 1981 }
]

Em meus testes com esse código do jsfiddle funcionaram bem quando o arquivo JSON estava no formato:

{
    "Titulo": "Até que a sorte nos separe",
    "segundo": "segundo valor",
    "terceiro": "terceiro valor, o ultimo valor não precisa de virgula"
}

Mas quando eu coloquei no formato que o autor da resposta da minha primeira pergunta mostrou, o click no link "Click me to list" não dispara nada.

Gostaria de saber qual é a diferença entre as duas sintaxes, pois quero fazer um pequeno site com um pequeno banco de dados com informações sobre os filmes que já assisti e os que ainda vou ver. Um link sobre onde conseguir essas informações de como montar um arquivo JSON e como acessar esses valores seria uma boa.

Eu utilizo o método $.ajax() para resgatar meu JSON que está dentro de um arquivo *.json conforme código:

$.ajax({
    url: 'js/vendor/testedb.json',
    dataType: 'json',
    success: function(data) {


        var item = [];

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

        $('<ul/>',{
            'class': 'myclass',
            html: item.join('')
        }).appendTo('body');


    },
    statusCode: {
        404: function() {
            alert("some problem");
        }
    },

});
3
  • Esclarecendo sua dúvida sobre postar JSON aqui, coloque seu JSON da pergunta, se precisar ajuda para editar, fazemos para você. Coloque o máximo que puder na pergunta a não ser que seja algo muito grande (o que provavelmente estaria errado para ajudar o problema).
    – Maniero
    Commented 30/01/2014 às 18:32
  • Editei minha resposta, como você pediu, @Pedro Gelli Commented 30/01/2014 às 18:35
  • Adicionei uma nova solução adaptada para o seu método @PedroGelli, porém eu aconselho a você adicionar o código do $.ajax() aqui na questão pois ele é extremamente importante. Commented 30/01/2014 às 19:19

7 Respostas 7

6

Um ótimo link para interpretação de sintaxe de JSON é este: http://json.parser.online.fr/ qualquer JSON, que este site interpretar OK sem erros, você poderá utilizar no seu código, porém sobre o seu JSON:

[
   { titulo: 'ET', ano: 1982 },
   { titulo: 'Indiana Jones', ano: 1981 }
]

Este JSON acima é incorreto, veja que se colocar ele no json parser online ele acusa erros.

{
    "Titulo": "Até que a sorte nos separe",
    "segundo": "segundo valor",
    "terceiro": "terceiro valor, o ultimo valor não precisa de virgula"
}

Este JSON acima, é correto, ele não acusará erros, porém não deves utiliza-lo porque você precisa denotar um objeto para acessar objeto.propriedade como eu estou fazendo no Array logo abaixo:

Aqui você tem um Array de Objetos "Filme" onde você pode usa-lo para iterar seus filmes.

ObjetoJSON = {

    "filme":[
        {
            "titulo":"Titulo do seu filme",
            "segundo":"segundo valor",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula"
        },
        {
            "titulo":"Titulo do seu filme 2",
            "segundo":"segundo valor 2",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula 2"
        },
        {
            "titulo":"Titulo do seu filme 3",
            "segundo":"segundo valor 3",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula 3"
        }
    ]

};
ObjetoJSON.filme[0] //seu objeto json do seu filme [0]
ObjetoJSON.filme[0].titulo //seu valor do titulo do filme [0]
ObjetoJSON.filme[0].segundo //o "segundo" valor do filme [0]
ObjetoJSON.filme[0].terceiro// o "terceiro" valor do filme [0]

EDIT:

Para utilizar o JSON dentro de um arquivo da extensão *.json resgatado de um AJAX Request você deve fazer o seguinte:

Utilize o seguinte código JSON (desta vez sem definição por variável) no seu arquivo *.json:

{
  "filme":[
        {
            "titulo":"Titulo do seu filme",
            "segundo":"segundo valor",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula"
        },
        {
            "titulo":"Titulo do seu filme 2",
            "segundo":"segundo valor 2",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula 2"
        },
        {
            "titulo":"Titulo do seu filme 3",
            "segundo":"segundo valor 3",
            "terceiro":"terceiro valor, o ultimo valor não precisa de virgula 3"
        }
    ]
}

E use este código javascript para que você entenda o JSON, e depois adapte ele do seu jeito que você usa:

$.ajax({
    url: 'js/vendor/testedb.json',
    dataType: 'json',
    success: function(data) {
      console.log('Titulo: ' + data.filme[0].titulo + ' Segundo: ' + data.filme[0].segundo);
    },
    statusCode: {
        404: function() {
            alert("some problem");
        }
    },

});
8
  • Eu poderia criar mais de um objeto json no mesmo arquivo json? Um para cada filme? Commented 30/01/2014 às 18:26
  • Sim, vou adicionar um exemplo Commented 30/01/2014 às 18:28
  • @dcastro eu estava utilizando o exemplo que o OP citou, mas agora há um belo exemplo abaixo. Commented 30/01/2014 às 18:35
  • 1
    @PauloRoberto Eu sugeri usar um JSON no servidor pois o objetivo dele é aprender (veja comentário na outra pergunta), e com isso ele já aprenderia como o funciona acesso a dados a partir do cliente, na vida real.
    – bfavaretto
    Commented 30/01/2014 às 19:19
  • 1
    @bfavaretto o que gerou uma grande confusão em minha mente com a pergunta dele, mas tudo bem, né. Pelo menos consegui entender e por ultimo edit postei o que ele queria. Commented 30/01/2014 às 19:25
4

Como fui eu que sugeri o JSON e criei a confusão, vou me explicar: o JSON que postei na outra resposta era inválido (já corrigi), pois em JSON as chaves precisam estar entre aspas duplas, assim como valores do tipo String.

Portanto, o arquivo JSON poderia conter exatamente o que o Gabriel Ribeiro sugeriu:

[
    {
        "Titulo": "Até que a sorte nos separe",
        "duracao": "120 min"
    },
    {
        "Titulo": "Matrix",
        "duracao": "140 min"
    }
]

(removi os caracteres acentuados para evitar problemas, embora sejam válidos.)

Um exemplo em jQuery para obter e usar esses dados via ajax seria:

$.getJSON(url_do_json, function(dados) {
    for(var i=0; i<dados.length; i++) {
        $(document.body).append('<div>' + dados[i].titulo + ', ' + dados[i].duracao + '</div>');
    }
});
8
  • Isso substitui o codigo usado no $.ajax()? Digo devo apagar todo o $.ajax() e usar o $.getJSON()? Commented 30/01/2014 às 21:09
  • 1
    Isso é um atalho para $.ajax com determinadas opções já definidas para pegar json. Tanto faz qual você usa.
    – bfavaretto
    Commented 30/01/2014 às 21:10
  • Otimo! Obrigado agora consigo listar as propriedades desses objetos. Posso perguntar agora como eu insiro um novo objeto JSON (Filme)? Eu defini variaveis com prompt quando o usuario clicar o link. Mas como vou inserir o valor dessas variaveis em um novo objeto JSON? Eu dei uma olhada no jquery.com mas não consegui achar nada que me ajude. É usando o jQuery.parseJSON? Pode me dar uma mão? To perdido. jsfiddle.net/pedrogelli/LAapR/1 Commented 30/01/2014 às 22:25
  • @PedroGelli Se você vai querer salvar esse json, aí vai precisar mexer com scripting do lado do servidor (seja em php, js com node, c# asp.net, python, o que você quiser). Mas ficando só no js, para inserir mais um filme na tela, dei uma forcinha lá no seu fiddle: jsfiddle.net/LAapR/2. Se tiver maiores dúvidas, sugiro postar uma nova pergunta, porque já estamos fugindo do escopo da original.
    – bfavaretto
    Commented 30/01/2014 às 22:34
  • É isso mesmo que eu quero, salvar esse json. Eu já andei dando uma olhada sobre o node.js e gostei muito, quero mesmo testar com ele. Então agora devo criar uma nova pergunta sobre como salvar dados no json do servidor, certo? Commented 30/01/2014 às 22:38
3
{
    "nome": "Kadu",
    "idade": "25"
}

Isto é um Objeto que armazena um nome e uma idade.

{
    "pessoas": [
        { "nome": "José", "idade": "80" },
        { "nome": "Maria", "idade": "60"}
    ]
}

Isto é um array de pessoas. Toda vez que você tiver uma coleção ou conjunto de dados, você pode armazená-los num array e conseguirá iterar por esse array usando uma estrutura de loop.

5
  • Obrigado, então a forma como a pessoa me respondeu antes desse tópico esta escrita errada né? Commented 30/01/2014 às 18:31
  • Só faltva o "{}"
    – NovoK
    Commented 30/01/2014 às 18:36
  • Acredito que não era só isso @NovoK, pois em javascript o JSON citado por ele, no primeiro exemplo, jamais rodaria, pois o Javascript entenderia titulo e ano como uma variável não declarada: undefined variable. Commented 30/01/2014 às 18:47
  • 1
    Opa, isso mesmo!
    – NovoK
    Commented 30/01/2014 às 19:02
  • De fato o json que eu tinha sugerido era inválido pela falta das aspas, mas o objeto por fora não é necessário. O json pode ser simplesmente um array.
    – bfavaretto
    Commented 30/01/2014 às 19:22
3

No seu primeiro exemplo, vc está criando um vetor com dois objetos. A sintaxe correta seria a segunda, e para criar mais objetos vc tem que fazer da seguinte forma:

[
    {
        "Titulo": "Até que a sorte nos separe",
        "duração": "120 min"
    },
    {
        "Titulo": "Matrix",
        "duração": "140 min"
    }
]
5
  • 1
    A raiz de um documento json deve ser ou um objecto, ou um array. A raiz desse formato é inválida porque tem dois objectos
    – dcastro
    Commented 30/01/2014 às 18:36
  • Está correto dcastro, eu resumi a resposta demais. Commented 30/01/2014 às 18:38
  • @dcastro Tem certeza? Na especificação do JSON não fala disso. O jsonlint.com diz que é válido. JSON.parse também aceita um array.
    – bfavaretto
    Commented 30/01/2014 às 19:10
  • @bfavaretto, acho que ele estava me corrigindo do jeito que eu postei antes, no caso sem os colchetes []. []s Commented 30/01/2014 às 19:11
  • @GabrielRibeiro Ah, eu li errado, achei que ele estava dizendo que a raiz tinha de ser um objeto e não um array.
    – bfavaretto
    Commented 30/01/2014 às 19:14
2

Cara seria legal também você dar uma lida na documentação do JSON, segue os links:

MDN: https://developer.mozilla.org/en/docs/JSON

JSON: http://www.json.org/

Eu vejo muito as pessoas confundindo o formato JSON com Object Literal, veja um exemplo:

JSON:

{"nome":"Fabio", "sobrenome":"Silva", "idade":35}

Object Literal:

{nome:"Fabio", sobrenome:"Silva", idade:35}

Eu não posso colocar mais do que dois links ainda, mas tem bastante coisa na net que pode esclarecer mais sobre como você deve trabalhar com o JSON, e a diferença que existe do Object Literal.

Espero ter ajudado!

1
  • Concordo, o javascript entende qualquer palavra que não for reservada como uma variável. Que na maioria dos casos será indefinida utilizando um JSON desta maneira. Commented 30/01/2014 às 19:20
1

O primeiro exemplo trata-se de um array json com 2 objectos, cada objecto tem um título e um ano.

O segundo exemplo trata-se de um simples objecto json com 3 propriedades (3 pares key - value).

Eu recomendo um formato semelhante ao do primeiro exemplo (um array de objectos) para representar uma coleção de filmes.

["titulo 1", "titulo 2"] 
2
  • Mas então porque ele não funciona no meu código? Eu coloquei ele no Json Parser Online e realmente da erro. Commented 30/01/2014 às 18:25
  • O parser falha porque as keys (titulo e ano) devem estar entre aspas "". Como estou no telemovel nao consigo ajudar mais, mas procura no google "javascript parse json array"
    – dcastro
    Commented 30/01/2014 às 18:28
1

Outro site que eu gosto de acessar para edição de JSON é este:

http://jsoneditoronline.org/

É bem simples de utilizar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .