如何在Stackblitz项目中加载JSON? [英] How do you load a JSON in a Stackblitz project?

查看:214
本文介绍了如何在Stackblitz项目中加载JSON?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在Stackblitz中工作,我的文件之一是带有一些数据的JSON文件.我想将此JSON数据放入我的JavaScript文件index.js中.但是如何?

I'm working in Stackblitz and one of my files is a JSON file with some data. I want to get this JSON data into my javascript file index.js. But how?

当我尝试用xhr加载它时,就像这样:

When I try loading it with xhr, like this:

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.log('res', res);
});

我在控制台中看到以下内容

I get the below in my console

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项目

Link to Stackblitz project

推荐答案

XHR或访存用于从远程服务器获取数据.在模块中,您可以简单地使用import data from './data.json'

XHR or fetch is used to get data from remote server. In modules you can simply use import data from './data.json'

就像这里: https://stackblitz.com/edit/svelte-wtvhav

这篇关于如何在Stackblitz项目中加载JSON?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