JS读取JSON文件

一、JS读取JSON文件数据

JavaScript是一种主要用于站点应用程序中的编程语言。JSON是一种格式，用于在服务器和Web应用程序之间传输数据。熟悉JavaScript的开发者知道，JSON可以轻松地与JavaScript一起使用。下面我们来看看如何使用纯JavaScript从JSON文件中获取数据。

fetch('data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

上述代码片段使用浏览器内置的fetch API从data.json文件中获取JSON数据。fetch API将返回一个解析后的数据流，其中我们使用在Promise对象上定义的then方法打印返回的结果。如果出现任何错误，包括404 Not Found或基于其它原因的无法解析的JSON，则调用catch方法。

二、JS读取JSON配置文件

JSON文件还可以用于存储应用程序的配置。我们可以将Web应用程序的重要配置保存为config.json文件，并在首次加载页面时使用JavaScript将这些配置加载到内存中。以下是一个示例：

fetch('config.json')
  .then(response => response.json())
  .then(config => {
    window.appConfig = config;
    startApp();
  })
  .catch(err => console.error(err));

上述代码片段首先从config.json文件获取JSON数据，然后将其存储在appConfig全局变量中。最后，我们可以调用startApp方法来使用配置开始应用程序。如果获取配置的过程中出现错误，则记录错误。

三、JS读取JSON文件的方法

在JavaScript中，我们可以从JSON文件中获取数据有多种方法。下面我们来介绍几种具有代表性的方法。

1. XMLHttpRequest对象

XMLHttpRequest对象是浏览器内置API之一。它允许JavaScript代码使用HTTP协议从Web服务器上获取数据。以下是一个使用XMLHttpRequest对象从data.json文件中获取数据的代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json');
xhr.onload = () => console.log(xhr.response);
xhr.onerror = () => console.error(xhr.statusText);
xhr.send();

注意，在使用XMLHttpRequest对象时，我们需要手动处理回调函数（例如onload和onerror）。

2. jQuery AJAX方法

jQuery是一种著名的JavaScript库，提供了更易于使用的API，使我们可以从JSON文件中获取数据。

$.ajax({
  url: 'data.json',
  dataType: 'json',
  success: data => console.log(data),
  error: err => console.error(err)
});

3. 使用第三方库

除了jQuery之外，还有许多第三方JavaScript库可以从JSON文件中获取数据。例如，我们可以通过如下代码片段使用axios库：

axios.get('data.json').then(response => console.log(response.data));

四、JS读取本地JSON文件数据

从本地文件系统中读取JSON文件是一项常见任务。下面我们将介绍在Node.js和浏览器中如何执行此操作。

1. Node.js

在Node.js中，我们可以使用fs模块来读取本地JSON文件。以下是一个示例：

const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, 'data.json');
const data = fs.readFileSync(filePath);
console.log(JSON.parse(data));

注意，我们需要使用JSON.parse方法将读取的数据转换为可用的JavaScript对象。

2. 浏览器

在浏览器中，我们可以使用input元素将用户上传的JSON文件加载到内存中。以下是一个示例：

const input = document.getElementById('file-input');

input.addEventListener('change', event => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = () => console.log(JSON.parse(reader.result));
  reader.readAsText(file);
});

在上面的示例中，我们定义了一个input元素，并使用它来允许用户从本地文件系统中选择文件。然后，我们使用FileReader对象将文件加载到内存中并使用JSON.parse方法将其转换为可用的JavaScript对象。

五、JS读取JSON文件生成图表

使用JavaScript和JSON文件，我们可以生成各种可视化效果。下面我们来看一个生成图表的示例。

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const chart = new Highcharts.Chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: '数据表'
      },
      xAxis: {
        categories: data.categories
      },
      yAxis: {
        title: {
          text: '值'
        }
      },
      series: data.series
    });
  })
  .catch(err => console.error(err));

在上面的示例中，我们使用Highcharts库创建一个新的图表。我们使用fetch API获取data.json文件中的数据，并使用该数据定义标题，x轴和y轴标签以及数据系列。最终，我们将生成的图表附加到HTML“container”元素中。

六、JS读取JSON文件内容

如需使用JavaScript读取JSON文件的内容，请使用如下代码：

fetch('data.json')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(err => console.error(err));

在上面的代码中，我们使用response.text()方法而不是response.json()方法来读取JSON文件的内容。这将返回JSON数据的纯文本格式。

七、JS读取JSON文件跨域

在Web开发中，跨域是一种常见的限制。浏览器默认情况下不允许通过XMLHttpRequest对象访问来自不同域的数据。可以通过CORS（跨域资源共享）和JSONP（JSON with Padding）进行跨域访问。

1. CORS

使用CORS，服务器可以指定HTTP响应头allow-origin来授权某个域安全访问资源。以下是一个示例：

fetch('http://example.com/data.json', {
  mode: 'cors',
  headers: {
    'Access-Control-Allow-Origin': 'http://localhost:3000'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

在上面的代码中，我们通过在请求中设置mode：’cors’来启用CORS。此外，我们还设置了Access-Control-Allow-Origin头，以授权http://localhost:3000域访问我们的data.json文件。如果服务器允许跨域访问，则fetch API将返回解析的JSON数据。

2. JSONP

JSONP是通过动态添加脚本元素到页面来实现的JSON跨域访问方式。我们可以在服务器上定义一个回调函数，并在JSON响应中返回该回调函数的调用。以下是一个JSONP数据请求示例：

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'http://example.com/data.json?callback=handleResponse';
document.body.appendChild(script);

在上面的代码中，我们创建了一个新的script元素，并在其中包含我们期望从服务器获取的JSON响应的URL。同时，我们还在URL中指定了要调用的回调函数的名称。一旦页面加载并向服务器发送JSONP请求，服务器将返回调用callback参数指定的回调函数和JSON数据。在这种情况下，handleResponse函数将被调用。

八、JS读取txt文件内容

可以使用fetch API来读取txt文件中的纯文本内容。以下是一个示例：

fetch('data.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(err => console.error(err));

在上面的代码中，我们使用response.text()方法而不是response.json()方法读取txt文件的内容。

九、前端JS读取JSON文件

在前端开发过程中，JavaScript经常用于读取JSON文件。我们可以将JSON数据存储在本地文件或与服务器进行通信以检索数据。以下是一个读取存储在HTML中的JSON数据示例：

const data = JSON.parse(document.getElementById('data').textContent);
console.log(data);

在上面的代码中，我们使用JSON.parse方法将存储在HTML中的JSON数据转换为可用的JavaScript对象。

结论

在Web开发过程中，读取JSON文件是一项常见任务。JavaScript提供了一组强大的API和工具，使我们可以轻松地读取和操作JSON文件。使用纯JavaScript、jQuery、XMLHttpRequest、fetch、Node.js或浏览器API，我们可以轻松地读取和处理JSON。此外，通过CORS或JSONP等技术，我们还可以跨域读取JSON数据。