如何打开JSON文件

在本文中，我们将使用JavaScript打开JSON文件。JSON代表JavaScript对象表示法。它基本上是一种用于结构化数据的格式。JSON格式是一种文本格式，用于以JavaScript对象的形式表示数据。

方法：

创建一个JSON文件，在该JSON文件中添加数据。
使用JavaScript使用fetch()方法获取创建的JSON文件。
在控制台或窗口中显示数据。

创建JSON文件：

打开文本编辑器，例如Visual Studio Code等。
创建一个新文件，并向其中添加数据。
将此文件保存为“ .json”扩展名。

注意： 我们正在使用HTML文件在script标签下使用JavaScript。

示例1： 要在控制台中显示数据。首先创建一个带有“ .json”扩展名的JSON文件，这里我们将其命名为 load.json 其中包含以下代码。

{
  "users":[
    {
        "site":"GeeksForGeeks",
        "user": "Anurag Singh"
    }
  ]
}

现在，创建一个HTML文件来使用JavaScript代码：

<!DOCTYPE html>
<html>
  <body>
    <h1>GeeksForGeeks</h1>
    <button onclick="Func()">Show Details</button>
    <script>
      function Func() {
        fetch("./load.json")
          .then((res) => {
            return res.json();
          })
          .then((data) => console.log(data));
      }
    </script>
  </body>
</html>

输出： 在上面的代码片段中，我们创建了一个名为“ Show Details”按钮，当我们单击此按钮时，将执行“ Func”函数。这个Func函数基本上是从“ load.json”文件中获取详细信息。

fetch()方法返回一个promise，promise实际上是一个代表未来结果的对象。then()方法用于等待来自服务器端的响应并将其记录到控制台。

如何打开JSON文件

窗口

如何打开JSON文件

控制台

示例2： 要在窗口中显示数据。我们使用了在示例1中使用的相同的JSON文件。

<!DOCTYPE html>
<html>
  <body>
    <h1>GeeksForGeeks</h1>
    <button onclick="Func()">Show Details</button>
    <p id="details"></p>


    <script>
      function Func() {
        fetch("./load.json")
          .then((res) => {
            return res.json();
          })
          .then((data) => document.getElementById("details").innerHTML = 
                (data.users[0].site + " - " + data.users[0].user));
      }
   </script>
  </body>
</html>

输出： 在上面的代码中，我们使用了与示例1中相同的方法，这里我们从“ load.json”文件中获取了数据。我们选择了id为“ details”的元素，然后使用innerHTML属性在窗口中显示获取到的数据。

如何打开JSON文件