I am trying to export this JSON data for importing in the project however it shows unexpected syntax error

Question

When it was in the same file as component worked perfectly. Now I am trying to exclude it from component to make project cleaner. However it shows unexpected syntax errors. File format is JSON. How can this code be fixed and work as it needs to be?

const postsData = [

      {
        id: 1,
        title: "How to start a business with 100$",
        published: "14h ago",
        image: require("../img/img1.jpg"),
      },
      {
        id: 2,
        title: "Get funding for your startup",
        published: "19h ago",
        image: require("../img/img2.jpg"),
      },
      {
        id: 3,
        title: "Latest Fashion Trends for 2018",
        published: "14h ago",
        image: require("../img/img3.jpg"),
      },

    ]

    export {postsData};

Ahsan Ali · Answer 1 · 2018-01-05T10:08:26.500

2

Try this:

export default [
      {
        id: 1,
        title: "How to start a business with 100$",
        published: "14h ago",
        image: require("../img/img1.jpg"),
      },
      {
        id: 2,
        title: "Get funding for your startup",
        published: "19h ago",
        image: require("../img/img2.jpg"),
      },
      {
        id: 3,
        title: "Latest Fashion Trends for 2018",
        published: "14h ago",
        image: require("../img/img3.jpg"),
      }
    ]

and import it like

import postsData from 'filepath';

PS:

there is no naming convention for postsData you can name it anything.
your json file should have an extension .js for your case because you're not using JSON objects

edited Jan 05 '18 at 10:08

answered Jan 05 '18 at 09:24

Ahsan Ali

4,223
2
14
25

You wrote export default [.... How it knows if its a postsData? in your example it's not defined. – Artur Jan 05 '18 at 09:37
You can name it anything. – Ahsan Ali Jan 05 '18 at 09:37
there is no need to define any name in your `JSON` file. You have to name it when using `import` – Ahsan Ali Jan 05 '18 at 09:43
syntax error shows inside this file on the fist line : export default [ – Artur Jan 05 '18 at 09:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162582/discussion-between-ahsan-ali-and-artur). – Ahsan Ali Jan 05 '18 at 09:47
change your `.json` file to `.js` – Ahsan Ali Jan 05 '18 at 09:52
@VedPrakash it will also work without `""` in this case, if following my sequence. – Ahsan Ali Jan 05 '18 at 10:05
@AhsanAli i am getting bellow isue "Error: Parse error on line 1: [{ id: 1, title: "How ----^ Expecting 'STRING', '}', got 'undefined' " – Ved Prakash Jan 05 '18 at 10:20
@AhsanAli : please use json lint to validate json- [json lint](https://jsonlint.com/) – Ved Prakash Jan 05 '18 at 10:22

Ved Prakash · Answer 2 · 2018-01-05T10:00:13.047

You need to add double "" mark like this below

{
"id": "1",
"title": "How to start a business with 100$",
"published": "14h ago",
}

please use json lint to validate json- json lint

please follow

[{
        "id": "1",
        "title": "How to start a business with 100$",
        "published": "14h ago",
        "images": [{
                    "bannerImg1": "./images/effy.jpg"
                },
                {
                    "id": "2",
                    "title": "Get funding for your startup",
                    "published": "19h ago",
                    "images": [{
                            "bannerImg1": "./images/effy.jpg"
                        },
                        {
                            "id": "3",
                            "title": "Latest Fashion Trends for 2018",
                            "published": "14h ago",
                            "images": [{
                                "bannerImg1": "./images/effy.jpg"
                            }]

                        }
                    ]

score 0 · Answer 3 · answered Jan 05 '18 at 10:39

If it is a JSON file like MyFile.json, then you cant export any thing from JSON file with your current code as it contains keywords like export or const and you cant use JavaScript keywords in JSON file.

You can change the extension of the file to MyFile.js

OR

You can create a json file like MyFile.json and put only JSON code

{
"id": "1",
"title": "How to start a business with 100$",
"published": "14h ago",
}

and require it from JS file like : import data from './MyFile.json'

Teivaz · Answer 4 · 2018-01-05T10:47:41.993

This is not a JSON, it's just a javascript file (according to syntax).
The last line constructs object with shorthand property and exports it in the form export { name1, name2, …, nameN }; where name1, name2, ..., nameN are named properties.
To import named property use following syntax:

import { export } from "module-name";

In your case it would be

import { postsData } from "<your file without js ext>"

score 0 · Answer 5 · answered Jan 05 '18 at 11:07

As said above,this is not a JSON but just a Object.

First,New a js file,you can name this file whatever you want.for example,data.js

Then write like this in data.js:

export defult{
  postsData: [
      {
        id: 1,
        title: "How to start a business with 100$",
        published: "14h ago",
        image: require("../img/img1.jpg"),
      },
      {
        id: 2,
        title: "Get funding for your startup",
        published: "19h ago",
        image: require("../img/img2.jpg"),
      },
      {
        id: 3,
        title: "Latest Fashion Trends for 2018",
        published: "14h ago",
        image: require("../img/img3.jpg"),
      },
   ]
}

Finally,in your component file:

import {xxxx} from './data';

in this way,you can get your data,xxxx.postsData.

score 0 · Answer 6 · edited Jul 08 '20 at 12:58

0

with commonjs module
const express = require("express");
const config = require("./config.json");

typescript

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

import law from './keywords/law.json'
import special from './keywords/special.json'

edited Jul 08 '20 at 12:58

David Buck

3,439
29
24
31

answered Jul 08 '20 at 12:45

Muiz Adeyeye

1

score -1 · Answer 7 · answered Jun 06 '20 at 15:05

-1

If you have .JSON file and everything inside it is json then you need not export it like normal module. You simply import it in other module and use it like normal object. Thats it !

answered Jun 06 '20 at 15:05

pantech

69
2
6

I am trying to export this JSON data for importing in the project however it shows unexpected syntax error

7 Answers7