Revisió de 15:03, 19 abr 2024

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.

Exemples de Json

El principi bàsic és amb parells atribut-valor, aquests han d'estar tancats entre claus {,} que és el que defineixen l'inici i la fi de l'objecte.

Parell Nom/Valor

Generador JSON https://www.json-generator.com/

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:

{
  "profes": [
    {
      "firstName": "Julio",
      "lastName": "Noguera"
    },
    {
      "firstName": "Albert",
      "lastName": "Canela"
    },
    {
      "firstName": "Alex",
      "lastName": "Salinas"
    }
  ]
};

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 profes=[
  {
    "firstName": "Julio",
    "lastName": "Noguera"
  },
  {
    "firstName": "Albert",
    "lastName": "Canela"
  },
  {
    "firstName": "Alex",
    "lastName": "Salinas"
  }
]

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

EXEMPLES

//Ejemplo de JSON para un objeto tipo Persona
{
"nombre":"Julio Noguera",
"edad":30,
"nacionalidad":"Española",
"altura":"182 cm",
"peso":75
}

Json amb booleans, nombre, cadenes i un objecte direcció

{
"nombre":"Fulano Probencio",
"edad":27,
"nacionalidad":"Chileno",
"altura":"172 cm",
"peso":75,
"pasatiempos":["Polo","Cricket","Ski","Drafting","Gaming"],
"soltero":true,
"direccion":{
    "calle":"Ave. Siempre Viva",
    "numero":"123",
    "pais":"México"
    }
}

Un array de objectes persona.

{
    "personas": [
        {
            "nombre": "Julio Noguera",
            "edad": 30,
            "nacionalidad": "Española",
            "altura": "182 cm",
            "peso": 75,
            "pasatiempos": [
                "Polo",
                "Cricket",
                "Ski",
                "Drafting",
                "Gaming"
            ],
            "soltero": true,
            "direccion": {
                "calle": "Ave. Siempre Viva",
                "numero": "123",
                "pais": "España"
            }
        },
        {
            "nombre": "Ramón",
            "edad": 22,
            "nacionalidad": "Catalana",
            "altura": "178 cm",
            "peso": 72,
            "pasatiempos": [
                "Pintar",
                "Programar",
                "Scuba Diving"
            ],
            "soltero": true,
            "direccion": {
                "calle": "Ave. Siempre Viva",
                "numero": "123",
                "pais": "Catalana"
            }
        },
        {
            "nombre": "Amiga Pepita",
            "edad": 25,
            "nacionalidad": "Cubana",
            "altura": "167 cm",
            "peso": 55,
            "pasatiempos": [
                "Natación",
                "Alpinismo",
                "Cinéfila",
                "Socializar",
                "Gaming"
            ],
            "soltero": true,
            "direccion": {
                "calle": "Cerro del Estudiante",
                "numero": "456",
                "pais": "Argentina"
            }
        }
    ]
}

Exemple 1 :

{
  "employees": [
    {
      "firstName": "Julio",
      "lastName": "Noguera"
    },
    {
      "firstName": "Albert",
      "lastName": "Canela"
    },
    {
      "firstName": "Alex",
      "lastName": "Salinas"
    }
  ]
}

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;

Validadors de json

http://jsonviewer.stack.hu/

http://jsonlint.com/

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

NO RECOMENDADO

http://www.etnassoft.com/2011/01/05/javascript-eval-uso-y-alternativas/

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 + ")");

First Name:
Last Name:

<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).

JAVASCRIPT & JSON

Analitzar text JSON i convertir-lo en un objecte (JAVASCRIPT)

• Es pot fer amb la llibreria nativa de JSON per javascript (Javascript)
• la llibreria tracta una cadena de text i el transforma com a objecte JSON

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

https://www.w3schools.com/js/js_json_parse.asp

Donat un objecte JSON converti-lo en Text

• Transforma tot el contingut de un objecte Json a string

var myJSONText = JSON.stringify(myObject);

Més informació a https://www.w3schools.com/js/js_json_stringify.asp

PHP & JSON

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

LLegir i escriure Fitxer desde PHP

Si volem llegir un fitxer .json haurem d'utilitzar la instrucció "file_get_contents". Les dades que obtinguis d'aquesta funció, els hauràs de guardar en una variable qualsevol

$ json = file_get_contents ("./datos.json");

Guarda información dentro de un fichero, en este caso un JSON

$json_string1 = {"posicionX":250,"posicionY":100}
file_put_contents('./datos.json', $json_string1)

Crear un JSON desde PHP (json_encode)

Creem un objecte Json a partir de un array en PHP

$miArray = array("manzana"=>"verde", "uva"=>"Morada", "fresa"=>"roja");
print_r(json_encode($miArray));

//resultat que mostrar  {"manzana":"verde","uva":"Morada","fresa":"roja"}

Crear un objeto en PHP con JSON (json_decode)

Tenim un objecte Json y el transformen a un array de PHP exemple 1 un json simple.

<?php
$jsonData = '{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" }';

$phpArray = json_decode($jsonData);

