Trascrizione: (click per espandere)

salve a tutti in questo video parlerò di
json sarà un video introduttivo
all'argomento json perché appunto anche
questo è un argomento vasto quindi se
poi volete approfondire dovete andare a
cercare in qualche materiale online che
però troverete sicuramente cos'è json
json questo è l'acronimo significa
javascript object notation e come
suggerisce il nome è una maniera per
immagazzinare informazioni in un formato
molto simile a un oggetto javascript e
sto utilizzando la stessa funzione ajax di
prima stessa identica eccola qui e ho
solo cambiato un po alla html che poi
andremo ad utilizzare comunque voi
potete già riportarvi copiare il file
che avete usato nel video precedente e
la potete usare per questo qui poi ho
creato un file prima stavamo utilizzando
un file di testo
adesso andiamo utilizzare un file json
quindi estensione json con ajax si
possono richiedere diversi tipi di file
appunto abbiamo richiesto un file di
testo adesso andremo a richiedere un
file json
possiamo anche andare a richiedere un
file xml dipende da quello che dobbiamo
fare
e adesso come si scrive un file json
allora come vi dicevo appunto l'oggetto
json ricorda molto l'oggetto javascript
quindi parentesi graffe che racchiudono
il nostro oggetto ed eto'o ci sono le
nostre proprietà ad esempio qui o la
proprietà uno che è un altro oggetto che
ha tre proprietà
e le proprietà possono essere
come in questo caso stringhe possono
essere numeri o possono essere valori
booleani non possono essere funzioni
possono anche essere array come in
questo caso questo array ad esempio ha tre
elementi ho messo dentro tre stringhe
pero' potrebbero essere
tre numeri potrebbero essere valori
booleani la differenza tra un oggetto
json è un oggetto javascript è che le
proprietà il nome delle proprietà vanno
racchiuse dalle virgolette eccoli
qui mentre l'oggetto javascript è il
nome della proprietà dell'oggetto va
senza virgolette
inoltre per l'oggetto json le virgolette
devono essere doppie non potete usare il
singolo apice dovete usare il doppio a
virgoletta altrimenti vi ritorna un
errore e poi state attenti
l'ultima proprietà come in questo caso
non deve avere la virgola altrimenti
avrete un errore quindi anche in questo
caso quindi se io metto la virgola qui
qui e qui
riceverò un errore quindi ricordatevi le
ultime proprietà del dell'oggetto
l'elemento dell'array non devono
avere la virgola
ok torniamo al nostro file html
adesso noi andremo a richiedere questo
file come abbiamo visto fare prima
utilizzando ajax e andiamo visualizzava
da visualizzare nella mia console
l'oggetto json come vedete qui è la
stessa identica funzione di primo solo
cambiato il nome del file che vado
a richiedere ho messo dentro ad esempio
json e qui ho messo console log e le
vado a visualizzare la
il risultato del la risposta del server
adesso decommento questo quindi vado a
invocare la mia funzione
eccolo qui e questo è il mio oggetto
json visualizzato nella console come
vedete è identico a quello che c'è
scritto qui non posso al momento non
posso andare a manipolare questo oggetto
con javascript perché come vedete è
ancora un oggetto json perché le
proprietà hanno le doppie virgolette
come faccio a convertirlo in un oggetto
javascript per poterlo poi manipolare
semplicissimo vado a utilizzare
l'oggetto json è la e il suo metodo
parse e dentro ci metto la risposta è
adesso vedete che il mio oggetto json è
stato convertito in un oggetto
javascript
come vedete le proprietà adesso non
hanno più le virgolette e ciò tutto
quello che era dentro il mio oggetto
json un'altra cosa quando io richiedo il
json dal server devo convertirlo
utilizzando il metodo parse quindi lo
converto da oggetto json a oggetto
javascript quando io invio
informazione al server quindi vado
inviare un oggetto javascript al server
quindi il mio server deve accettare
l'oggetto in versione json come si fa sì
sì
vi faccio vedere qui un esempio molto
veloce ad esempio io dichiaro nuovo
oggetto qui oggetto ci metto
dentro un oggetto javascript
metto prop 1 stringa e poi metto
prop due ci metto un numero ecco qui
allora io questo mio oggetto è un
oggetto javascript come vedete se adesso
io vado a inviarlo al server ricevo un
errore perché se lo invio così com'è è
ancora un oggetto javascript devo
convertirlo in un oggetto json come
faccio semplicissimo
anzi ve lo faccio vedere l'output di come
si cambia allora sempre oggetto json in
questo caso si usa il metodo stringify
che vuol dire convertire stringa
stringify
eccolo qui e dentro ci metto il mio
oggetto object se adesso andiamo a
vedere la output
ecco questo è il mio output questo qui è
il mio output questo qua è quello che
sarà anzi vado a commentarlo
eccolo qui questo è il mio oggetto
javascript convertito in oggetto json
come vedete sono state
aggiunte le virgolette ai nomi delle
proprietà semplice anzi se io adesso ci
aggiungo anche un'altra facciamo altri
due
tanto per fare proprietà è questo
metto stringa due e questo metto
proprietà 4 e metto 2000
eccolo qui come vedete diventa un po'
difficile da leggere perché tutto quanto
raggruppato cosa si può fare per questo
si possono aggiungere due argomenti
al metodo stringify allora il primo
argomento passateci sempre false perché
se andrebbe inserita una funzione per
fare elaborazioni particolari però per
il momento non vi interessa come terzo
argomento potete inserire un numero che
è il numero di spazi di identazione
per le proprietà dell'oggetto ad esempio
ci metto 4 adesso io quando vado a visualizzare l'oggetto eccolo
qui il mio oggetto adesso è molto più
leggibile ho quattro spazi quindi 4
spazi da qui a dove inizia l'oggetto ed
è molto più leggibili quindi io posso
inviare il mio oggetto usando json
stringify e il nome dell'oggetto qui
mettete false è qui il numero di spazi
potete inviare quel tutta questa cosa al
al file json e il file json sarà molto
più leggibile altrimenti vi viene tutto
quanto su una riga ok detto
questo andiamo a commentiamo qui andiamo
ad elaborare un po il nostro file di
json allora andiamo a vedere cosa si può
fare con un file json un po più
complesso se vi ricordate prima vi ho
detto se un file di testo un vostro
amico che vuole cambiare il contenuto di
una pagina scrivere li tutto il contenuto
è automaticamente il contenuto del file
di testo viene visualizzato sulla pagina
bene però se voi volete che dentro
questo file
volete metterci dentro un titolo volete
metterci dentro non so delle proprietà
particolari colori roba eccetera
se mettete tutto in un file di testo
diventa tutto quanto un po' incasinato e
difficile poi da visualizzare sulla
pagina quindi in quel caso potete usare
un file json e può essere in maniera
potete andare a maneggiare le varie
parti del file in maniera molto più
dettagliata ad esempio se io questa
proprietà la trasforma in proprietà
testo e poi questa proprietà la
trasformo in titolo e ci metto imparare
a usare json
ecco qui e poi questa proprietà qui la
trasformo in par che sta per paragrafo
e ci metto dentro
bla bla bla e poi un po di lettere a
caso voilà
e poi questa proprietà qui la trasformò
in footer e ci metto dentro il testo
questo il footer
e poi questa proprietà qui la trasformo
in utenti e dentro ci metto dentro
magari marco poi ci metto dentro simone
e poi si mette dentro stefano
qui allora bene o male il nostro file
json è uguale a primo solo cambiato il
nome delle proprietà sono un po più
descrittivi e ho messo un po di roba
sensata come come come valore e adesso
torno qui e adesso mi crea una funzione
allora commento questa mi crea una
funzione anzi posso cambiare questo lo
tengo per dopo allora function
come posso chiamarla converti json converti
json e dentro cosa ci metto
allora converti dati allora abbiamo
detto che devo convertire quello che mi
viene dal server in quindi json parse
e dentro ci metto dati questi dati li passò
come argomento
ecco qui e poi comincia a fare
document.getelementbyid allora il primo
sarà titolo come vedete io qui avevo già
prestabilito un id titolo per il mio
titolo inner html e poi avrò con anzi
facciamo così dati anzi chiamiamola data in
inglese viene più corto e mi sta dentro
la pagina data appunto cosa sto facendo
qui io sto andando a creare una funzione
che mi andrà a maneggiare la risposta
del server
quindi io sapendo la struttura
dell'oggetto json che sarà passato che
sarà poi questo il questo la risposta la
passerò dentro al come argomento a
questa funzione questo argomento mi
verrà elaborato dal metodo json
parse quindi mi verrà convertito in
oggetto javascript e in poi le varie
proprietà dell'oggetto le vado a
manipolare con il mio javascript quindi
avrò la proprietà titolo quindi il mio
oggetto data avrà la questa struttura
quindi avrà anzi testo titolo quello mi
ero già dimenticato avrà testo la
proprietà testo di cui vado mi serve la
proprietà a titolo poi avrò qui ci metto
dentro display
quindi questo sarà paragrafo poi qui ci
metto footer e questo sarà il footer
poi ci voglio mettere dentro al
numero utenti
vado a metterci dentro come lo ha
chiamato questo utenti posso
usare la proprietà length per avere il
numero degli utenti quindi vado a
richiedere la lunghezza del mio array
e poi vado anche a visualizzare il nome
degli utenti è questo qua era nome
utenti anzi qui ci metto anche uno
spazio fuori meglio ok cosa
ricapitolando adesso io vado a fare una
richiesta ajax al server per il mio file
esempio json il mio file esempio json
ha già una struttura prestabilita in cui
io vado a richiedere determinate e
determinati testi per determinati campi
diversi campi e sapendo questa struttura
vado a convertire il mio oggetto json in
oggetto javascript e vado ad estrarre il
valore delle proprietà e vado a
visualizzarle in determinati parti della
mia pagina web
spero di essere stato chiaro il più
possibile adesso andiamo a vedere cosa
succede allora io qui vado a invocare la
mia funzione converti json e dentro ci
passò la risposta ok
devo cambiare il nome del file
come mai non vedo niente cosa mi sto
dimenticando sì devo invocare la
funzione allora come faccio a invocare
la funzione come avete visto nel video
precedente che utilizzavo
l'evento ha onclick quando l'utente
schiaccia sul bottone qui vado a
utilizzare l'evento onload che vuol dire
quando la pagina è stata caricata invoca
la funzione la funzione carica file
ecco qui
quindi quando la pagina ha finito di
caricare eseguì la funzione carica file
eccolo qua come vedete tutto il
contenuto del mio file jsonè stato
visualizzato nei punti giusti imparare
ad usare json è il mio titolo qui ho la
lunghezza del mio array ho i 3 utenti
questo è il contenuto del mio paragrafo
è questo il contenuto del footer con
questo è tutto ci sentiamo la prossima
ciao