静态如何给json数据加数据

Hey小伙伴们，今天来聊聊一个超实用的小技巧——如何在静态页面给JSON数据加数据，是不是听起来有点技术宅？别急，我会用最通俗易懂的方式，让你轻松get这个技能！

我们得了解一下JSON是什么，JSON就是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成，在Web开发中，JSON被广泛用于前后端数据交互。

问题来了，如何在静态页面中给JSON数据加数据呢？这里的“静态页面”指的是不依赖服务器端动态生成的页面，比如HTML文件，我们可以通过JavaScript来实现这个功能。

步骤一：准备JSON数据

你得有一份JSON数据，这里举个简单的例子，假设我们有以下JSON数据：

{
  "users": [
    {"id": 1, "name": "Alice"},
    {"id": 2, "name": "Bob"}
  ]
}

步骤二：在HTML中引入JSON数据

在你的HTML文件中，可以通过<script>标签引入JSON数据，这样做的好处是，你可以在不改变HTML结构的情况下，动态地加载和修改数据。

<script id="data" type="application/json">
{
  "users": [
    {"id": 1, "name": "Alice"},
    {"id": 2, "name": "Bob"}
  ]
}
</script>

步骤三：使用JavaScript解析和修改JSON数据

我们可以使用JavaScript来解析这个JSON数据，并添加新数据，这里我们添加一个新的用户：

// 获取JSON数据
var jsonData = document.getElementById('data').textContent;
// 解析JSON数据
var obj = JSON.parse(jsonData);
// 添加新用户
obj.users.push({ "id": 3, "name": "Charlie" });
// 将修改后的数据转换回JSON字符串
var updatedJsonData = JSON.stringify(obj);
// 现在你可以将updatedJsonData用于其他目的，比如显示在页面上
console.log(updatedJsonData);

步骤四：将更新后的数据展示在页面上

如果你想将更新后的数据展示在页面上，可以通过JavaScript动态创建元素并插入到DOM中。

// 将更新后的数据转换回JSON字符串
var updatedJsonData = JSON.stringify(obj);
// 创建一个新的div元素
var div = document.createElement('div');
// 设置div的innerHTML为更新后的数据
div.innerHTML = updatedJsonData;
// 将div元素添加到body中
document.body.appendChild(div);

这样，你就可以在静态页面上动态地给JSON数据加数据了，这个方法的好处是，不需要服务器端的支持，完全在客户端完成数据的加载和修改。