Categorie
Javascript Programmazione

{JS} JSON

Serializzazione e deserializzazione

La serializzazione è il processo di trasformazione di un oggetto in un formato facilmente memorizzabile e/o trasmissibile.
Possiamo quindi memorizzare dati/rappresentarli in maniera da poterli trasferire tra programmi anche diversi ed è fondamentale nella programmazione.
Il processo inverso alla serializzazione è detto deserializzazione.

Cos’è JSON?

JavaScript Object Notation (JSON) è una rappresentazione testuale di dati (oggetti), basata su elenchi ordinati, memorizzati all’interno di un particolare file con estensione .json
JASON è supportato, in modo nativo o tramite librerie, dalla maggior parte dei linguaggi di programmazione facilitando lo scambio di informazioni tra essi.
I dati JSON sono archiviati in file che terminano con l’estensione .json e contengono testo semplice.
Principale alternativa a JSON è XML ma quet’ultima risulta sempre meno utilizzata.

Quando e perchè utilizzare JSON?

Fino all’inizio degli anni 2000 il client (browser) serviva principalmente ed unicamente per visualizzare informazioni; tutto il resto dell’lavoro era riversato sui server.
Il server doveva preparare le informazioni necessarie in HTML e il browser doveva renderizzare l’HTML mostrando una nuova pagina.
Questo modello progettuale era lento e inefficiente in quanto richiedeva al browser di eseguire nuovamente il rendering di tutta la pagina anche se cambiava solo una sua sezione.
Con i file JSON viene introdotta un nuovo modello la cui capacità è di gestire richieste web (in background), con un numero di dati da subito disponibili (contenuti nel file JSON), mentre si naviga e viene mostrata una pagina.

Sintassi file JSON

Come detto JSON è un formato di dati generico, un sottoinsieme della notazione letterale degli oggetti javascript, scritti sotto forma di stringhe.

Regole principali di sintassi

  • JSON inizia con una coppia di parentesi graffe che racchiudono il corpo dell’intera struttura (come se fosse il tutto racchiuso in un macro oggetto);
  • I dati di un file JSON sono scritti come coppie “nome/valore”.
  • I dati sono separati da virgole
  • Le parentesi graffe contenere oggetti
  • Le parentesi quadre tengono array
{
"nome":"Mario",
"cognome":"Rossi"
}

Nomi

Tutte le proprietà sono scritte tra doppi apici.

"nome" : "Mario"

I nomi JSON richiedono doppi apici mentre sappiamo che i nomi JavaScript non lo richiedono.

Valori

I valori di un un dato JSON possono contenere i seguenti valori:

  • numero (intero o in virgola mobile)
  • stringa (tra virgolette)
  • valore booleano (vero o falso)
  • array (tra parentesi quadre)
  • array di oggetti (tra parentesi quadre)
  • un oggetto (tra parentesi graffe)
  • null

Non possono contenere invece metodi e/o funzioni.

Tutti questi tipi di dati sono rappresentati in tutti i linguaggi di programmazione più comuni. Motivo per il quale l’utilizzo di JSON è adatto per il passaggio di dati tra un programma e l’altro e tra diversi linguaggi di programmazione.

{

"cap": 76125,
"messaggio" : "Ciao a tutti",
"esito" : true,

"persona" : {
 "nome" : "Mario",
 "cognome": "Rossi"
 },

"gruppoPersone" : [
   { "nome" : "Luigi",
     "cognome" : "Rossi"
     },
   {  "nome" : "Giuseppe",
      "cognome" : "Bianchi"
     }
],

"date" : [ 1985, 1990, 2000 ]

}

JSON vs XML

Mentre i testi JSON risultano immediatamente leggibili e comprensibili non si può dire altrettanto dei loro equivalenti in formato XML.
Scrivere un documento in formato JSON non è molto più gravoso che redigere un normale file di testo, basta prestare attenzione alle regole di punteggiatura; redigere un simile documento conformandosi ai vincoli imposti da XML è decisamente più impegnativo data la necessità di bilanciare i tag aperti e chiusi riscrivendo il nome dell’attributo per non parlare del maggiore lavoro di digitazione.

