Entendendo o arquivo JSON – javascript jquery json

Pergunta:


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

});

Autor da pergunta Pedro Gelli

Comunidade

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>');
    }
});

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

});

{
    "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.

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

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!

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

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

http://jsoneditoronline.org/

É bem simples de utilizar.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *