JSON är ett lätt dataintegrationsformat som huvudsakligen används för att lagra och transportera data från en server eller ett system till ett annat. Å andra sidan lagrar en karta också data och den använder nyckelvärdesformatet där nyckeln kan ha vilken datatyp som helst. Utvecklaren kan hämta specifik data genom att välja motsvarande nyckel.
Den här artikeln förklarar processen för att konvertera JSON till/från en karta i JavaScript genom att täcka följande avsnitt:
- Hur konverterar jag JSON-data till en karta i JavaScript?
- Hur konverterar man JSON-data från en karta i JavaScript?
- Hur man hämtar JSON API och konverterar dess data till karta
Hur konverterar jag JSON-data till en karta i JavaScript?
Konvertering av JSON-data till en karta bevarar nyckel-värde-parformatet som 'Karta' och lagrar även data i nyckel-värde-formen precis som JSON. Så utvecklaren kan behålla den ursprungliga ordningen på nycklarna, vilket inte garanteras med JavaScript-objektkonvertering. Konverterar 'JSON' data in i 'Karta' ger mer flexibilitet och gör att utvecklaren kan använda kartinbyggda metoder för att ge enkelhet när de går över data.
Låt oss besöka kodblocket nedan där JSON hårdkodade data kommer att konverteras till en karta:
< skripttyp = 'text/javascript' >
konst jsonFormat = '{'author1':'Jackson','author2':'Reed','author3':'Tasha','author4':'Petterson'} ' ;
konst mapFormat = ny Karta ( Objekt . poster ( JSON. analysera ( jsonFormat ) ) ) ;
trösta. logga ( mapFormat ) ;
manus >
Förklaringen av ovanstående kod anges som:
- Skapa först en variabel av typen const med namnet 'jsonFormat' som innehåller data i JSON-format, dvs. i nyckel-värde-format.
- Skapa sedan en ny instans av kartan med namnet 'mapFormat' . För att analysera JSON-data skickar du 'mapFormat' inuti 'JSON.parse()' metod.
- Skicka sedan resultatet som returneras av denna metod till 'Object.entries()' för att skapa en array av arrayer och varje inre array representerar nyckel-värdeparen.
- Passera slutresultatet eller alla dessa metoder längs korrekt anpassning inuti 'Karta' konstruktör. Nu, dess exempel 'mapFormat' innehåller den konverterade JSON-datan som visas över konsolfönstret med hjälp av 'console.log()' metod.
Efter kompileringen av ovanstående kod kommer konsolfönstret att se ut så här:
Utdata bekräftar att JSON-data har konverterats till Map. För ytterligare information och exempel för att konvertera JSON-data till en array eller karta kan du besöka vår andra artikel .
Hur konverterar man JSON-data från en karta i JavaScript?
Konvertering av data till JSON-format förbättrar dess livslängdstillgänglighet och gör att du kan skicka dessa data var som helst över nätverket utan att förlora data. Dessutom är JSON-formatet lättläst för människor och kan användas i webb-API eller konfigurationsfiler. I programmet nedan kommer kartdata att konverteras till JSON-formatet:
< skripttyp = 'text/javascript' >konst mapFormat = ny Karta ( [
[ 'författare1' , 'Jackson' ] ,
[ 'författare2' , 'Vass' ] ,
[ 'författare3' , 'Tasha' ] ,
[ 'författare4' , 'Peterson' ] ,
] ) ;
konst jsonFormat = JSON. stränga ( Objekt . från Inlägg ( mapFormat ) ) ;
trösta. logga ( jsonFormat ) ;
manus >
Förklaringen av ovanstående kodblock anges som:
- Först den namngivna instansen 'mapFormat' skapas för kartan som innehåller flera poster.
- Nästa, den 'Object.fromEntries()' metoden används och 'mapFormat' överförs till den. Detta kommer att konvertera den tillhandahållna kartdatan till en kapslad array.
- Sedan skickas den kapslade arrayen till 'JSON.stringify()' metod för att konvertera den kapslade arrayen till JSON-formatet samtidigt som justeringen av nyckel-värdeparet bevaras.
- Till slut visas de genererade JSON-formatdata över konsolfönstret.
Utdata som genereras efter kompileringen av ovanstående kod visas nedan:
Utdata visar att kartdata nu har konverterats till JSON-formatet framgångsrikt.
Hur hämtar jag JSON API och konverterar dess data till karta?
JSON-data som tas emot från API:et kan också konverteras direkt till Map genom att använda samma tillvägagångssätt som beskrivs ovan i det första avsnittet. För att göra detta måste API:et först hämtas och sedan konverteras den hämtade JSON-datan till kartan, som visas nedan:
< manus >asynkron fungera convertJSONApi ( ) {
Prova {
konst res = väntar på hämtning ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
konst jsonFormat = avvakta res. json ( ) ;
konst mapFormat = ny Karta ( Objekt . poster ( jsonFormat ) ) ;
trösta. logga ( mapFormat ) ;
} fånga ( orsakFel ) {
trösta. fel ( 'Fel vid hämtning eller konvertering av data:' , orsakFel ) ;
}
}
convertJSONApi ( ) ;
manus >
Beskrivningen av ovanstående kod anges nedan:
- Först namnges den asynkrona funktionen 'convertJSONApi()' definieras genom att använda nyckelordet 'async' bakom funktionen 'nyckelord' .
- Använd sedan 'Prova' blockera och skapa en 'konst' typ variabel 'res' som kommer att lagra hämtad data från API:et. Hämtningen görs genom att infoga API-länken inuti 'hämta()' metod. Fäst också 'vänta' nyckelordet bakom detta 'hämta()' metod för att vänta på ankomsten av alla API-data.
- Applicera sedan 'json()' metod på variabeln 'res' för att läsa alla mottagna eller hämtade data. De 'vänta' nyckelordet används också bakom det för att vänta på att läsningen av data är klar. Skicka in resultatet i variabeln som heter 'jsonFormat' .
- Efter det har 'jsonFormat' skickas i den angivna metoden 'Object.entries()' för att skapa en kapslad array för tillhandahållen data. Detta skickas sedan inuti 'Karta()' konstruktor för att konvertera arrayerna till Map och lagras i 'Karta' instans namngiven 'mapFormat' .
- Detta hämtade JSON API som nu konverteras till Map visas sedan på konsolen genom att visa 'mapFormat' variabel inuti 'console.log()' metod.
- För att fånga eventuella orsakade fel under hela processen, använd 'fånga' blockera och skicka en dummy-parameter i den som innehåller inträffade fel och för att hantera den visas ett dummy-meddelande.
Utdata efter slutförandet av ovanstående kod visas nedan:
Utdata visar att JSON-formatdata har hämtats från det tillhandahållna API:et och sedan konverteras dessa data till kartan.
Du har lärt dig om processen att konvertera JSON till Map och Map till JSON i JavaScript.
Slutsats
För att konvertera JSON-data till Map, metoder som 'JSON.parse()' och 'Object.entries()' används. Den första parsar JSON-data och den andra skapar en kapslad array av analyserad data. Vid konvertering av kartdata till JSON-format, 'Object.fromEntries()' och 'JSON.stringify()' metoder används som konverterar data till en kapslad array respektive konverterar den till JSON-format. Den här bloggen har förklarat proceduren för att konvertera JSON till och från en karta i JavaScript.