{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 18,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "123 456-7890"
    }
  ],
  "children": [],
  "spouse": null
}
<?xml version="1.0" encoding="UTF-8" ?>
    <firstName>John</firstName>
    <lastName>Smith</lastName>
    <isAlive>true</isAlive>
    <age>18</age>
    <address>
        <streetAddress>21 2nd Street</streetAddress>
        <city>New York</city>
        <state>NY</state>
        <postalCode>10021-3100</postalCode>
    </address>
    <phoneNumbers>
        <type>home</type>
        <number>212 555-1234</number>
    </phoneNumbers>
    <phoneNumbers>
        <type>office</type>
        <number>646 555-4567</number>
    </phoneNumbers>
    <phoneNumbers>
        <type>mobile</type>
        <number>123 456-7890</number>
    </phoneNumbers>
    <spouse />

L’oggetto JSON

Javascript dispone di un particolare oggetto “JSON” che si occupa di convertire i dati da Javascript-a-JSON e da JSON-a-Javascript.

Rappresentazione JSON

JSON utilizza un sottoinsieme della notazione letterale degli oggetti di JavaScript rappresentandoli sotto forma di stringa.

Oggetto in JS
{nome: "Mario", cognome: "Rossi"}
Oggetto in JSON
'{"nome" : "Mario", "cognome" : "Rossi"}'
Array in JS
[1, "test", true]
Array in JSON
'[1, "test", true]'

Metodi per la conversione

L’oggetto JSON ( introdotto da ECMAScript 5) è un parser nativo per la serializzazione e deserializzazione.
Il parser è implementato dai due metodi dell’oggetto JSON parse() e stringify() che sono accessibili dalla propria base.

JSON.parse()

Il metodo parse() prende in input una stringa JSON e genera il corrispondente oggetto JavaScript.
Il metodo prende come argomento una stringa JSON.

var marioRossi = JSON.parse('{"nome" : "Mario", "cognome" : "Rossi"}');

JSON.stringify()

Il metodo stringify() genera la rappresentazione JSON dell’oggetto passato come argomento.

var jsonMarioRossi = JSON.stringify({nome: "Mario", cognome: "Rossi"});

Connettersi al file JSON

Fino ad ora ci siamo occupati di spiegare:

  • cos’è un file JSON
  • com’è scritto un file JSON,
  • come convertire “stringe JSON” in/per Javascript
  • come convertire/preparare un oggetto (dato) Javascript per i file JSON.

Di fatto non abbiamo creato una “connessione” con il file in modo da poter inviare/ricevere i dati.

L’accoppiata AJAX & JSON

Per ricevere ed inviare informazioni da/a un file JSON, quest’ultimo, deve essere caricato sul server.
Ma per utilizzare il nostro file, caricato sul server, dovremo prima effettuare, mediante l’oggetto AJAX una richiesta al server.

Le tecnologie AJAX e JSON hanno un legame molto forte.
AJAX con l’oggetto built-in XMLHttpRequest permette di inviare una richiesta al server per caricare ed inviare informazioni ad un file: XML, JSON, HTML e TXT.

Mentre, JSON, consente di salvare informazioni in un file sotto forma di un oggetto molto simile ad un oggetto JavaScript, con proprietà che possono essere: stringhe, numeri, valori booleani, array ed altri oggetti.

Risorse sul web:

https://www.html.it/pag/55471/serializzare-gli-oggetti-in-javascript/

https://tutorialjavascript.altervista.org/sez5-ajax-json/introduzione-json

https://www.cwi.it/sviluppo-software/web/json-cosa-e-122893

https://www.html.it/articoli/introduzione-a-json/

https://tutorialjavascript.altervista.org/sez5-ajax-json/introduzione-ajax

Altri argomenti da trattare

https://easyseopro.it/aggiungere-css-e-javascript-su-prestashop-17/

https://webpack.js.org/plugins/css-minimizer-webpack-plugin/

https://kinsta.com/it/blog/librerie-javascript/

https://www.collectiveray.com/add-javascript-to-wordpress

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *