JSON er et letvægts dataintegrationsformat, der hovedsageligt bruges til at lagre og transportere data fra en server eller et system til et andet. På den anden side gemmer et kort også data, og det bruger nøgleværdiformatet, hvor nøglen kan have enhver datatype. Udvikleren kan hente specifikke data ved at vælge dens tilsvarende nøgle.
Denne artikel forklarer processen til at konvertere JSON til/fra et kort i JavaScript ved at dække følgende sektioner:
- Sådan konverteres JSON-data til et kort i JavaScript?
- Sådan konverteres JSON-data fra et kort i JavaScript?
- Sådan henter du JSON API og konverterer dens data til kort
Sådan konverteres JSON-data til et kort i JavaScript?
Konvertering af JSON-data til et kort bevarer nøgleværdi-parformatet som 'Kort' og gemmer også data i nøgleværdi-formen ligesom JSON. Så udvikleren kan opretholde den oprindelige rækkefølge af nøglerne, hvilket ikke er garanteret med JavaScript-objektkonvertering. Konvertering 'JSON' data ind 'Kort' tilbyder mere fleksibilitet og giver udvikleren mulighed for at bruge Maps indbyggede metoder for at give lethed, mens de krydser dataene.
Lad os besøge nedenstående kodeblok, hvor JSON-hardkodede data vil blive konverteret til et kort:
< script type = 'tekst/javascript' >
konst jsonFormat = '{'author1':'Jackson','author2':'Reed','author3':'Tasha','author4':'Petterson'} ' ;
konst mapFormat = ny Kort ( Objekt . poster ( JSON. parse ( jsonFormat ) ) ) ;
konsol. log ( mapFormat ) ;
manuskript >
Forklaringen af ovenstående kode er angivet som:
- Først skal du oprette en const type variabel med navnet 'jsonFormat' indeholdende data i JSON-format, dvs. i nøgleværdi-formatet.
- Opret derefter en ny forekomst af kortet med navnet 'kortformat' . For at parse JSON-dataene skal du videregive 'kortformat' inde i 'JSON.parse()' metode.
- Send derefter resultatet returneret af denne metode til 'Object.entries()' for at skabe et array af arrays, og hvert indre array repræsenterer nøgleværdi-parrene.
- Send slutresultatet eller alle disse metoder langs korrekt justering inde i 'Kort' konstruktør. Nu, dets eksempel 'kortformat' indeholder de konverterede JSON-data, som bliver vist over konsolvinduet ved hjælp af 'console.log()' metode.
Efter kompileringen af ovenstående kode vil konsolvinduet se sådan ud:
Outputtet bekræfter, at JSON-dataene er blevet konverteret til Map. For yderligere information og eksempler på at konvertere JSON-data til et array eller kort, kan du besøge vores andet artikel .
Sådan konverteres JSON-data fra et kort i JavaScript?
Konvertering af data til JSON-format forbedrer deres levetids tilgængelighed og giver dig mulighed for at sende disse data overalt over netværket uden at miste data. Desuden er JSON-formatet let læseligt for mennesker og kan bruges i web-API eller konfigurationsfiler. I nedenstående program vil kortdataene blive konverteret til JSON-formatet:
< script type = 'tekst/javascript' >konst mapFormat = ny Kort ( [
[ 'forfatter1' , 'Jackson' ] ,
[ 'forfatter2' , 'Siv' ] ,
[ 'forfatter3' , 'Tasha' ] ,
[ 'forfatter4' , 'Peterson' ] ,
] ) ;
konst jsonFormat = JSON. stringify ( Objekt . fra Indgange ( mapFormat ) ) ;
konsol. log ( jsonFormat ) ;
manuskript >
Forklaringen af ovenstående kodeblok er angivet som:
- Først den nævnte instans 'kortformat' oprettes til kortet, der indeholder flere poster.
- Dernæst 'Object.fromEntries()' metoden anvendes og 'kortformat' er overført til den. Dette vil konvertere de angivne kortdata til et indlejret array.
- Derefter sendes det indlejrede array til 'JSON.stringify()' metode til at konvertere det indlejrede array til JSON-formatet, mens justeringen af nøgleværdi-parret bevares.
- I sidste ende bliver de genererede JSON-formatdata vist over konsolvinduet.
Output genereret efter kompileringen af ovenstående kode er vist nedenfor:
Outputtet viser, at kortdataene nu er konverteret til JSON-formatet.
Hvordan henter jeg JSON API og konverterer dens data til kort?
JSON-data modtaget fra API'et kan også konverteres direkte til Map ved at bruge den samme fremgangsmåde som beskrevet ovenfor i det første afsnit. For at gøre dette skal API'en først hentes, derefter bliver de hentede JSON-data konverteret til kortet, som vist nedenfor:
< manuskript >asynkron fungere konverterJSONApi ( ) {
prøve {
konst res = afventer hentning ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
konst jsonFormat = afvent res. json ( ) ;
konst mapFormat = ny Kort ( Objekt . poster ( jsonFormat ) ) ;
konsol. log ( mapFormat ) ;
} fangst ( årsagFejl ) {
konsol. fejl ( 'Fejl ved hentning eller konvertering af data:' , årsagFejl ) ;
}
}
konverterJSONApi ( ) ;
manuskript >
Beskrivelsen af ovenstående kode er angivet nedenfor:
- Først den asynkrone funktion navngivet 'convertJSONApi()' defineres ved at bruge nøgleordet 'async' bag funktionen 'søgeord' .
- Brug derefter 'prøve' blokere og oprette en 'konst' type variabel 'res' som vil gemme de hentede data fra API'en. Hentningen sker ved at indsætte API-linket i 'hent()' metode. Vedhæft også 'vente' nøgleordet bag dette 'hent()' metode til at vente på ankomsten af alle API-data.
- Anvend derefter 'json()' metode på 'res'-variablen for at læse alle modtagne eller hentede data. Det 'vente' nøgleord er også anvendt bag det for at vente på færdiggørelsen af læsningen af dataene. Send resultatet i den navngivne variabel 'jsonFormat' .
- Herefter er 'jsonFormat' sendes inde i den navngivne metode 'Object.entries()' for at oprette et indlejret array for leverede data. Dette sendes derefter inde i 'Kort()' konstruktør til at konvertere arrays til Map og bliver gemt i 'Kort' instans navngivet 'kortformat' .
- Denne hentede JSON API, som nu er konverteret til Map, vises derefter på konsollen ved at vise 'kortformat' variabel inde i 'console.log()' metode.
- For at fange enhver forårsaget fejl under hele processen, skal du bruge 'fangst' blokere og sende en dummy-parameter i den, der indeholder opståede fejl, og for at håndtere den viser en dummy-meddelelse.
Outputtet efter færdiggørelsen af ovenstående kode er vist nedenfor:
Outputtet viser, at JSON-formatdataene er blevet hentet fra den medfølgende API, og disse data konverteres derefter til kortet.
Du har lært om processen til at konvertere JSON til Map og Map til JSON i JavaScript.
Konklusion
For at konvertere JSON-data til Map, metoder som 'JSON.parse()' og 'Object.entries()' er brugt. Den første parser JSON-dataene, og den anden opretter en indlejret matrix af parsede data. I tilfælde af konvertering af kortdata til JSON-format 'Object.fromEntries()' og 'JSON.stringify()' Der bruges metoder, der konverterer data til et indlejret array og konverterer det til henholdsvis JSON-format. Denne blog har forklaret proceduren til at konvertere JSON til og fra et kort i JavaScript.