js从本地json文件中获取数据

你可以使用XMLHttpRequest对象或者fetch API来获取本地JSON文件中的数据。

使用XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

使用fetch:

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

以上代码都是假设JSON文件的路径为当前页面的相对路径，如果JSON文件在其他位置，需要相应地更改路径。

相关问题

浏览器怎样从本地json文件中获取数据

浏览器可以通过 JavaScript 中的 XMLHttpRequest 对象或 Fetch API 来从本地 JSON 文件中获取数据。下面是使用 XMLHttpRequest 对象获取本地 JSON 文件数据的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

这个例子中，我们创建了一个 XMLHttpRequest 对象并设置了请求方法和请求地址。然后，我们通过 onreadystatechange 事件监听器来处理请求状态的变化。当 readyState 的值为 4（请求已完成）并且 status 的值为 200（请求成功）时，我们使用 JSON.parse() 方法将响应文本解析为 JavaScript 对象，并将其打印到控制台中。你也可以将获取到的数据用于其他目的。

vue获取本地json文件数据

要获取本地 JSON 文件数据，可以使用 Vue.js 中的 Axios 库。

首先，在 Vue.js 中使用 Axios 库，需要先在项目中安装 Axios，可以使用以下命令安装：

npm install axios

然后，在 Vue 组件中使用 Axios 获取本地 JSON 文件数据，可以按照以下步骤：

1. 在 Vue 组件中引入 Axios 库：

import axios from 'axios';

2. 在 Vue 组件中定义一个 data 属性，用来存储 JSON 数据：

data() {
  return {
    jsonData: null
  };
}

3. 在 Vue 组件的 created 生命周期钩子函数中，使用 Axios 发送 GET 请求获取本地 JSON 文件数据：

created() {
  axios.get('/path/to/json/file.json')
    .then(response => {
      this.jsonData = response.data;
    })
    .catch(error => {
      console.log(error);
    });
}

在上面的代码中，`/path/to/json/file.json` 是本地 JSON 文件的路径，`response.data` 是获取到的 JSON 数据。

4. 在 Vue 组件中使用获取到的 JSON 数据：

<template>
  <div>
    <ul>
      <li v-for="item in jsonData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

在上面的代码中，`jsonData` 是存储 JSON 数据的 data 属性，使用 `v-for` 指令遍历 JSON 数据并渲染到页面中。

以上就是使用 Vue.js 和 Axios 获取本地 JSON 文件数据的步骤。