//print_r($phpArray);
//stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) 

//en el cas de volver recorrer l'array mostraría la clau i el valor
foreach ($phpArray as $key => $value) { 
    echo "<p>$key | $value</p>";
}
?>

<php>

Altre exemple

$jsonData = '[{ "usuario":"Julio", "edad":30, "comunidad":"catalunya" },{ "usuario":"pepe", "edad":28, "comunidad":"valencia" },{ "usuario":"pep", "edad":23, "comunidad":"murcia" }]';
$phpArray = json_decode($jsonData);

//print_r($phpArray);
/*Array ( [0] => stdClass Object ( [usuario] => Julio [edad] => 30 [comunidad] => catalunya ) [1] => stdClass Object ( [usuario] => pepe [edad] => 28 [comunidad] => valencia ) [2] => stdClass Object ( [usuario] => pep [edad] => 23 [comunidad] => murcia ) ) Julio 30 catalunya pepe 28 valencia pep 23 murcia */

//recorrer un array i mostrar les dades.
foreach($phpArray as $obj){
        $id_usuario = $obj->usuario;
        $edad = $obj->edad;
        $comunidad = $obj->comunidad;
        echo $id_usuario." ".$edad." ".$comunidad;
        echo "";
}


//també podem accedir al contingut de la seguüent manera echo "$phparray[0]->usuario";

jQuery & JSON

Analitzar text JSON i convertir-lo en un objecte (JQUERY)

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

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

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

LLegir dades des de un fitxer JSON (JQUERY)

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=0;i<data.users.length;i++) {
            output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
        }

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

Ens mostrará en pantalla

* Ray Villalobos--January
   * John Jones--April

Enviar un objecte JSON amb $.ajax() (JQUERY)

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

Exemple 3:

var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };

        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}

XML

En aquest apartat es veurà com utilitzar XML per guardar dades des de un servidor PHP. Exemple de XML:

Fitxer aules.xml:
<aules>   
    <aula>
        <nom>205</nom>
        <subxarxa>172.16.205.0</subxarxa>
        <mascara>24</mascara>
        <estatinicial>denega</estatinicial>
        <estatactual>filtra</estatactual>
    </aula>
    <aula>
        <nom>206</nom>
        <subxarxa>172.16.206.0</subxarxa>
        <mascara>24</mascara>
        <estatinicial>denega</estatinicial>
        <estatactual>denega</estatactual>
    </aula>
</aules>

Per representar aquest fitxer com a un arbre i poder-lo recòrrer s'utilitza la llibreria DOMDocument de PHP.

Creació de l'Arbre XML

Per crear una representació del fitxer anterior, primer s'ha de crear l'objecte DOMDocument i a continuació llegir el fitxer:

$file = "files/aules.xml";
$xmldom = new DOMDocument();
$xmldom->load($file);

Obtenir un element de l'arbre

Es pot utilitzar la funció getElementsByTagName. Exemple:

$aules = $xmldom->getElementsByTagName("aula");

Recòrrer tots els elemens

Podem recòrrer tots els element amb un foreach:

$aules = $xmldom->getElementsByTagName("aula");
foreach ($aules as $aula) {
    $name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
    $net = $aula->getElementsByTagName("subxarxa")->item(0)->nodeValue;
    $mask = $aula->getElementsByTagName("mascara")->item(0)->nodeValue;
}

Afegir un nou element

Per afegir un nou elment s'ha de crear un node nou i afegir tos els fills que es necessiti per crear el XML correcte. Exemple:

$auladom = $xmldom->createElement("aula");
//creamos el nodo NOM con su valor $classroomname
$aulanomdom = $xmldom->createElement("nom");
$domnode = $xmldom->createTextNode(strtolower($classroomName));
$aulanomdom->appendChild($domnode);
$auladom->appendChild($aulanomdom);

//creamos el nodo NETWORK con su valor $network
$aulanetwork = $xmldom->createElement(XARXA_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($network));
$aulanetwork->appendChild($domnode);
$auladom->appendChild($aulanetwork);

//creamos el nodo MASK con su valor $mask
$aulamask = $xmldom->createElement(MASK_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($mask));
$aulamask->appendChild($domnode);
$auladom->appendChild($aulamask);

//creamos el nodo initial status con su valor $initialstatus
$aulastatus = $xmldom->createElement(INIT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulastatus->appendChild($domnode);
$auladom->appendChild($aulastatus);

//creamos el nodo current status con su valor $initialstatus
$aulacurrentstatus = $xmldom->createElement(CURRENT_AULA_XML);
$domnode = $xmldom->createTextNode(strtolower($initialstatus));
$aulacurrentstatus->appendChild($domnode);
$auladom->appendChild($aulacurrentstatus);

//afegim el node aula a la llista de nodes
$root = $xmldom->documentElement;
$root->appendChild($auladom);

//guardem        
$xmldom->save($filename);  

Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.

Esborrar un element

Per esborrar un element, primer s'ha de cercar, després dir-li al pare que ens volem eliminar. Però també hem d'esborrar els fills!.

//funció que esborra un node i els seus fills
    function deleteNode($node) {
        deleteChildren($node);
        $parent = $node->parentNode;
        $oldnode = $parent->removeChild($node);
    }

//funció que esborra els fills d'un node
    function deleteChildren($node) {
        while (isset($node->firstChild)) {
            deleteChildren($node->firstChild);
            $node->removeChild($node->firstChild);
        }
    } 
    
//funció que cerca al XML un node amb el nom=$classroomname    
    function delete($classroomName){
         $aules = $xmldom->getElementsByTagName("aula");
          foreach ($aules as $aula) {
            $name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
            if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
                deleteNode($aula);
                $xmldom->save($this->filename);   
            }
        }
    }

Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.

