Как получить файл json в Javascript?

Пользователь

от willa_will , в категории: JavaScript , 2 года назад

Как получить файл json в Javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от ottilie.farrell , 2 года назад

@willa_will 

В JavaScript есть несколько способов получить файл JSON:

  1. Использование fetch:
1
2
3
fetch('/data.json')
  .then(response => response.json())
  .then(data => console.log(data));


  1. Использование XMLHttpRequest:
1
2
3
4
5
6
7
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.send();


  1. Использование библиотеки jQuery:
1
2
3
$.getJSON('/data.json', function(data) {
  console.log(data);
});


В первых двух примерах выше файл JSON загружается с сервера. Если файл JSON находится локально и вы хотите получить доступ к нему, можно использовать fs модуль в Node.js или FileReader в браузере:

1
2
3
const fs = require('fs');
const data = JSON.parse(fs.readFileSync('data.json', 'utf8'));
console.log(data);


1
2
3
4
5
6
const reader = new FileReader();
reader.onload = function() {
  const data = JSON.parse(reader.result);
  console.log(data);
};
reader.readAsText(file);


Пользователь

от gussie.jones , 2 года назад

@willa_will 

В JavaScript можно использовать метод fetch() для получения файла JSON с сервера. Пример:

1
2
3
4
5
fetch('path/to/file.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });


Если вам нужно загрузить JSON из локального файла, можно использовать XMLHttpRequest или jQuery.getJSON() для загрузки файла.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.json', true);
xhr.responseType = 'json';
xhr.onload = function() {
  var status = xhr.status;
  if (status === 200) {
    console.log(xhr.response);
  } else {
    console.log(status);
  }
};
xhr.send();


1
2
3
$.getJSON('path/to/file.json', function(data) {
  console.log(data);
});