Home >Web Front-end >Front-end Q&A >JavaScript json conversion

JavaScript json conversion

PHPzOriginal: 2023-05-22 09:20:37466browse

Detailed tutorial on converting into HTML tables

In front-end development, using JavaScript and JSON are very common technologies. Converting JSON data into HTML tables to display data is a very practical function. This article will introduce how to use JavaScript to convert JSON data into HTML tables.

Create JSON data

First, we need to create a JSON object containing the data. The following is a simple example:

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

Create the basic structure of an HTML table

In the HTML file, we need to create the basic structure of a table, including the header and Form body. The following is an example of a basic table structure:

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

In this example, we create a basic table structure that contains a table header and a table body. The header contains three columns: Name, Age and Gender. We will add the content of the table body dynamically using JavaScript in the next steps.

Use JavaScript to dynamically generate the table body

Next, we need to use JavaScript to dynamically generate the table body. The following is a code example:

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);
}

In this example, we first get the table element through the id, and then get the table body element. Next, we use a for loop to loop through each object in the JSON data and add three table cells to each row: name, age, and gender. Finally, we add each row to the table body.

Complete HTML file code

<!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>

Extended function: use jQuery AJAX to get JSON data

If the JSON data comes from the background service, we can use jQuery AJAX to get JSON data. The following is a sample 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);
    }
  }
});

In this example, we use jQuery's ajax method to get the data. We will get the data from the data url you provided, and the data type is JSON format. Once we successfully get the data, we use the previous code to convert it into an HTML table.

Conclusion

In this article, we learned how to use JavaScript and JSON to display data into HTML tables. This is a very important skill for front-end developers who need to display data. I hope that through the introduction of this article, you have understood how to implement this function and can apply it in your own projects.

The above is the detailed content of JavaScript json conversion. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript multi-select box to select severalNext article：javascript multi-select box to select several

See more

JavaScript json conversion

Related articles