js怎么将json数据展示在HTML

在JavaScript中,将JSON数据展示在HTML中是一种常见的操作，这个过程主要分为两步：获取JSON数据；将数据动态地插入到HTML文档中，下面，我将详细地介绍如何实现这一过程。

获取JSON数据

获取JSON数据的方式有很多种,例如通过Ajax请求、fetch API等，这里以fetch API为例，演示如何获取JSON数据。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 在这里处理获取到的JSON数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

将JSON数据插入HTML

获取到JSON数据后,我们需要将其展示在HTML中，以下是将数据插入HTML的几种常见方法：

使用 innerHTML

这是一种简单直接的方法,通过拼接字符串的方式将数据插入到指定的HTML元素中。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    let html = '';
    data.forEach(item => {
      html += `<li>${item.name} - ${item.age}</li>`;
    });
    document.getElementById('list').innerHTML = html;
  });

在HTML中,你需要一个列表元素来展示数据：

<ul id="list"></ul>

使用 Document.createElement()

相比于innerHTML,这种方法更加灵活，可以创建新的元素并将其插入到文档中。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const list = document.getElementById('list');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.textContent = `${item.name} - ${item.age}`;
      list.appendChild(listItem);
    });
  });

使用模板字符串

如果你使用的是现代浏览器,可以利用模板字符串简化代码。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const list = document.getElementById('list');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerHTML = `<strong>${item.name}</strong> - ${item.age}`;
      list.appendChild(listItem);
    });
  });

高级用法：使用模板引擎

如果你处理的数据比较复杂,或者需要将数据展示在不同的HTML结构中，可以考虑使用模板引擎，以下是一个简单的例子，使用Handlebars.js模板引擎。

安装Handlebars：

js怎么将json数据展示在HTML

npm install handlebars

编写模板：

<script id="template" type="text/x-handlebars-template">
  <li><strong>{{name}}</strong> - {{age}}</li>
</script>

在JavaScript中,使用Handlebars编译模板并插入数据：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const source = document.getElementById('template').innerHTML;
    const template = Handlebars.compile(source);
    const html = data.map(item => template(item)).join('');
    document.getElementById('list').innerHTML = html;
  });