Как загрузить JSON в проект Stackblitz?

Я работаю в Stackblitz, и один из моих файлов - это файл JSON с некоторыми данными. Я хочу получить эти данные JSON в свой файл javascript index.js. Но как?

Когда я пытаюсь загрузить его с помощью xhr, вот так:

function loadJSON(callback) {

  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', './data.json', true); // Replace 'my_data' with the path to your file
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

loadJSON( (res) => {
  console.info('res', res);
});

Я получаю ниже в своей консоли

res
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Lato:400,700,900" rel = "stylesheet">
<base href = "/">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel = "stylesheet" media = "screen" href = "https://c.staticblitz.com/assets/preview-8222014a50f8588c56d057621cdaf871.css" />
<script src = "https://c.staticblitz.com/assets/common-ac612705cbc32f101488a.js" crossorigin = "anonymous"></script>
<script src = "https://c.staticblitz.com/assets/ext-52afab49a792df0521dea.js" crossorigin = "anonymous"></script>
<script src = "https://c.staticblitz.com/d/webcontainer.1095b07b6da20a55409.js" crossorigin = "anonymous"></script>
<script src = "https://c.staticblitz.com/assets/preview-fccab87ab4d097a3c4aaa.js" crossorigin = "anonymous"></script>
<script>(function(){_preboot("https://l.staticblitz.com/b/v1/js-gxiojn/c0798b5ef61",{p:"stackblitz",a:"AIzaSyBZSvuCzbUhuRrSps-HjM5bFClLPaFF9Vg",o:false})})()</script>
</head>
<body></body>
</html>

Ссылка на проект Stackblitz

json import xmlhttprequest stackblitz

19.10.2018 21:17

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

1 477

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

XHR или выборка используются для получения данных с удаленного сервера. В модулях можно просто использовать import data from './data.json'

Как здесь: https://stackblitz.com/edit/svelte-wtvhav

24.10.2018 16:56

Есть решение, если вы просто тренируетесь, сделайте папку с именем public на корневом уровне вашего проекта и переместите в нее ресурс, к которому вы хотите получить доступ, используя ajax. например, ресурс: ./public/data.json вы можете получить к нему доступ:

let request = new Request("/data.json");
// **do not** mention url as/public/data.json
fetch(request)
.then((data)=>{
console.info(data);
// your code
});

Он будет работать, поскольку по умолчанию webpack предоставляет доступ к папке с именем public для хранения статического содержимого.

У меня не сработало. Тем не менее, похоже, что я нажимал что-то, что давало мне настоящий 404 при запросе от /public/x.json. (У меня в корне x.json).

— 10.04.2021 20:37

24.09.2019 11:23