Import json object from another JS file

Question

I have file1, data.js:

export var data = [
    {
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    },
    {
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    },
    {
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    }
]

module.exports = data;

And I have file2, index.html:

<table id="table">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Category</th>
        <th>Color</th>
    </tr>
</table>


<script src="jquery.js"></script>
<script>
import {data} from 'data.js';

for(var i = 0; i < data.length; i++) {
    var row = '<tr><td>' + data[i].id + '</td>';
    row+= '<td>' + data[i].name+ '</td>';
    row+= '<td>' + data[i].category + '</td>';
    row+= '<td>' + data[i].color + '</td></tr>';
    $("#table").append(row);
}
</script>

The problem is with this line:

import {data} from 'data.js';

If I include the data var directly in index.html, it works fine, but when I try to reference it from it's own separate file it doesn't work.

The error it throws is:

  Unexpected token { import call expects exactly one argument

Prime · Accepted Answer · 2020-11-08 19:06:32Z

1

Use script tag instead of import. Remove export in js file.

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

1.html

<table id="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Category</th>
    <th>Color</th>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script>
  for (var i = 0; i < data.length; i++) {
    var row = "<tr><td>" + data[i].id + "</td>";
    row += "<td>" + data[i].name + "</td>";
    row += "<td>" + data[i].category + "</td>";
    row += "<td>" + data[i].color + "</td></tr>";
    $("#table").append(row);
  }
</script>

data.js

var data = [
  {
    id: "001",
    name: "apple",
    category: "fruit",
    color: "red",
  },
  {
    id: "002",
    name: "melon",
    category: "fruit",
    color: "green",
  },
  {
    id: "003",
    name: "banana",
    category: "fruit",
    color: "yellow",
  },
];

answered Nov 8, 2020 at 19:06

Prime

2,8592 gold badges11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fuego DeBassi Over a year ago

This totally works -- but curious if there is just some syntax I'm using wrong to import the data var directly?

Prime Over a year ago

You cannot use import outside of module.

Prime Over a year ago

For more explanation, please check this: jakearchibald.com/2017/es-modules-in-browsers

Collectives™ on Stack Overflow

Import json object from another JS file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related