I want to create a json file in brackets only to store an array that has 200 elements in it, and I want to be able to import that file into my "main.js" file, and be able to use it even though the array itself is not in "main.js" anymore.

How can I do this?

I want to create a json file in brackets only to store an array that has 200 elements in it, and I want to be able to import that file into my "main.js" file, and be able to use it even though the array itself is not in "main.js" anymore.

How can I do this?

• javascript
• html
• arrays
• json

• taho is this a constant array, or do you anticipate it changing from a database eventually? If constant you only need add that script file to your page and it will be available. – Bibberty Commented Dec 24, 2018 at 4:44
• Possible duplicate of How to open a local disk file with Javascript? – ic3b3rg Commented Dec 24, 2018 at 4:52
• Possible duplicate of How to read an external local JSON file in JavaScript? and Load local JSON file into variable and How to read JSON file with fetch() in javascript? – adiga Commented Dec 24, 2018 at 5:04
• How much research effort is expected of Stack Overflow users? – adiga Commented Dec 24, 2018 at 5:07

5 Answers 5

dummyData.js

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

main.js

import { data } from './dummyData';

if you are using vanilla js, without es6 features, you could do the following:

//dummyData.js

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

//main.js

var data = require('./dummyData');

you should first export your json/array from a file file should be something like export const myJsonArray = [{...}, {...}, ...]

then in your main.js you can import the jsonArray like this import myJsonArray from "{file_path}"

Create a JS file, say dataProvider.js, have your json defined as a constant, make it global write a function to convert it to JSON and return it, or just return the JSON as-is.

Now in your main.js include the dataProvider.js, and then you can access the shared variable.

Make sure that the page you're loading has both main.js and dataProvider.js imported.

Ok, here is sample: In the demo we will load each object in array and create a paragraph. Because snippet does not support multi files, the working demo is here:

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

Our HTML:

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

Our main 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}` };

Our data lives in data.js :

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

Step 1 : add "export" keyword before anything you want to export.

    ex- export const data = [{1,2,3}]

Step 2 : add type="module" in html, where you link your js to html.

    ex-   <script src="index.js" type="module"></script>

Step 3 : add import keyword on top of the file where you want to import data.

    ex- import { data } from './Data.js';