将 a.json 文件导入 javascript 时，我的 HTML 文件无法从 ZDE9B9ED78D7E2E919DCEEFFEE780ZE 代码调用函数
[英]When importing a .json file into javascript my HTML file loses the ability to call functions from the javascript code
问题描述
Hey this is really bizarre.
嘿，这真的很奇怪。
I will give some code examples here:我将在这里给出一些代码示例：
HTML: HTML：
<body style="background-color:rgb(157, 163, 163)" onload="createData()">
<script src="indexLIS.js"></script>
<script src="assets/initData.json"></script>
</body>
Javascript: Javascript：
//import dataSource from './assets/initData.json';
function createData(){
console.log("hey");
}
JSON: JSON：
{
"dataSource":[
{
"id": 0,
"name":"TemporaryName",
"node-level":0
}
]
}
In a code example even this simple, each time I open the HTML I get "hey" printed to the console almost immediately.在一个即使如此简单的代码示例中，每次我打开 HTML 时，我几乎都会立即将“嘿”打印到控制台。 However, if I uncomment the first line of the javascript code there and import the data from initData.json, then I immediately get the error "createData not defined" as though the HTML code has completely lost the ability to communicate with the javascript file. However, if I uncomment the first line of the javascript code there and import the data from initData.json, then I immediately get the error "createData not defined" as though the HTML code has completely lost the ability to communicate with the javascript file.
2 个解决方案
解决方案1
1 2019-09-30 16:30:52
EDIT : I just realized you were using es6 module syntax above (it read like a code comment to me).编辑：我刚刚意识到你在上面使用 es6 模块语法（它读起来就像我的代码注释）。 You might want to check out this question: How to import a json file in ecmascript 6?您可能想查看这个问题： 如何在 ecmascript 6 中导入 json 文件？
Original answer :原始答案：
You can't load json in a script tag.您不能在script标签中加载json 。 When you do, the browser is unable to parse it, and that kills all script execution on the page.当你这样做时，浏览器无法解析它，这会杀死页面上的所有脚本执行。
If you change your initData.json file to initData.js :如果您将initData.json文件更改为initData.js ：
var jsonData = {
"dataSource":[
{
"id": 0,
"name":"TemporaryName",
"node-level":0
}
]
};
You should then be able to reference the data from the global jsonData variable.然后，您应该能够从全局jsonData变量中引用数据。
解决方案2
0 已采纳 2019-10-01 11:09:55
I was eventually able to get it working for me.我最终能够让它为我工作。 I can't say for sure if this will be the answer that works best for everyone but it accomplished what I set out to do.我不能确定这是否是最适合每个人的答案，但它完成了我打算做的事情。
HTML: HTML：
<body style="background-color:rgb(157, 163, 163)" onload="createData()">
<script type="text/javascript" src="indexLIS.js"></script>
</body>
Javascript: Javascript：
function createData() {
$.getJSON('./assets/initData.json', function(json) {
console.log(json.dataSource);
});
}
Nothing changed in the Json itself, so I wont post that, but this way I was able to import the JSON data and interact with it without killing the relationship between the javascript file and the html. Nothing changed in the Json itself, so I wont post that, but this way I was able to import the JSON data and interact with it without killing the relationship between the javascript file and the html. It might seem limiting to have to do everything you want to do with the json inside of the function(json){} section, but all I do in there is just send json out to another function, so it really doesn't slow me down at all.必须在function(json){}部分中使用 json 做所有你想做的事情似乎是有限的，但我在那里所做的只是将json发送到另一个 ZC1C425268E68385D1AB5074C17A9，所以它真的很慢14完全下降。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.