Javascript Tutorial Italiano 16 - Lavorare con JSON

un buongiorno a tutti bentornati episodio numero 16 oggi abbiamo parlare di jayson allora se avete se non avete avuto pazienza fine del video precedente siete andate a cercare l'altro video che avevo fatto molto probabilmente se non erro non abbiamo fatto esempio su come chiamare jason da un file esterno e lavorarci internamente cosa che andremo a fare adesso se invece per caso lo fate non mi sono ricordato mega fa il mio scusatemi allora andiamo a vedere allora andiamo a vedere che cosa c'è in che cosa bolle in pentola oggi che cos'è jason la struttura di un

jason gli array come jason guarderemo delle note come possiamo ottenere un jason elaborare la definizione è che jason sta per javascript object notation ha mangiato della della notation in generale con la dott notation bracken notation quindi è un modo in cui mettere i dati è un standard text bass quindi è uno standard viene utilizzato tantissimo e il suo formato è text based quindi e rappresenta una struttura di dati ok basata sulla sintassi degli oggetti javascript che cosa ho appena detto allora opera detto che ripetiamo questa frase jason è uno standard perché è utilizzato ovunque ok

questo standard è basato sul testo ok è un formato testo come vedremo quindi è uno standard di passaggio dati basato sul sul format testo che rappresenta dei dati strutturati ok e ben già visto i dati strutturati e mezzo ha fatto esempio degli oggetti ed effettivamente questi dati strutturati riprendono la sintassi degli oggetti di javascript riformuliamo l'altra volta in modo terra terra jason è un modo di passare i dati molto simile agli oggetti di javascript quindi ricordando gli oggetti di javascript differiscono un pochino e basta questo è quando passiamo jason passiamo jason in realtà passiamo una

stringa ecco perché e text based in realtà poi devo passare una stringa che verrà passata sarebbe parso pars quindi andiamo poi a trasformarla in quelli che sono dati effettivi quindi noi abbiamo il nostro oggetto lo trasformiamo in jason quindi lo scriviamo lo scriviamo un certo modo lo trasformiamo in jason che diventa una stringa lo mandiamo dall'altra parte è scritto in un certo modo per cui noi possiamo andare a ritrasformarlo senza problemi perché è sempre scritte allo stesso modo la struttura è identica quindi una volta che ci arriva questa struttura contenuta in una stringa togliamo la

stringa otteniamo i nostri dati e li possiamo leggere questo e jason andiamo a vedere la struttura allora per la struttura qua vi faccio vedere velocemente questo esempio ma andiamo a creare il nostro allora vedete qua intanto che ha degli apici perché si parla di stringa appunto probabilmente qua sta scrivendo noi non fa il jason ma sta scrivendo dentro un file javascript quindi deve farlo diventare una stringa quello che abbiamo è un oggetto vedete abbiamo le cover li bracket che sono le parentesi graffe abbiamo le proprietà e abbiamo i dati che fanno riferimento quindi abbiamo un

po di cose abbiamo delle stringhe abbiamo un numero abbiamo i boolean abbiamo un array vedete qua abbiamo un array che è lungo fin qua che a sua volta contiene degli oggetti che a sua volta alle sue proprietà e la proprietà ha sotto array e potremmo andare avanti all'infinito lasciamo perdere questo esempio qua che è l'esempio di supereroi che uno degli esempi più classici che vedrete online arriviamo al nostro esempio io qua ho creato la classe jason ok ho creato una classe andiamo a riempirla quindi apriamo aprire un file punto jason quindi fate qua al nuovo

fa il punto gesone siete a posto entriamo qua dentro corali bracket e cominciamo a mettere i dati di questa classe innanzitutto la per cosa che dobbiamo fare è il nome della classe in questo caso è la quarta ok quarta potremo mettere e per assurdo la scuola la scuola e scuola superiore mio ok virgola questa scuola anzi non superiore ma scusatemi scuola elementare lo faccio per un motivo specifico questa classe sapete che all'elementari se non sono cambiate le cose da quando andai io vent'anni fa dovrebbero avere due o tre insegnanti due insegnanti che spiegano fondamentalmente tutto

quindi andiamo a mettere insegnanti che sono due insegnanti sono due quindi è una collezione quindi facciamo un array insegnanti abbiamo due insegnanti quindi è un array mi tornano i conti assolutamente sì il primo insegnante sarà lo facciamo da qua avrà un nome e mettiamo sempre en bleu roma mi ci sono affezionato cognome cognome blu potremmo avere trovare il codice fiscale tutto quello che volete ci limitiamo semplicemente a materie materie insegnate facciamo così e mettiamo un altro ray quindi un'altra regole materie insegnate ovvero storia italiano e facciamo geografia ok italiano e abbiamo geografia e questo è

