El JSON és un format d'integració de dades lleuger que s'utilitza principalment per emmagatzemar i transportar dades d'un servidor o sistema a un altre. D'altra banda, un mapa també emmagatzema dades i utilitza el format de valor de clau on la clau pot tenir qualsevol tipus de dades. El desenvolupador pot recuperar dades específiques seleccionant la seva clau corresponent.
Aquest article explica el procés per convertir JSON a/des d'un mapa en JavaScript cobrint les seccions següents:
- Com convertir dades JSON en un mapa en JavaScript?
- Com convertir dades JSON d'un mapa en JavaScript?
- Com obtenir l'API JSON i convertir les seves dades en un mapa
Com convertir dades JSON en un mapa en JavaScript?
La conversió de dades JSON en un mapa conserva el format de parella clau-valor com a 'Mapa' i també emmagatzema dades en forma de valor-clau igual que JSON. Per tant, el desenvolupador pot mantenir l'ordre original de les claus que no està garantit amb la conversió d'objectes JavaScript. Convertint 'JSON' dades a 'Mapa' ofereix més flexibilitat i permet al desenvolupador utilitzar els mètodes integrats de Map per facilitar la navegació per les dades.
Visitem el bloc de codi següent on les dades codificades en dur JSON es convertiran en un mapa:
< tipus de guió = 'text/javascript' >
const jsonFormat = '{'author1':'Jackson','author2':'Reed','author3':'Tasha','author4':'Petterson'} ' ;
const mapFormat = nou Mapa ( Objecte . entrades ( JSON. analitzar ( jsonFormat ) ) ) ;
consola. registre ( mapFormat ) ;
guió >
L'explicació del codi anterior s'indica com:
- Primer, creeu una variable de tipus const anomenada 'jsonFormat' que continguin dades en format JSON, és a dir, en format clau-valor.
- A continuació, creeu una nova instància del mapa amb el nom 'mapFormat' . Per analitzar les dades JSON, passa el fitxer 'mapFormat' dins del 'JSON.parse()' mètode.
- A continuació, passeu el resultat retornat per aquest mètode al fitxer 'Object.entries()' per crear una matriu de matrius i cada matriu interior representa els parells clau-valor.
- Passeu el resultat final o tots aquests mètodes al llarg de l'alineació adequada dins del 'Mapa' constructor. Ara, la seva instància 'mapFormat' conté les dades JSON convertides que es mostren a la finestra de la consola mitjançant l' 'console.log()' mètode.
Després de la compilació del codi anterior, la finestra de la consola es veurà així:
La sortida confirma que les dades JSON s'han convertit a Map. Per obtenir més informació i exemples per convertir dades JSON en una matriu o un mapa, podeu visitar el nostre altre article .
Com convertir dades JSON d'un mapa en JavaScript?
La conversió de dades al format JSON millora la seva disponibilitat durant tota la vida i us permet enviar aquestes dades a qualsevol lloc de la xarxa sense perdre dades. A més, el format JSON és fàcilment llegible per l'home i es pot utilitzar en API web o fitxers de configuració. Al programa següent, les dades del mapa es convertiran al format JSON:
< tipus de guió = 'text/javascript' >const mapFormat = nou Mapa ( [
[ 'autor1' , 'Jackson' ] ,
[ 'autor2' , 'Canya' ] ,
[ 'autor3' , 'Tasha' ] ,
[ 'autor4' , 'Peterson' ] ,
] ) ;
const jsonFormat = JSON. stringir ( Objecte . des d'Entrades ( mapFormat ) ) ;
consola. registre ( jsonFormat ) ;
guió >
L'explicació del bloc de codi anterior s'indica com:
- En primer lloc, la instància anomenada 'mapFormat' es crea per al mapa que conté diverses entrades.
- A continuació, el 'Object.fromEntries()' s'utilitza el mètode i el 'mapFormat' se li passa. Això convertirà les dades del mapa proporcionades en una matriu imbricada.
- Aleshores, la matriu imbricada es passa a 'JSON.stringify()' mètode per convertir la matriu imbricada al format JSON tot conservant l'alineació del parell clau-valor.
- Al final, les dades en format JSON generades es mostren a la finestra de la consola.
La sortida generada després de la compilació del codi anterior es mostra a continuació:
La sortida mostra que les dades del mapa ara s'han convertit correctament al format JSON.
Com obtenir l'API JSON i convertir les seves dades en un mapa?
Les dades JSON rebudes de l'API també es poden convertir directament a Map utilitzant el mateix enfocament descrit anteriorment a la primera secció. Per fer-ho, primer s'ha d'obtenir l'API i després les dades JSON obtingudes es converteixen al mapa, tal com es mostra a continuació:
< guió >asíncron funció convertirJSONApi ( ) {
provar {
const res = esperar a buscar ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
const jsonFormat = esperar res. json ( ) ;
const mapFormat = nou Mapa ( Objecte . entrades ( jsonFormat ) ) ;
consola. registre ( mapFormat ) ;
} agafar ( causaError ) {
consola. error ( 'S'ha produït un error en obtenir o convertir les dades:' , causaError ) ;
}
}
convertirJSONApi ( ) ;
guió >
La descripció del codi anterior s'indica a continuació:
- Primer, la funció asíncrona anomenada 'convertJSONApi()' es defineix utilitzant la paraula clau 'async' darrere de la funció 'paraula clau' .
- A continuació, utilitzeu el 'provar' bloquejar i crear un 'const' variable de tipus 'res' que emmagatzemarà les dades obtingudes de l'API. L'obtenció es fa inserint l'enllaç API dins del fitxer 'fer ()' mètode. També adjunteu el 'esperar' paraula clau darrere d'això 'fer ()' mètode per esperar l'arribada de totes les dades de l'API.
- A continuació, apliqueu el 'json()' mètode a la variable 'res' per llegir totes les dades rebudes o obtingudes. El 'esperar' També s'aplica la paraula clau darrere per esperar que finalitzi la lectura de les dades. Passeu el resultat a la variable anomenada 'jsonFormat' .
- Després d'això, el 'jsonFormat' es passa dins del mètode anomenat 'Object.entries()' per crear una matriu imbricada per a les dades proporcionades. A continuació, es passa dins del 'Mapa ()' constructor per convertir les matrius en Map i s'emmagatzema al fitxer 'Mapa' instància anomenada 'mapFormat' .
- Aquesta API JSON obtinguda que ara es converteix a Map es mostra a la consola mostrant el 'mapFormat' variable dins del 'console.log()' mètode.
- Per detectar qualsevol error causat durant tot el procés, utilitzeu 'atrapar' bloquejar i passar-hi un paràmetre fictici que contingui errors ocorreguts i per gestionar-lo es mostra un missatge fictici.
La sortida després de completar el codi anterior es mostra a continuació:
La sortida mostra que les dades en format JSON s'han recuperat de l'API proporcionada i després aquestes dades es converteixen al mapa.
Heu après el procés per convertir JSON a Map i Map a JSON en JavaScript.
Conclusió
Per convertir dades JSON a Map, mètodes com ara 'JSON.parse()' i 'Object.entries()' s'utilitzen. El primer analitza les dades JSON i el segon crea una matriu imbricada de dades analitzades. En el cas de convertir les dades del mapa a format JSON, el 'Object.fromEntries()' i 'JSON.stringify()' s'utilitzen mètodes que convertiran les dades en una matriu imbricada i les convertiran en format JSON respectivament. Aquest bloc ha explicat el procediment per convertir JSON a i des d'un mapa en JavaScript.