Understanding the JSON file

Question

I have a code similar to this on Jsfiddle. On my home WAMP server I did to try working with JSON (Jsfiddle does not contain the JSON file to test).

In a question I asked about how to insert data into a database with jQuery I was told that it would be a good option to store the data in JSON files. The author of the reply showed me what the syntax of the JSON file would look like. He said he could do the following:

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

In my tests with this jsfiddle code worked well when the JSON file was in format:

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

But when I put it in the format that the author of the answer to my first question showed, the click on the link "Click me to list" does not trigger anything.

I would like to know the difference between the two syntaxes, because I want to make a small website with a small database with information about the movies I’ve already watched and the ones I’m still going to see. A link on where to get this information on how to build a JSON file and how to access these values would be a good one.

I use the method $.ajax() to rescue my JSON that is inside a file *.json by code:

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

});

Answer 1

A great link to JSON syntax interpretation is this: http://json.parser.online.fr/ any JSON, which this site interprets OK without errors, you can use in your code, but about your JSON:

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

This JSON above is incorrect, see that if you put it in json parser online it accuses errors.

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

This JSON above is correct, it will not accuse errors, but you should not use it because you need to denote an object to access objeto.propriedade as I am doing in the Array just below:

Here you have an Array of "Movie" Objects where you can use it to iterate your movies.

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:

To use JSON within a *.json file rescued from an AJAX Request you must do the following:

Use the following JSON code (this time without variable definition) in your *.json file:

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

And use this javascript code to make you understand JSON, and then adapt it the way you use it:

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

});

Answer 2

As I was the one who suggested the JSON and created the confusion, I will explain myself: the JSON I posted in the other answer was invalid (already corrected), because in JSON the keys need to be in double quotes, as well as values of type String.

Therefore, the JSON file could contain exactly what Gabriel Ribeiro suggested:

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

^{(I removed the accented characters to avoid problems, although they are valid.)}

An example in jQuery to get and use this data via ajax would be:

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

Answer 3

{
    "nome": "Kadu",
    "idade": "25"
}

This is an Object that stores a name and an age.

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

This is an array of people. Every time you have a collection or dataset, you can store them in an array and you can iterate through that array using a loop structure.

Answer 4

In your first example, you are creating a vector with two objects. The correct syntax would be the second, and to create more objects you have to do as follows:

[
    {
        "Titulo": "Até que a sorte nos separe",
        "duração": "120 min"
    },
    {
        "Titulo": "Matrix",
        "duração": "140 min"
    }
]

Answer 5

Guy would be nice also you give a read on the JSON documentation, follow the links:

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

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

I see a lot of people confusing JSON format with Literal Object, see an example:

JSON:

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

Object Literal:

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

I can’t put more than two links yet, but there’s plenty on the net that can shed more light on how you should work with JSON, and the difference that exists from Literal Object.

I hope I’ve helped!

Answer 6

The first example is a json array with 2 objects, each object has a title and a year.

The second example is a simple json object with 3 properties (3 key pairs - value).

I recommend a format similar to the first example (an array of objects) to represent a collection of movies.

["titulo 1", "titulo 2"] 

Answer 7

Another site I like to access for JSON editing is this:

http://jsoneditoronline.org/

It’s very simple to use.