Le JSON est un format d'intégration de données léger qui est principalement utilisé pour stocker et transporter des données d'un serveur ou d'un système à un autre. D'un autre côté, une carte stocke également des données et utilise le format clé-valeur où la clé peut avoir n'importe quel type de données. Le développeur peut récupérer des données spécifiques en sélectionnant la clé correspondante.
Cet article explique le processus de conversion de JSON vers/depuis une carte en JavaScript en couvrant les sections suivantes :
- Comment convertir des données JSON en une carte en JavaScript ?
- Comment convertir des données JSON à partir d'une carte en JavaScript ?
- Comment récupérer l'API JSON et convertir ses données en carte
Comment convertir des données JSON en une carte en JavaScript ?
La conversion des données JSON en une carte préserve le format de paire clé-valeur tel que 'Carte' et stocke également les données sous la forme clé-valeur, tout comme JSON. Ainsi, le développeur peut conserver l'ordre d'origine des clés, ce qui n'est pas garanti avec la conversion d'objets JavaScript. Conversion 'JSON' données dans 'Carte' offre plus de flexibilité et permet au développeur d'utiliser les méthodes intégrées de Map pour faciliter la navigation dans les données.
Visitons le bloc de code ci-dessous où les données codées en dur JSON vont être converties en une carte :
< type de script = 'texte/javascript' >
const jsonFormat = '{'author1': 'Jackson', 'author2': 'Reed', 'author3': 'Tasha', 'author4': 'Petterson'} ' ;
const formatcarte = nouveau Carte ( Objet . entrées ( JSON. analyser ( jsonFormat ) ) ) ;
console. enregistrer ( formatcarte ) ;
scénario >
L'explication du code ci-dessus est la suivante :
- Tout d’abord, créez une variable de type const nommée 'jsonFormat' contenant des données au format JSON, c'est-à-dire au format clé-valeur.
- Ensuite, créez une nouvelle instance de la carte avec le nom « format carte » . Pour analyser les données JSON, transmettez le « format carte » à l'intérieur de 'JSON.parse()' méthode.
- Ensuite, transmettez le résultat renvoyé par cette méthode dans le 'Objet.entrées()' pour créer un tableau de tableaux et chaque tableau interne représente les paires clé-valeur.
- Transmettez le résultat final ou toutes ces méthodes selon un alignement approprié à l'intérieur du 'Carte' constructeur. Maintenant, son exemple « format carte » contient les données JSON converties qui sont affichées sur la fenêtre de la console à l'aide du 'console.log()' méthode.
Après la compilation du code ci-dessus, la fenêtre de la console ressemblera à ceci :
La sortie confirme que les données JSON ont été converties en Map. Pour plus d'informations et des exemples pour convertir des données JSON en tableau ou en carte, vous pouvez visiter notre autre article .
Comment convertir des données JSON à partir d'une carte en JavaScript ?
La conversion des données au format JSON améliore leur disponibilité à vie et vous permet d'envoyer ces données n'importe où sur le réseau sans perdre de données. De plus, le format JSON est facilement lisible par l'homme et peut être utilisé dans l'API Web ou dans les fichiers de configuration. Dans le programme ci-dessous, les données cartographiques vont être converties au format JSON :
< type de script = 'texte/javascript' >const formatcarte = nouveau Carte ( [
[ 'auteur1' , 'Jackson' ] ,
[ 'auteur2' , 'Roseau' ] ,
[ 'auteur3' , 'Tacha' ] ,
[ 'auteur4' , 'Peterson' ] ,
] ) ;
const jsonFormat = JSON. stringifier ( Objet . fromEntries ( formatcarte ) ) ;
console. enregistrer ( jsonFormat ) ;
scénario >
L'explication du bloc de code ci-dessus est la suivante :
- Tout d'abord, l'instance nommée « format carte » est créé pour la carte qui contient plusieurs entrées.
- Ensuite, le “Object.fromEntries()” méthode est utilisée et le « format carte » lui est transmis. Cela convertira les données cartographiques fournies en un tableau imbriqué.
- Ensuite, le tableau imbriqué est transmis au 'JSON.stringify()' méthode pour convertir le tableau imbriqué au format JSON tout en préservant l’alignement de la paire clé-valeur.
- En fin de compte, les données générées au format JSON sont affichées sur la fenêtre de la console.
La sortie générée après la compilation du code ci-dessus est présentée ci-dessous :
Le résultat montre que les données cartographiques sont désormais converties avec succès au format JSON.
Comment récupérer l'API JSON et convertir ses données en carte ?
Les données JSON reçues de l'API peuvent également être directement converties en Map en utilisant la même approche décrite ci-dessus dans la première section. Pour ce faire, l'API doit d'abord être récupérée, puis les données JSON récupérées sont converties en carte, comme indiqué ci-dessous :
< scénario >asynchrone fonction convertirJSONApi ( ) {
essayer {
const rés = attendre la récupération ( 'https://jsonplaceholder.typicode.com/todos/' ) ;
const jsonFormat = attendre la résolution. json ( ) ;
const formatcarte = nouveau Carte ( Objet . entrées ( jsonFormat ) ) ;
console. enregistrer ( formatcarte ) ;
} attraper ( causeErreur ) {
console. erreur ( « Erreur lors de la récupération ou de la conversion des données : » , causeErreur ) ;
}
}
convertirJSONApi ( ) ;
scénario >
La description du code ci-dessus est indiquée ci-dessous :
- Tout d'abord, la fonction asynchrone nommée « convertirJSONApi() » est défini en utilisant le mot-clé « async » derrière la fonction 'mot-clé' .
- Ensuite, utilisez le 'essayer' bloquer et créer un 'const' type de variable 'rés' qui stockera les données récupérées de l'API. La récupération se fait en insérant le lien API à l'intérieur du 'aller chercher()' méthode. Attachez également le 'attendre' mot-clé derrière cela 'aller chercher()' méthode pour attendre l’arrivée de toutes les données API.
- Ensuite, appliquez le 'json()' méthode sur la variable « res » pour lire toutes les données reçues ou récupérées. Le 'attendre' un mot-clé est également appliqué derrière pour attendre la fin de la lecture des données. Passez le résultat dans la variable nommée 'jsonFormat' .
- Après cela, le 'jsonFormat' est passé à l'intérieur de la méthode nommée 'Objet.entrées()' pour créer un tableau imbriqué pour les données fournies. Ceci est ensuite transmis à l'intérieur du 'Carte()' constructeur pour convertir les tableaux en Map et est stocké dans le 'Carte' instance nommée « format carte » .
- Cette API JSON récupérée qui est maintenant convertie en Map est ensuite affichée sur la console en affichant le « format carte » variable à l'intérieur du 'console.log()' méthode.
- Pour détecter toute erreur provoquée pendant tout le processus, utilisez le 'attraper' bloquer et transmettre un paramètre factice qui contient des erreurs survenues et pour le gérer, affiche un message factice.
Le résultat après l'achèvement du code ci-dessus est présenté ci-dessous :
La sortie montre que les données au format JSON ont été récupérées à partir de l'API fournie, puis ces données sont converties en carte.
Vous avez découvert le processus de conversion de JSON en Map et de Map en JSON en JavaScript.
Conclusion
Pour convertir des données JSON en Map, des méthodes telles que 'JSON.parse()' et 'Objet.entrées()' sont utilisés. Le premier analyse les données JSON et le second crée un tableau imbriqué de données analysées. Dans le cas de la conversion des données cartographiques au format JSON, le “Object.fromEntries()” et 'JSON.stringify()' des méthodes sont utilisées pour convertir les données en un tableau imbriqué et les convertir respectivement au format JSON. Ce blog a expliqué la procédure pour convertir JSON vers et depuis une carte en JavaScript.