js 如何对json进行读取

在JavaScript中，读取JSON数据是一种常见的操作，因为JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，JSON是基于JavaScript的一个子集，标准格式的JSON与JavaScript对象字面量基本相同，因此JavaScript原生支持JSON的读取和生成。

要读取JSON数据，通常有以下几种方式：

1、从本地文件读取JSON：

如果JSON数据存储在本地文件中，可以使用FileReader对象读取文件内容，然后将其转换为JSON对象。

const fileInput = document.querySelector('#fileInput');
const output = document.querySelector('#output');
fileInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function (e) {
    const json = JSON.parse(e.target.result);
    output.textContent = JSON.stringify(json, null, 2);
  };
  reader.readAsText(file);
});

2、从远程服务器读取JSON：

如果JSON数据存储在远程服务器上，可以使用XMLHttpRequest对象或fetch API发起请求，获取JSON字符串，然后将其转换为JSON对象。

使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'url/to/json/data.json', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    const json = JSON.parse(xhr.responseText);
    console.log(json);
  } else {
    console.error('Request failed. Returned status of ' + xhr.status);
  }
};
xhr.send();

使用fetch：

fetch('url/to/json/data.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(json => {
    console.log(json);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

3、解析JSON字符串：

如果已经获取到JSON格式的字符串，可以直接使用JSON.parse()方法将其转换为JavaScript对象。

const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

4、将JavaScript对象转换为JSON字符串：

如果需要将JavaScript对象转换为JSON字符串，可以使用JSON.stringify()方法。

const obj = { name: 'John', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);

5、使用JSONP跨域请求：

如果需要从不同域的服务器请求JSON数据，可以使用JSONP（JSON with Padding）技术，JSONP是一种跨域请求数据的方法，它允许在GET请求的查询参数中指定一个回调函数，然后请求的响应将以该回调函数的调用形式返回。

const script = document.createElement('script');
script.src = 'http://example.com/data.json?callback=handleJsonp';
document.head.appendChild(script);
function handleJsonp(err, data) {
  if (err) {
    console.error('JSONP request failed', err);
  } else {
    console.log(data);
  }
}

在实际开发中，根据数据来源和需求选择合适的方法进行JSON数据的读取和处理，随着现代前端框架的发展，如React、Vue和Angular等，它们通常提供了更简洁的方式来处理JSON数据，使得数据的读取和操作更加方便。

谷歌浏览器

谷歌浏览器

谷歌浏览器