js不用数据库怎么把数据呈现出来

一、核心观点

使用JSON文件、利用本地存储、通过API获取数据。其中，使用JSON文件是一个简单且常见的方法，可以将数据保存在一个JSON文件中，然后通过JavaScript读取并解析该文件，从而在网页上呈现数据。

使用JSON文件的方法不仅简单易懂，而且非常适合初学者。你只需要创建一个包含数据的JSON文件，然后在JavaScript代码中使用fetch或XMLHttpRequest来读取文件内容。解析JSON数据后，你可以将其动态地展示在HTML页面上。

二、使用JSON文件

1、创建JSON文件

首先，你需要创建一个包含数据的JSON文件。例如，创建一个名为data.json的文件，内容如下：

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "johndoe@example.com"
  },
  {
    "id": 2,
    "name": "Jane Smith",
    "email": "janesmith@example.com"
  }
]

2、使用JavaScript读取JSON文件

接下来，使用JavaScript读取并解析JSON文件。你可以使用fetch API来完成这个任务：

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 在这里处理数据并将其展示在网页上
    let output = '';
    data.forEach(item => {
      output += `<p>ID: ${item.id}, Name: ${item.name}, Email: ${item.email}</p>`;
    });
    document.getElementById('data-container').innerHTML = output;
  })
  .catch(error => console.error('Error:', error));

在HTML文件中创建一个用于展示数据的容器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Data</title>
</head>
<body>
  <div id="data-container"></div>
  <script src="script.js"></script>
</body>
</html>

三、利用本地存储

1、存储数据

你可以使用浏览器的localStorage或sessionStorage来存储数据。这些方法允许你在客户端存储键值对。以下是一个使用localStorage的例子：

const data = [
  {
    id: 1,
    name: "John Doe",
    email: "johndoe@example.com"
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "janesmith@example.com"
  }
];
// 将数据转换为字符串并存储在localStorage中
localStorage.setItem('userData', JSON.stringify(data));

2、读取和展示数据

从localStorage中读取数据并解析：

const storedData = JSON.parse(localStorage.getItem('userData'));
let output = '';
storedData.forEach(item => {
  output += `<p>ID: ${item.id}, Name: ${item.name}, Email: ${item.email}</p>`;
});
document.getElementById('data-container').innerHTML = output;

四、通过API获取数据

1、定义API端点

假设你有一个API端点可以返回JSON格式的数据，例如https://api.example.com/users。你可以使用fetch或XMLHttpRequest来获取数据。

2、使用`fetch` API获取数据

以下是一个使用fetch API获取数据并展示的例子：

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 在这里处理数据并将其展示在网页上
    let output = '';
    data.forEach(item => {
      output += `<p>ID: ${item.id}, Name: ${item.name}, Email: ${item.email}</p>`;
    });
    document.getElementById('data-container').innerHTML = output;
  })
  .catch(error => console.error('Error:', error));

3、使用`XMLHttpRequest`获取数据

如果你需要兼容旧版浏览器，可以使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users', true);
xhr.onload = function() {
  if (this.status === 200) {
    const data = JSON.parse(this.responseText);
    let output = '';
    data.forEach(item => {
      output += `<p>ID: ${item.id}, Name: ${item.name}, Email: ${item.email}</p>`;
    });
    document.getElementById('data-container').innerHTML = output;
  }
};
xhr.send();

五、使用JavaScript对象

1、定义数据对象

你也可以直接在JavaScript中定义数据对象：

const data = [
  {
    id: 1,
    name: "John Doe",
    email: "johndoe@example.com"
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "janesmith@example.com"
  }
];

2、展示数据

然后通过JavaScript将数据展示在网页上：

let output = '';
data.forEach(item => {
  output += `<p>ID: ${item.id}, Name: ${item.name}, Email: ${item.email}</p>`;
});
document.getElementById('data-container').innerHTML = output;

六、总结

通过以上几种方法，你可以在不使用数据库的情况下，将数据在网页上呈现出来。使用JSON文件的方法最为简单且易于理解，非常适合初学者。而利用本地存储和通过API获取数据则提供了更为灵活和强大的数据管理方式。

对于项目团队管理系统，如果你需要更加专业和系统的解决方案，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们提供了全面的功能和便捷的操作，可以极大提高团队协作效率。