Travailler avec des données JSON dans un environnement HTML

J'ai récemment commencé à utiliser JSON dans mes projets de développement Web et j'ai rencontré un problème intéressant en essayant de l'intégrer au HTML à l'aide de JavaScript. Plus précisément, j'ai utilisé la fonction fetch pour récupérer les données JSON, ce qui a très bien fonctionné pour enregistrer les données dans la console. Cependant, j'ai rencontré quelques difficultés en essayant d'afficher ces données dans un champ de saisie HTML. Au lieu d'afficher les données réelles, il affichait « non défini » ou « [objet Objet] ». Je soupçonne que cela est dû à un comportement asynchrone, et j'ai lu que l'utilisation de async/await pourrait résoudre ce problème. Cependant, cela a conduit à une erreur liée à la version 8 d'ES, qui a été difficile à résoudre car la plupart des ressources sont orientées vers des projets plus complexes. Vous trouverez ci-dessous le code avec lequel je travaille actuellement :

Fichier CSS (json_example.css)

css

#jsonInput {
poste : fixe ;
haut : 50% ;
gauche : 50%;
transformer : traduire(-50%, -50%);
largeur : 400 px ;
hauteur : 30px ;
taille de police : 16 px ;
remplissage : 5 px ;
>
Fichier JavaScript (json_example.js)

javascript

`document.addEventListener("DOMContentLoaded", function() {
const jsonUrl = 'http://localhost:8080/data/person.json';

fetch(jsonUrl)
    .then(response => response.json())
    .then(data => {
        console.log(data);
        document.getElementById("jsonInput").value = JSON.stringify(data);
    })
    .catch(error => console.error('Error fetching JSON:', error));

});
Fichier JSON (personne.json)

json

{
"firstName": "Jane",
"lastName": "Biche",
"âge": 25,
"ville": "Los Angeles"
}`

Le code récupère les données JSON et les affiche dans la console sans aucun problème. Cependant, lorsque vous tentez d'insérer ces données dans un champ de saisie de texte HTML, cela entraîne soit une valeur « non définie », soit l'affichage de « [object Object] » plutôt que le contenu JSON souhaité. Utiliser async/await pour gérer la nature asynchrone de la récupération peut aider, mais cela entraîne des problèmes de compatibilité avec ES version 8.

Comment puis-je afficher correctement les données JSON dans un élément HTML comme un champ de saisie de texte ?
Quelles sont les meilleures pratiques pour gérer les opérations asynchrones lorsque vous travaillez avec JSON dans un projet Web de base ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!