2
votes

Affichage de la valeur de la clé d'objet JSON dans le champ de texte HTML

Alors disons maintenant, j'ai reçu un objet JSON:

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Document</title>
</head>
<body>
  <label>Name</label>
  <input type = "text" id = "name" disabled>
  <label>Address of Residence</label>
  <input type = "text" id = "address" disabled>
  <label>Country of Origin</label>
  <input type = "text" id = "country" disabled>
  <script src = "test.js"></script>
  </body>
</body>
</html>

et je souhaite afficher chaque valeur de clé sur les champs de texte de ma page HTML comme ci-dessous:

J'ai réussi à le faire en:

var myDetails = {
    RecipientName: "Jake",
    Address: "51 Lake District",
    CountryName: "United States"
}

var output_display = [
    ["name", "RecipientName"],
    ["address", "Address"],
    ["country", "CountryName"]
];

for (i=0;i<output_display.length;i++) {
    document.getElementById(output_display[i][0]).value = myDetails[output_display[i][1]]
}

var myDetails = {
    RecipientName: "Jake",
    Address: "51 Lake District",
    CountryName: "United States"
}

Cependant, une chose sur laquelle j'ai des doutes est d'avoir à introduire la variable "output_display" en Javascript qui codifie quelque peu l'ID du champ de texte HTML avec la valeur de la clé de l'objet JSON . Existe-t-il une manière plus élégante et efficace de procéder?

Éditer

Je pourrais rendre l'identifiant des champs de texte identique à la clé du JSON, mais n'est-ce pas une mauvaise pratique d'inclure des majuscules dans la dénomination des identifiants?

javascript html

4 commentaires

Un "objet JSON" n'existe pas

Si vous nommez vos entrées pour correspondre aux clés de l'objet, vous pouvez simplement parcourir Object.entries() ou Object.keys()

@pilchard Je pourrais renommer l'identifiant pour qu'il corresponde aux clés, mais j'ai lu que ce n'est pas une bonne pratique d'avoir des lettres majuscules pour les identifiants?

Si vous voulez les garder en minuscules, vous pouvez .toLowerCase() la clé dans l'appel .getElementById() . Object.entries(myDetails).forEach(([key, value]) => document.getElementById(key.toLowerCase()).value = value); et des identifiants comme id="recipientname"

3 Réponses :

0
votes

Vous pouvez utiliser Object.keys pour obtenir toutes les clés sous forme de tableau.

var myDetails = {
    RecipientName: "Jake",
    Address: "51 Lake District",
    CountryName: "United States"
}
const keys = Object.keys(myDetails);

keys seront ['RecipientName', 'Address', 'CountryName'] .

0 commentaires

0
votes

Vous pouvez ignorer l'utilisation de output_display .

utilisez simplement les clés d'objet car ce code sera plus propre

  <label>Name</label>
  <input type="text" id="RecipientName" disabled><br>
  <label>Address of Residence</label>
  <input type="text" id="Address" disabled><br>
  <label>Country of Origin</label>
  <input type="text" id="CountryName" disabled><br>

var myDetails = {
    RecipientName: "Jake",
    Address: "51 Lake District",
    CountryName: "United States"
}

for (const [key, value] of Object.entries(myDetails)) {
  console.log(`${key}: ${value}`);
   document.getElementById(key).value = value
}

0 commentaires

0
votes

Vous pouvez les écrire au lieu de la boucle for.

document.getElementById('name').value=myDetails.RecipientName
document.getElementById('adress').value=myDetails.Address
document.getElementById('country').value=myDetails.CountryName

0 commentaires