Understanding the JSON file
I have a code similar to this in JSFiddle . On my Wamp server at home I made to try to work 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 answered that it would be a good option to store the data in JSON files. The author of the answer showed me what the syntax of the JSON file would look like more or less. Said I could do the next:
[
{ titulo: 'ET', ano: 1982 },
{ titulo: 'Indiana Jones', ano: 1981 }
]
In my tests with this JSFiddle code worked fine when the JSON file was in the 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 my first question's answer showed, clicking on the "Click me to list" link does not trigger anything.
I would like to know what is the difference between the two syntaxes, since I want to make a small website with a small database with information about the movies I have watched and the ones I will still see. A link on where to get this information of how to mount a JSON file and how to access these values would be a good one.
I use the $.ajax() Method to rescue my JSON that is inside a *file.json as 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");
}
},
});
7 answers
As I was the one who suggested the JSON and created the confusion, I will explain myself: the JSON that I posted in the other answer was invalid (I have already corrected), because in JSON the keys need to be in double quotes, as well as values of type string.
So 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 using 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>');
}
});
A great link for JSON syntax interpretation is this: http://json.parser.online.fr/ any JSON, that 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 the 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 charge 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 file of the *extension.json rescued from an AJAX Request you should do the following:
Use the following JSON code (this time without variable definition) in your *file.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"
}
]
}
And use this javascript code so that you understand JSON, and then adapt it your way what do you use:
$.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"
}
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 data set, you can store them in an array and you will be able to iterate through that array using a loop structure.
In your first example, vc is creating a vector with two objects. The correct syntax would be the second, and to create more objects vc has to do as follows:
[
{
"Titulo": "Até que a sorte nos separe",
"duração": "120 min"
},
{
"Titulo": "Matrix",
"duração": "140 min"
}
]
Guy would be nice also you give a read in the JSON documentation, follow the links:
DND: https://developer.mozilla.org/en/docs/JSON
JSON: http://www.json.org /
I see a lot of people confusing JSON format with Object Literal, 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 quite a thing on the net that can clarify more about how you it should work with JSON, and the difference that exists from the literal Object.
Hope I helped!
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 - value pairs).
I recommend a format similar to the first example (an array of objects) to represent a collection of movies.
["titulo 1", "titulo 2"]
Another site I like to access for JSON editing is this:
Is very simple to use.