0

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?

taho
  • 67
  • 1
  • 1
  • 6
  • 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 Dec 24 '18 at 04:44
  • Possible duplicate of [How to open a local disk file with Javascript?](https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript) – ic3b3rg Dec 24 '18 at 04:52
  • Possible duplicate of [How to read an external local JSON file in JavaScript?](https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript) and [Load local JSON file into variable](https://stackoverflow.com/questions/14484613) and [How to read JSON file with fetch() in javascript?](https://stackoverflow.com/questions/51859358) – adiga Dec 24 '18 at 05:04
  • [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/a/261593/3082296) – adiga Dec 24 '18 at 05:07

5 Answers5

9
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');

Noman Hassan
  • 381
  • 1
  • 10
  • 2
    I get `Uncaught SyntaxError: Cannot use import statement outside a module`. Do I have to ` – Timo Aug 18 '20 at 12:14
0

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}"

Vikas Verma
  • 84
  • 1
  • 6
0

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.

Shariq
  • 513
  • 4
  • 14
0

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"
  }
];
Bibberty
  • 4,670
  • 2
  • 8
  • 23
0

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';
Rajani Soni
  • 1
  • 2