JSON on kevyt tietojen integrointimuoto, jota käytetään pääasiassa tietojen tallentamiseen ja siirtämiseen palvelimelta tai järjestelmältä toiselle. Toisaalta kartta myös tallentaa tietoja ja käyttää avainarvomuotoa, jossa avaimella voi olla mikä tahansa tietotyyppi. Kehittäjä voi hakea tiettyjä tietoja valitsemalla vastaavan avaimen.
Tässä artikkelissa selitetään prosessi, jolla JSON muunnetaan JavaScript-kartaksi/kartalta kattamalla seuraavat osiot:
- Kuinka muuntaa JSON-tiedot kartaksi JavaScriptissä?
- Kuinka muuntaa JSON-tietoja kartasta JavaScriptissä?
- Kuinka hakea JSON API ja muuntaa sen tiedot kartaksi
Kuinka muuntaa JSON-tiedot kartaksi JavaScriptissä?
JSON-tietojen muuntaminen kartaksi säilyttää avain-arvoparimuodon muodossa 'Kartta' ja myös tallentaa tiedot avainarvomuodossa kuten JSON. Joten kehittäjä voi säilyttää alkuperäisen avainten järjestyksen, jota ei taata JavaScript-objektin muuntamisessa. Muunnetaan 'JSON' tiedot sisään 'Kartta' tarjoaa enemmän joustavuutta ja antaa kehittäjälle mahdollisuuden käyttää Mapin sisäänrakennettuja menetelmiä helpottaakseen tietojen liikkumista.
Käydään alla olevassa koodilohkossa, jossa JSON-kovakoodatut tiedot muunnetaan kartaksi:
< skriptityyppi = 'teksti/javascript' >
konst jsonFormat = '{'author1':'Jackson','author2':'Reed','author3':'Tasha','author4':'Petterson'} ' ;
konst karttamuoto = Uusi Kartta ( Esine . merkintöjä ( JSON. jäsentää ( jsonFormat ) ) ) ;
konsoli. Hirsi ( karttamuoto ) ;
käsikirjoitus >
Yllä olevan koodin selitys on seuraava:
- Luo ensin const-tyyppinen muuttuja nimeltä 'jsonFormat' joka sisältää dataa JSON-muodossa eli avainarvomuodossa.
- Luo seuraavaksi kartasta uusi esiintymä nimellä 'MapFormat' . Jäsennä JSON-tiedot antamalla 'MapFormat' sisällä 'JSON.parse()' menetelmä.
- Siirrä sitten tällä menetelmällä palautettu tulos tiedostoon 'Object.entries()' luodaksesi taulukoiden taulukon ja jokainen sisäinen taulukko edustaa avain-arvo-pareja.
- Ohjaa lopputulos tai kaikki nämä menetelmät oikeaan kohdistukseen sisäpuolelle 'Kartta' rakentaja. Nyt sen esimerkki 'MapFormat' sisältää muunnetut JSON-tiedot, jotka näytetään konsoliikkunassa käyttämällä 'console.log()' menetelmä.
Yllä olevan koodin kääntämisen jälkeen konsoli-ikkuna näyttää tältä:
Tulos vahvistaa, että JSON-tiedot on muunnettu kartaksi. Saat lisätietoja ja esimerkkejä JSON-tietojen muuntamisesta taulukoksi tai kartaksi vierailemalla toisella sivullamme artikla .
Kuinka muuntaa JSON-tietoja kartasta JavaScriptissä?
Tietojen muuntaminen JSON-muotoon parantaa sen käyttöikää ja mahdollistaa näiden tietojen lähettämisen minne tahansa verkossa menettämättä tietoja. Lisäksi JSON-muoto on helposti ihmisen luettavissa ja sitä voidaan käyttää verkkosovellusliittymässä tai määritystiedostoissa. Alla olevassa ohjelmassa karttatiedot muunnetaan JSON-muotoon:
< skriptityyppi = 'teksti/javascript' >konst karttamuoto = Uusi Kartta ( [
[ 'kirjoittaja1' , 'Jackson' ] ,
[ 'kirjoittaja2' , 'Reed' ] ,
[ 'kirjoittaja3' , 'Tasha' ] ,
[ 'kirjoittaja4' , 'Peterson' ] ,
] ) ;
konst jsonFormat = JSON. kiristää ( Esine . alkaen Entries ( karttamuoto ) ) ;
konsoli. Hirsi ( jsonFormat ) ;
käsikirjoitus >
Yllä olevan koodilohkon selitys on seuraava:
- Ensinnäkin esiintymä nimeltä 'MapFormat' on luotu useita merkintöjä sisältävälle kartalle.
- Seuraavaksi, 'Object.fromEntries()' menetelmää käytetään ja 'MapFormat' siirretään sille. Tämä muuntaa toimitetut karttatiedot sisäkkäiseksi taulukoksi.
- Sitten sisäkkäinen matriisi välitetään 'JSON.stringify()' menetelmä muuntaa sisäkkäinen taulukko JSON-muotoon säilyttäen samalla avain-arvo-parin kohdistuksen.
- Lopulta luodut JSON-muotoiset tiedot näytetään konsoliikkunassa.
Yllä olevan koodin kääntämisen jälkeen luotu tulos näkyy alla:
Tulos näyttää, että karttatiedot on nyt muutettu JSON-muotoon onnistuneesti.
Kuinka hakea JSON API ja muuntaa sen tiedot kartaksi?
API:lta saadut JSON-tiedot voidaan myös muuntaa suoraan Mapiin käyttämällä samaa menetelmää, joka on kuvattu edellä ensimmäisessä osassa. Tätä varten API on ensin noudettava ja sitten haettu JSON-tiedot muunnetaan kartaksi alla olevan kuvan mukaisesti:
< käsikirjoitus >asynk toiminto convertJSONApi ( ) {
yrittää {
konst res = odottaa noutoa ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
konst jsonFormat = odota res. json ( ) ;
konst karttamuoto = Uusi Kartta ( Esine . merkintöjä ( jsonFormat ) ) ;
konsoli. Hirsi ( karttamuoto ) ;
} ottaa kiinni ( syy Error ) {
konsoli. virhe ( 'Virhe haettaessa tai muunnettaessa tietoja:' , syy Error ) ;
}
}
convertJSONApi ( ) ;
käsikirjoitus >
Yllä olevan koodin kuvaus on alla:
- Ensinnäkin asynkroninen funktio nimeltä 'convertJSONApi()' määritellään käyttämällä funktion takana olevaa avainsanaa 'async'. 'avainsana' .
- Käytä seuraavaksi 'yrittää' lohko ja luo a 'const' tyyppinen muuttuja 'res' joka tallentaa API:sta haetut tiedot. Haku tehdään lisäämällä API-linkki tiedoston sisään 'hae()' menetelmä. Kiinnitä myös 'odottaa' avainsana tämän takana 'hae()' tapa odottaa kaikkien API-tietojen saapumista.
- Käytä sitten 'json()' 'res'-muuttujan menetelmää kaikkien vastaanotettujen tai haettujen tietojen lukemiseksi. The 'odottaa' avainsanaa käytetään myös sen takana odottamaan tietojen lukemisen valmistumista. Välitä tulos muuttujaan nimeltä 'jsonFormat' .
- Sen jälkeen, 'jsonFormat' välitetään nimetyn menetelmän sisällä 'Object.entries()' luodaksesi sisäkkäisen taulukon annetuille tiedoille. Tämä välitetään sitten sisälle 'Kartta()' konstruktori, joka muuntaa taulukot kartaksi ja tallennetaan hakemistoon 'Kartta' instanssi nimetty 'MapFormat' .
- Tämä haettu JSON-sovellusliittymä, joka on nyt muunnettu Mapsiin, näytetään sitten konsolissa näyttämällä 'MapFormat' muuttuja sisällä 'console.log()' menetelmä.
- Voit havaita kaikki aiheutetut virheet koko prosessin aikana käyttämällä 'ottaa kiinni' estää ja välittää siinä valeparametrin, joka sisältää tapahtuneet virheet, ja sen käsittelemiseksi näyttää valeviestin.
Tulos yllä olevan koodin suorittamisen jälkeen näkyy alla:
Tulos näyttää, että JSON-muotoiset tiedot on haettu toimitetusta API:sta ja sitten nämä tiedot muunnetaan kartaksi.
Olet oppinut prosessista, jolla JSON muunnetaan kartaksi ja Map JSONiksi JavaScriptissä.
Johtopäätös
Jos haluat muuntaa JSON-tiedot kartaksi, käytä esim 'JSON.parse()' ja 'Object.entries()' käytetään. Ensimmäinen jäsentää JSON-tiedot ja toinen luo sisäkkäisen taulukon jäsennetyistä tiedoista. Jos karttatiedot muunnetaan JSON-muotoon, 'Object.fromEntries()' ja 'JSON.stringify()' käytetään menetelmiä, jotka muuntavat tiedot sisäkkäisiksi taulukoiksi ja vastaavasti JSON-muotoon. Tässä blogissa on selitetty prosessi, jolla JSON muunnetaan JavaScript-kartaksi ja kartasta.