il primo insegnante abbiamo facciamo la virgola mettiamo in secondo l'insegnante quindi copiamo direttamente così qua togliamo la virgola e la seconda insegnante è ludovica e blu diventa rossi ok che insegna matematica geometria e non so se c'è qualcos'altro quindi restiamo con matematica e geometria fin qua ritorna tutto direi che abbiamo un oggetto ok abbiamo chiaramente un oggetto classe che ha un nome che ha una scuola di riferimento che ha degli insegnanti che scusatemi quarta si ok né elementari sono sera fino alla quinta ok quindi questa quarta degli insegnanti a due insegnanti che si occupano ovviamente

hanno nome e cognome entrambi e si occupano di materie differenti ok fin qui è abbastanza semplice come struttura ora adesso si arriva il bello perché noi abbiamo gli alunni ora ne abbiamo alunni non li metteremo tutti e venti e passa semplicemente sulla stessa sulla stessa base di questo oggetto insegnanti ne potremmo avere letteralmente un array alunni con dentro il nome nome e facciamo marco virgola cognome facciamo qwerty ok sono ragazzo già alle pezze con i nomi non java c'è più ricopiamo tre volte giusto per disperazione abbiamo leonardo verdi e poi abbiamo maria gialli quindi come

potete vedere abbiamo un po di abbiamo una buona struttura ne potremmo andare avanti qua dentro potremmo avere gli interessi come hanno fatto per persona qualche video fa possiamo avere materia preferita colore preferito potremmo avere gli orari potremmo letteralmente avere gli orari di questa classe quindi cosa insegniamo proviamo farlo allora potremo avere orari quindi due punti come li strutturiamo facciamo una cosa molto semplice facciamo che tutte le mattine quindi mattina mattina potremmo avere storia pomeriggio abbiamo italiano e geografia ora scusatemi ma non vado alimentari da un pelo e quindi non so come se non mi ricordo

come sono strutturate però avete capito il senso potremmo andare avanti una vita e quindi quando vi parlavo di dati strutturati vi però esattamente di questa cosa questo è un jason ok perfette fin qua ci siamo gailly ho scritto anziché gialli va bene allora abbiamo il nostro jason questa è la struttura potenziale di un jason potrebbe essere piccolo di un solo livello come nome e scuola così come potrebbe avere più livelli così come quando lavorerete più avanti con ep ai saranno di facebook twitter o quello che è vi troverete non una cosa del genere ma un

massacro ve lo posso garantire allora torniamo a noi e vediamo gli array come jason perché noi potremmo avere anziché la classe potremmo avere direttamente classi punto jason ok ma voi capite che classi nel momento in cui e plurale sicuramente è un array quindi noi prendiamo questa cosa qua che abbiamo scritto la buttiamo qua dentro facciamo virgola e abbiamo un'altra classe come potete vedere dalla quarta mettiamo la prima e potremmo andare avanti per tutte le classi della scuola ok quindi la cosa si fa interessante e cominciamo con un array non cominciamo con le quali bracket quindi

cominciamo con un array e non direttamente con un oggetto ho reso l'idea ha senso quindi questa è la singola classe nel caso ci servono solo la classe nel caso invece avesse un bisogno di un insieme diretto di di oggetti tutti uguali partiamo con l'array e fin qua tutto a posto togliamo le classi che non ci servono andiamo a vedere delle piccole note jason è una stringa e ve l'ho già detto che poi venne portata come stringa abbiamo già visto ma solo proprietà e non a metodi ci avete fatto caso a differenza degli oggetti il javascript

che avevamo visto che avevano gli oggetti tipo saluta e cosa deve quindi scusatemi avrà le funzioni avevano dei metodi qua non ce l'abbiamo qua passiamo esclusivamente dei dati non facciamo altro un'altra cosa altre differenze vi faccio vedete qui che usiamo solo double cork per le stringhe non usiamo single coach perché vedete che ci dà errore quindi tutto in double cos è la cosa che avete notato sicuramente anche se vele segno azzurre come se fossero le proprietà in realtà negli oggetti javascript fateci caso noi utilizziamo le virgolette qua invece ce l'ho da errore ok quindi affinché

abbiamo il blu quassù vsc come se fosse una proprietà anche le proprietà devono essere tra virgolette va bene queste sono cose importanti e poi per quanto riguarda i dati e che ho dimenticato boolean possiamo contenere tutti i tipi di dati non è un problema quindi abbiamo andiamo a vedere abbiamo qua una stringa sì abbiamo qua un array sì abbiamo qua un oggetto.si abbiamo dei numeri no facciamo alunni anzi facciamo numero alunni vi faccio vedere che usando attualmente avere un numero sono 21 perfetto possiamo avere un boolean scuola sabato forse non vanno a scuola il sabato

vedete che possiamo avere tutti i tipi di dati che ci servono non è non è un problema e quindi questo è un jason e vedete che noi con questo file abbiamo letteralmente descritto una classe praticamente cioè è veramente così semplice farlo forse complicato all'inizio ma con una buona struttura abbiamo messo tutti i dati di una classe una classe potremo sistemare bene gli orari possiamo sistemare bene altre cose ma fateci caso a tutti gli elementi che potrebbero servire per una classe e se mancano gli aggiungiamo ma ha senso quello che abbiamo scritto perché abbiamo un insieme

