Import JSON file in React with data format error

Question

I tried to import a JSON file in my React project, but got the parsing error:

json file:testData.json { "data": { "articles": [ { "id": "95c12a8f6c88953ca8f8a39da25546e6", "title": "Introducing React's Error Code System", "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)", "authorId": "2c6aa2cfe3449467d329fa17d6ea230f", "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire." } ], "authors": [ { "id": "d85577ea34ae50f2dac5347b5219aa23", "firstName": "Andrew", "lastName": "Clark", "website": "https://twitter.com/acdlite" } ] } }

DataApi.js file:

export default class DataApi { // property: rawData constructor(rawData) { this.rawData = rawData; } mapIntoObject(arr) { return arr.reduce((acc, curr) => { acc[curr.id] = curr; return acc; }, {}); } getArticle() { return this.mapIntoObject(this.rawData.articles); } getAuthors() { return this.mapIntoObject(this.rawData.authors); } }

And I tried to import JSON data in this file:

import DataApi from "./DataApi"; // object to process data import { data } from "./testData.json"; // raw data // create a api object to host raw data let api = new DataApi(data); const articles = api.getArticle(); console.log(articles);

then I got the error:(the import directory are correct):

 2:13 error Parsing error: Unexpected token, expected ";" 1 | { > 2 | "articles": [ | ^ 3 | { 4 | "id": "95c12a8f6c88953ca8f8a39da25546e6", 5 | "title": "Introducing React's Error Code System",

What is the problem?

Hemadri Dasari · Accepted Answer · 2018-09-05 05:53:57Z

You can do export default

testData.json:

const data = { "data": { "articles": [ { "id": "95c12a8f6c88953ca8f8a39da25546e6", "title": "Introducing React's Error Code System", "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)", "authorId": "2c6aa2cfe3449467d329fa17d6ea230f", "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire." } ], "authors": [ { "id": "d85577ea34ae50f2dac5347b5219aa23", "firstName": "Andrew", "lastName": "Clark", "website": "https://twitter.com/acdlite" } ] } } export default data;

and while importing

With json-loader installed, you can use

import data from "./testData.json";

or If you have used create-react-app to scaffold your project, the module is already included, you just need to import your json:

import data from "./testData";

To install json-loader

npm install --save-dev json-loader

And add below config to your webpack.config.js

webpack.config.js

module.exports = { module: { loaders: [ { test: /\.json$/, loader: 'json-loader' } ] } }

Amruth · Accepted Answer · 2018-09-05 05:38:30Z

You have to export your json data, your json data should be like this.

export const data = { "data": { "articles": [ { "id": "95c12a8f6c88953ca8f8a39da25546e6", "title": "Introducing React's Error Code System", "date": "Mon Jul 11 2016 00:00:00 GMT+0000 (UTC)", "authorId": "2c6aa2cfe3449467d329fa17d6ea230f", "body": "Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire." } ], "authors": [ { "id": "d85577ea34ae50f2dac5347b5219aa23", "firstName": "Andrew", "lastName": "Clark", "website": "https://twitter.com/acdlite" } ] } }

change .json to .js extention, while importing

import { data } from "./testData"; // raw data

I got the data auto copied from online api and stored the data in testData.json file. I just want to import json data directly without change the testData.json. However I tried a few ways and not working. Do you have better ideas? Thanks
use json loader in that case -> npmjs.com/package/json-loader

Collectives™ on Stack Overflow

Import JSON file in React with data format error

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related