如何打开 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 代码：

HTML

  
    GeeksForGeeks
    Show Details
    
      function Func() {
        fetch("./load.json")
          .then((res) => {
            return res.json();
          })
          .then((data) => console.log(data));
      }
    
  

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

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

窗户

安慰

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

HTML

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

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