Revisió del 09:20, 28 abr 2014

JSON

JSON (JavaScript Object Notation) és un format d'intercanvi de dades lleuger. És fàcil per als éssers humans a llegir i escriure. És fàcil per a les màquines per analitzar i generar. Es basa en un subconjunt del llenguatge de programació JavaScript, estàndard ECMA-262 3rd Edition -. Desembre 1999 JSON és un format de text que és completament independent del llenguatge però utilitza convencions que són familiars per als programadors de la C-família de llenguatges, incloent C , C + +, C #, Java, JavaScript, Perl, Python, i molts altres. Aquestes propietats fan de JSON un llenguatge ideal-l'intercanvi de dades. JSON es basa en dues estructures:

• Una col · lecció de parells nom / valor. En diversos idiomes, això es realitza com un objecte, fitxa, estructura, diccionari, taula hash, llista amb clau, o una matriu associativa.
• Una llista ordenada de valors. En la majoria dels idiomes, això es realitza en forma de matriu, vector, llista o seqüència.

Es tracta d'estructures de dades universals. Pràcticament tots els llenguatges de programació moderns els donen suport d'una manera o altra. Té sentit que un format de dades que és intercanviable amb els llenguatges de programació també es basarà en aquestes estructures.

Com que utilitza la sintaxi de JSON amb JavaScript sense necessitat de programari addicional que es necessita per treballar amb JSON en JavaScript.

Exemple 1 :

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

Exemple 2 :

var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555", 
"age":33,
"phone":"555 1234567"};

document.getElementById("jname").innerHTML=JSONObject.name;
document.getElementById("jage").innerHTML=JSONObject.age; 
document.getElementById("jstreet").innerHTML=JSONObject.street;
document.getElementById("jphone").innerHTML=JSONObject.phone;

Parell Nom/Valor

Les dades en format JSON està escrit en forma de parells nom / valor.

Un parell de nom / valor consisteix en un nom de camp (entre cometes), seguit de dos punts, seguit d'un valor:

"firstName" : "John"

Això és fàcil d'entendre, i és igual a la instrucció de JavaScript:

firstName = "John"

Valors Json:

• Un nombre (sencer o punt flotant)
• Una cadena (entre cometes)
• Booleà (cert o fals)
• Un conjunt (entre claudàtors)
• Un objecte (entre claus)
• nul

JSON Objects

Objectes JSON s'escriuen entre claus,

Els objectes poden contenir diversos parells de noms / valors:

{ "firstName":"John" , "lastName":"Doe" }

Això també és fàcil d'entendre, i és igual a les sentències de JavaScript:

firstName = "John";
lastName = "Doe";

JSON Array

Arrays JSON s'escriuen entre claudàtors.

Una matriu pot contenir diversos objectes:

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

En l'exemple anterior, l'objecte "empleats" és una matriu que conté tres objectes. Cada objecte és un registre d'una persona (amb un nom i un cognom).

var employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }
]

employees[0].firstName + " " + employees[0].lastName;

La conversió d'un text JSON a un objecte JavaScript

Crear una cadena de JavaScript que conté la sintaxi de JSON:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

La sintaxi JSON és un subconjunt de la sintaxi de JavaScript, la funció eval () de JavaScript es pot utilitzar per convertir un text JSON en un objecte de JavaScript.

La funció eval () utilitza el compilador de JavaScript que analitzar el text JSON i produeix un objecte de JavaScript. El text ha de ser embolicat amb parèntesi per evitar un error de sintaxi:

var obj = eval ("(" + txt + ")");

<p>
First Name: <span id="fname"></span><br /> 
Last Name: <span id="lname"></span><br /> 
</p> 

<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName; 
</script>

És més segur utilitzar un analitzador JSON per a convertir un text JSON en un objecte de JavaScript. Un analitzador JSON reconeixerà només text JSON i no compilar scripts.

En els navegadors que donen suport JSON natiu, analitzadors JSON són també més ràpid.

Suport JSON nadiu està inclòs en tots els principals navegadors i en l'últim estàndard ECMAScript (JavaScript).

jQuery & JSON

LLegir dades des de un fitxer JSON

Supossem que tenim un fitxer anonenat dades.json i el volem llegir amb Javascript. Fitxer dades.json :

{"users":[
        {
            "firstName":"Ray",
            "lastName":"Villalobos",
            "joined": {
                "month":"January",
                "day":12,
                "year":2012
            }
        },
        {
            "firstName":"John",
            "lastName":"Jones",
            "joined": {
                "month":"April",
                "day":28,
                "year":2010
            }
        }
]}

S'utilitza la funcion getJSON de jQuery:

$.getJSON('files/data.json', function(data) {
        var output="<ul>";
        for (var i in data.users) {
            output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
        }

        output+="</ul>";
        document.getElementById("placeholder").innerHTML=output;
  });

Analitzar text JSON i convertir-lo en un objecte

• Es pot fer amb la funció Jquery.parse(): rep una cadena JSON ben formatada i retorna l'objecte JavaScript resultant.

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

https://api.jquery.com/jQuery.parseJSON/

• Es pot fer amb la llibreria nativa de JSON per javascript

var myObject = JSON.parse('{ "name": "John" }');

http://www.json.org/js.html

Donat un objecte JSON converti-lo en Text

• Es pot fer amb la llibreria nativa de JSON:

var myJSONText = JSON.stringify(myObject);

Més informació a http://www.json.org/js.html

Enviar un objecte JSON amb $.ajax()

Exemple 1:

$.ajax({
        type: "POST",
        url: hb_base_url + "consumer",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify({
            first_name: $("#namec").val(),
            last_name: $("#surnamec").val(),
            email: $("#emailc").val(),
            mobile: $("#numberc").val(),
            password: $("#passwordc").val()
        }),
        success: function(response) {
            console.log(response);
        },
        error: function(response) {
            console.log(response);
        }
});

Exemple 2:

var obj = {};

obj.first_name = $("#namec").val();
obj.last_name = $("#surnamec").val();
obj.email = $("#emailc").val();
obj.mobile = $("#numberc").val();
obj.password = $("#passwordc").val();

$.ajax({
        type: "POST",
        url: hb_base_url + "consumer",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(obj),
        success: function(response) {
            console.log(response);
        },
        error: function(response) {
            console.log(response);
        }
    });

PHP & JSON

A PHP s'utilitzen dos funcions per manipular JSON: json_encode i json_decode. A la sigüent Web trobareu com utilitzar-les: http://www.php.net/manual/es/function.json-decode.php