js读取json文件片段中的数据实例

这里为你提供一份完整攻略，来详细讲解如何读取JSON文件片段中的数据。包含两个示例，希望能对你有所帮助。

1. 使用XMLHttpRequest对象获取JSON文件数据

我们可以使用XMLHttpRequest对象来异步获取JSON文件的内容，并使用JSON.parse()方法将其解析为JavaScript的对象或数组。以下是如何在JavaScript中读取JSON文件的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true); // 'example.json' 为JSON文件路径
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.log('Unable to fetch data');
  }
};
xhr.send();

在上面的示例中，我们首先使用XMLHttpRequest()对象来异步获取指定路径的JSON文件。然后，我们使用XMLHttpRequest()对象的onload属性，来检查文件的加载状态以及HTTP响应状态码。如果状态码是200，则使用JSON.parse()方法将JSON文件数据转换为JavaScript对象，并将其存储在data变量中。最后，我们可以通过打印data变量来确认JSON文件是否已经成功解析。

2. 使用fetch方法获取JSON文件数据

由于XMLHttpRequest的使用方式比较繁琐，因此我们也可以使用fetch方法来获取JSON文件的内容。fetch方法类似于XMLHttpRequest，但其提供了更加简单的语法和链式操作。以下是如何使用fetch方法读取JSON文件的示例：

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

在上述示例中，我们使用fetch方法来异步获取指定路径的JSON文件，并将其作为promise对象返回。这里的.then()方法用来处理promise对象，一旦匹配到响应的JSON数据，就将其通过response.json()方法转化为JavaScript对象或者数组。然后使用第二个.then()处理存储转化后的json对象。最后，我们使用.catch()方法来处理异常或者错误。

总结

以上就是读取JSON文件中数据的两个示例：通过XMLHttpRequest对象读取，以及通过fetch方法读取。其中，fetch方法提供了更加简单、易读、易理解的代码，但仍推荐使用XMLHttpRequest对象特别是对于数据承载量较大的JSON文件。