Modificar un valor

Per modificar un valor, primer es cerca i després es mira quin dels atributs es vol modificar:

    function setNewClassroomAttr($classroomName, $attr, $value)
    {
        $aules = $xmldom->getElementsByTagName("aula");
        foreach ($aules as $aula) {
            $name = $aula->getElementsByTagName("nom")->item(0)->nodeValue;
            if (strcmp(strtolower($name), strtolower($classroomName)) == 0){
                $aula->getElementsByTagName($attr)->item(0)->nodeValue = strtolower($value);
                $this->xmldom->save($this->filename);   
            }
        }
        
    }

Finalment, s'ha de guardar el dom resultant al fitxer per mantenir correctament els canvis. Es fa amb la funció save.

Podeu trobar més informació a http://www.php.net/manual/en/class.domdocument.php

Traduïr un XML a JSON

En el següent enllaç podem veure que els fitxers XML es poden traduir a sintaxi JSON. Tanmateix, quan els fitxers XML es compliquen, el seu equivalent JSON passa a ser bastant difícil de llegir i interpretar: http://www.utilities-online.info/xmltojson/#.WjqMa2fWxMw

EXERCICIS

1.Crea una aplicació que rep com paràmetre en un input una ciutat i després es realitza una consulta amb fetch que retorni el temps de la ciutat o que digui que no hi ha cap ciutat anomenada així.

• Api d'on treurem el temps:

http://neftali.clubdelphi.com/hablando-del-tiempo-openweathermap-12/

• Exemple amb la ciutat Barcelona

http://api.openweathermap.org/data/2.5/find?&q=Barcelona,es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19"

• Exemple html on mostra les dades obtingudes:

`<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br>
                        <b>Estado del cielo: </b>${estado_cielo}<br>
                        <b>Descripción: </b>${descripcion}<br>
                        <br>
                        <b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br>
                        <b>Presión: </b>${presion}<br>
                        <b>Humedad: </b>${humedad}<br>
                        <br><br><br><br><br> `

Solució:

<!DOCTYPE html>
<meta charset="UTF-8">
 <head>
<script type="text/javascript">

window.onload=function(){
  
  function consulta() {
    ciutat = document.getElementById("tecla").value;
    if(ciutat != null){
        url = `http://api.openweathermap.org/data/2.5/find?&q=${ciutat},es&lang=es&units=metric&APPID=278857e8dee51f914026df21d0d40c19`

        fetch(url)
                .then(function (response) {
                    if (response.ok) {
                        return response.text()
                    } else {
                        throw "Error a la crida Ajax";
                    }
                })
                .then(function (responseText) {
                    var myObject = JSON.parse(responseText);

                    if (myObject.count==0){
                        document.getElementById('resultado').innerHTML = "La ciutat no existeix";
                    }
                    else{
                        dades = myObject.list[0];

                        ciudad = dades.name;
                        lat = dades.coord.lat;
                        lon = dades.coord.lon;
                        temp = dades.main.temp;
                        tempmax = dades.main.temp_max;
                        tempmin = dades.main.temp_min;
                        presion = dades.main.pressure;
                        humedad = dades.main.humidity;
                        vel_viento = dades.main.temp;
                        estado_cielo = dades.weather[0].main;
                        descripcion = dades.weather[0].description;

                        document.getElementById('resultado').innerHTML =  `<br><h3 style="display: inline;">Ciudad: ${ciutat}</h3> [lat = ${lat}, lon = ${lon} ] <br><br>
                        <b>Estado del cielo: </b>${estado_cielo}<br>
                        <b>Descripción: </b>${descripcion}<br>
                        <br>
                        <b>Temperatura: </b>${temp} K [Máx: ${tempmax}K, Mín: ${tempmin}K]<br>
                        <b>Presión: </b>${presion}<br>
                        <b>Humedad: </b>${humedad}<br>
                        <br><br><br><br><br> `

                    }
                })
                .catch(function (err) {
                    console.log(err);
                });

    }

  }
 document.getElementById("b").onclick=consulta;
}
 
</script>

</head>
<body> 
      
      <label>Ciudad: </label>
      <input id="tecla" type="text" name="ciudad" />
      <input id="b" type="submit" name="submit" value="OK" />
   
   <div id="resultado"> </div>
 </body>
</html>