di insegnanti con un sottoinsieme che loro volta hanno delle altre proprietà e via discorrendo ora come otteniamo un jason da mettere poi in javascript noi potremmo lavorare direttamente in javascript e fare tipo const james non facciamo così apriamo le nostre virgolette cominciamo a scrivere il jason tuttavia voi vedete che una cosa del genere ci occupa solo 36 rig e quindi serve sifar copia e andiamo qua andiamo scusatemi e andiamo qui voi capite che abbiamo un problema ok se dovessimo fare una cosa del genere avremo un problema scrivere un jason direttamente qua abbiamo il nostro file

esterno e da qua lo importiamo e ci lavoriamo io ve lo posso dire in molti progetti magari mi ricordo avevo un progetto in cui devo fare la lista delle delle province italiane avevo un jason con tutte le province italiane con il capoluogo di provincia la sigla il codice la regione tutte queste cose qui aveva un jason bello lungo credo qualche migliaio di righe lo ha importato e ci ho lavorato da qua come lo importiamo allora c'è un altro modo che vedremo più avanti che sarà il fetch ok ma questa è la nuova sintassi se invece

vogliamo fare con la sintassi classica ed è giusto che la impariate in questo a questo giro andiamo a fare una richiesta url ovvero l'url a cui devo prendere il il file quindi aree questo non è altro che l'url in realtà è il percorso al file se è una cosa che abbiamo noi il locale quindi però si mette uno perché potrebbe essere anche on line da qualche parte in questo caso è classe punto jason sullo stesso livello lo vedete stesso livello col punto virgola classe punto jason è questo non ci non ci possiamo tagliare avremo parlare

quest la request è una nuova xlm http rekuest ok è così non ci potete far niente quindi è new xml http rekuest vela suggerisce un certo punto non abbiate paura andiamo ad aprire questa richiesta la apriamo un nulla mandiamo ancora apriamo la richiesta e diciamo che è una get ok 15 passa direttamente vi ricorda che c'e ragazza e post del avevo accennato che usiamo il metodo get e ovviamente get questo url fin qua tutto a posto diamo il respons type quindi questo oggetto è verificare questo è un oggetto di una abbiamo fatto neo quindi un

nuovo una nuova richiesta di tipo xml http request è creato un nuovo oggetto l'oggetto utilizzano il metodo apri apriamo ci buttiamo dentro dei dati ovvero l'url e il tipo di richiesta dopo di che andiamo a settare il il tipo di risposta in questo caso è un jason perché effettivamente è un jason dopo che facciamo sand questo punto sand quindi metodo sand e noi lo facciamo e siamo in check ora dobbiamo aspettare che ci torno indietro il file rekuest punto onlus un load è l'evento quindi spiegato abbiamo fatto anche gli eventi sull'evento onlus quando viene caricato

quando viene caricata la richiesta mi fai questa funzione anonima direttamente e cosa vai a fare i va aprendo mib è creare una costante classe perché noi stiamo lavorando con una classe che è uguale alla risposta della richiesta andiamo a mandare a schermo classe vi faccio vedere noi né oa prendere e vediamo che qua ci arriva un oggetto ok perché è stato letto la risposta e jason e c'è stato già letto come oggetto è già stato sistemato vedete qua il nome senza le virgolette è già stato passato in modo da lavorarci come se fosse un oggetto

javascript non è più jason qua e jason qua invece da noi è un un oggetto javascript già pronto per essere utilizzato ok una volta che abbiamo questo noi possiamo letteralmente andare a prendere scusatemi tutto quello che ci serve quindi noi vogliamo prendere l'insegnante numero due ok vogliamo prendere il cognome dell'insegnante numero due quindi facciamo classe punto insegnanti insegnanti prendiamo il numero 2 che è l'uno e prendiamo il cognome salviamo rossi vedete se ne andiamo a prendere insegnante 2 cognome insegnante questo è l'uno questo è il 2 cognome rossi avete visto oppure se vogliamo sufficiente prendere

tutto l'insegnante andiamo parliamo l'insegnante così tanto per facciamo insegnante 1 andiamo a vedere vedrete che ci da ludovica rossi quindi quello che abbiamo fatto è creare dei dati strutturati ok qui importanti da ristrutturati che possiamo utilizzare le abbiamo richiesti con questa xml http request le abbiamo trasformati da jason a hope that fa tutto automaticamente questa richiesta abbiamo aspettato la risposta della richiesta abbiamo fatto una funzione anonima e ben detto ok da adesso tutto quello che è qua mela segna una costante in questo ho una variabile potevamo mente arlette non è un problema mi assegni la

risposta quindi questo jason alla classe e la qua possiamo lavorare con la classe senza alcun problema quindi è così che noi creiamo appunto dati strutturati li richiamiamo e ci lavoriamo io vi ringrazio per essere ma sti con me noi ci vediamo nel prossimo episodio e niente in descrizione ci sono solito abbonamenti vetrina amazon gruppo telegram che l'avete gahan quello che volete spero sia tutto chiaro lasciate nei commenti se avete richieste o quant'altro e alla prossima ciao ciao