Maison > Article > interface Web > Conversion JavaScript JSON

Conversion JavaScript JSON

PHPzoriginal: 2023-05-22 09:20:37359parcourir

Tutoriel détaillé sur la conversion en tableaux HTML

Dans le développement front-end, l'utilisation de JavaScript et JSON sont des technologies très courantes. Convertir des données JSON en tableaux HTML pour afficher des données est une fonction très pratique. Cet article explique comment utiliser JavaScript pour convertir des données JSON en tableaux HTML.

Création de données JSON

Tout d'abord, nous devons créer un objet JSON contenant les données. Voici un exemple simple :

var data = [
  {"name": "John", "age": 26, "gender": "Male"},
  {"name": "Lucy", "age": 23, "gender": "Female"},
  {"name": "Tom", "age": 30, "gender": "Male"}
];

Créer la structure de base d'un tableau HTML

Dans le fichier HTML, nous devons créer la structure de base d'un tableau, y compris un en-tête et un corps de tableau. Voici un exemple de structure de table de base :

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Dans cet exemple, nous créons une structure de table de base qui contient un en-tête de table et un corps de table. L'en-tête contient trois colonnes : Nom, Âge et Sexe. Nous ajouterons le contenu du corps du tableau de manière dynamique à l'aide de JavaScript dans les prochaines étapes.

Utilisez JavaScript pour générer dynamiquement le corps du tableau

Ensuite, nous devons utiliser JavaScript pour générer dynamiquement le corps du tableau. Voici un exemple de code :

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];

for (var i = 0; i < data.length; i++) {
  var row = document.createElement("tr");

  var nameCell = document.createElement("td");
  var nameText = document.createTextNode(data[i].name);
  nameCell.appendChild(nameText);
  row.appendChild(nameCell);

  var ageCell = document.createElement("td");
  var ageText = document.createTextNode(data[i].age);
  ageCell.appendChild(ageText);
  row.appendChild(ageCell);

  var genderCell = document.createElement("td");
  var genderText = document.createTextNode(data[i].gender);
  genderCell.appendChild(genderText);
  row.appendChild(genderCell);

  tbody.appendChild(row);
}

Dans cet exemple, nous obtenons d'abord l'élément table via l'identifiant, puis obtenons l'élément corps de la table. Ensuite, nous utilisons une boucle for pour parcourir chaque objet dans les données JSON et ajouter trois cellules de tableau à chaque ligne : nom, âge et sexe. Enfin, nous ajoutons chaque ligne au corps du tableau.

Code complet du fichier HTML

<!DOCTYPE html>
<html>
<head>
  <title>JSON to HTML Table</title>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    var data = [
      {"name": "John", "age": 26, "gender": "Male"},
      {"name": "Lucy", "age": 23, "gender": "Female"},
      {"name": "Tom", "age": 30, "gender": "Male"}
    ];

    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  </script>
</body>
</html>

Fonction étendue : utilisez jQuery AJAX pour obtenir les données JSON

Si les données JSON proviennent d'un service d'arrière-plan, nous pouvons utiliser jQuery AJAX pour obtenir les données JSON. Voici un exemple de code :

$.ajax({
  url: 'your_data_url',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName("tbody")[0];

    for (var i = 0; i < data.length; i++) {
      var row = document.createElement("tr");

      var nameCell = document.createElement("td");
      var nameText = document.createTextNode(data[i].name);
      nameCell.appendChild(nameText);
      row.appendChild(nameCell);

      var ageCell = document.createElement("td");
      var ageText = document.createTextNode(data[i].age);
      ageCell.appendChild(ageText);
      row.appendChild(ageCell);

      var genderCell = document.createElement("td");
      var genderText = document.createTextNode(data[i].gender);
      genderCell.appendChild(genderText);
      row.appendChild(genderCell);

      tbody.appendChild(row);
    }
  }
});

Dans cet exemple, nous utilisons la méthode ajax de jQuery pour obtenir les données. Nous obtiendrons les données à partir de l'URL de données que vous avez fournie et le type de données est au format JSON. Une fois que nous avons réussi à obtenir les données, nous utilisons le code précédent pour les convertir en tableau HTML.

Conclusion

Dans cet article, nous avons appris à utiliser JavaScript et JSON pour afficher des données dans des tableaux HTML. Il s'agit d'une compétence très importante pour les développeurs front-end qui ont besoin d'afficher des données. J'espère qu'à travers l'introduction de cet article, vous avez compris comment implémenter cette fonction et pourrez l'appliquer dans vos propres projets.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：boîte de sélection multiple javascript pour en sélectionner plusieursArticle suivant：boîte de sélection multiple javascript pour en sélectionner plusieurs

Articles Liés

Voir plus