JavaScript 如何打开JSON文件

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

方法：

创建一个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代码：

HTML

<!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()方法用于等待来自服务器的响应并将其记录到控制台。

JavaScript 如何打开JSON文件

示例2： 在窗口上显示数据。我们使用的是示例1中使用的同一个JSON文件。

HTML

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

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

JavaScript 如何打开JSON文件