如何使用脚本加载两个 json 文件，而不用一个脚本覆盖另一个？答案

【问题标题】：How can I load two json files with script, without one script overwriting the other?如何使用脚本加载两个 json 文件，而不用一个脚本覆盖另一个？
【发布时间】：2021-11-21 16:50:29
【问题描述】：

我有一个 html 文件，其中显示了两个 Tabulator 表。表 1 连接到 saveFile1.json，表 2 连接到 saveFile2.json。我的问题是，saveFile2.json 中的 <script> 覆盖了 saveFile1.json 中的 <script>，因此两个表都显示了 saveFile2.json 中的内容。我怎样才能解决这个问题？谢谢。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="MyCSS.css" >
        <script type="text/javascript" src="node_modules/tabulator-tables/dist/js/tabulator.js"></script>
    </head>
    
<body>

<table>
    <td>
        <div id="table1"></div>
        <script type="text/javascript" src="saveFile1.json"></script>
    </td>
    <td>
        <div id="table2"></div>
        <script type="text/javascript" src="saveFile2.json"></script>
    </td>
</table>

<script type="text/javascript" src="tabulatorTables.js"></script>

</body>
</html>

【问题讨论】：

您在询问 Javascript 但您没有显示代码？
使用不同的变量名和/或模块。
@CharlesEF 上次我遇到了一个类似的问题，我只需要在 html 文件中切换 <script> 标记的位置即可使其工作。所以我的想法是，这次解决方案可能是类似的。
@jabaa 你知道一个可以解决我的“双json问题”的模块吗？
您应该将脚本加载为模块：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules。您应该使用正确的命名约定。 saveFile1.json 不能是 JSON 文件。这是一个 JavaScript 文件。你应该把它命名为saveFile1.js。

标签： javascript html tabulator

【解决方案1】：

我猜（因为你没有提供 jsfiddle）你的 json 文件由什么组成

saveFile1.json : var data = [ ... ];
saveFile2.json : var data = [ ... ];

并且您在每个制表符上使用相同的数据变量。

因此，最后加载的 saveFile*.json 获胜。

使用不同的变量名称（data1 和 data2）并将它们具体应用于每个制表符（table1.setData(data1); table2.setData(data2)）。

【讨论】：

嘿，又是你 :D 因为这个问题与几天前的最后一个问题非常相似，所以我想给你写一个 PN。但遗憾的是，这个网站上不存在 PN 功能 :( 以防我将来遇到问题：有什么方法可以让我亲自联系你吗？我的意思是，当然，只要你同意。关于你的这个问题的解决方案：OMG，你说的太对了！就是这样。我看了看它们：两个 var 具有相同的名称。更改它们：BOOM，它有效。再次：非常感谢！
社区最好在这里做，这样以后有类似问题的人可以搜索找到答案。