Question

我想在方括号中创建一个json文件，仅用于存储其中包含200个元素的数组，并且我希望能够将该文件导入到我的“ main.js”文件中，甚至可以使用它尽管数组本身不再位于“ main.js”中。

我该怎么做？

Answer 1

dummyData.js

export const data = [{}, ......, {}];

main.js

import { data } from './dummyData';

如果您使用的是不带es6功能的普通js，则可以执行以下操作：

// dummyData.js

module.exports = [{}，........，{}];

// main.js

var data = require（'./ dummyData'）;

Answer 2

您应该首先从文件中导出json / array 文件应该是这样的 export const myJsonArray = [{...}, {...}, ...]

然后在main.js中，您可以像这样导入jsonArray import myJsonArray from "{file_path}"

Answer 3

创建一个JS文件，例如dataProvider.js，将json定义为常量，使其全局编写一个函数以将其转换为JSON并返回，或者仅按原样返回JSON。

现在在main.js中包含dataProvider.js，然后您就可以访问共享变量。

确保所加载的页面同时导入了main.js和dataProvider.js。

Answer 4

好的，这是示例：在演示中，我们将加载数组中的每个对象并创建一个段落。由于该代码段不支持多文件，因此可以在此处运行演示：

https://repl.it/@PaulThomas1/DemoForTaho

我们的HTML：

<div id="content"></div>
<script src="data.js"></script>
<script src="script.js"></script>

我们的主要javascript（script.js）：

document.addEventListener("DOMContentLoaded", function() {

  let contentDiv = document.getElementById("content");
  let template = document.createElement("template");

  data.forEach(dataItem => {
    let element = document.createElement('p');
    element.innerHTML = newPara(dataItem.name);
    contentDiv.appendChild(element);
  });

});

const newPara = (name) => { return `Name: ${name}` };

我们的数据保存在data.js中：

data = [
  {
    "name" : "bert"
  },
    {
    "name" : "bert11"
  },
    {
    "name" : "bert22"
  },
    {
    "name" : "bert33"
  },
    {
    "name" : "bert44"
  },
    {
    "name" : "bert55"
  },
    {
    "name" : "bert66"
  }
];

如何将数组文件导入javascript文件

4 个答案: