Can't add json in reactjs [duplicate]

Question

I'm beginner in reactjs and I'm trying import JSON file in my js. When I execute the.js with JSON (like in example but replace what is in the comment by the four first var) everything works but when I'm try to import from another file I have this Error. "TypeError: fs.readFileSync is not a function".

First

import React, { Component } from 'react';
import './App.css';
//import people from './db/dab.json';

var fs = require('fs');
var filname = '/db/dab.json';
var data = fs.readFileSync(filname, 'utf-8');
var people = JSON.parse(data);
console.log(people);

/*var people = [
    {
        "id": "johnson",
        "first_name": "Karol",
        "last_name": "Johnson",
        "rank":"1",            
    },
    {
        "id": "smith",
        "first_name": "John",
        "last_name": "Smith",
        "rank":"2",        
]*/

function searchingFor(term){
    return function (x) {
        return x.first_name.toLowerCase().includes(term.toLowerCase()) || x.last_name.toLowerCase().includes(term.toLowerCase()) || x.birth_city.toLowerCase().includes(term.toLowerCase()) ||  x.address.address1.toLowerCase().includes(term.toLowerCase());
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state={
            people: people,
            term:'',
        }
        this.searchHandler = this.searchHandler.bind(this);
    }

    searchHandler(event){
        this.setState({ term: event.target.value})
    }

    render() {
        const {term, people} = this.state;
        return (
            <div className="App">
                <form>
                    <input type="texte"
                           onChange={this.searchHandler}
                           value={term}
                    />
                </form>
                {
                    people.filter(searchingFor(term)).map( person =>
                        <div key={person.id}>
                            <h3>{person.rank}</h3>

                    )
                }
            </div>
        );
    }
}

export default App;

Thank you for helping.

Luis Gurmendez · Accepted Answer · 2018-07-26 05:01:46Z

2

The client-side apps (the ones that execute in a browser) doesn't have access to your file system, so you would have to import the file directly. This can only happen if the file is already in the file system when the app execute.

With this said the way to do it is as follows.

import people from './db/dab.json';
people = JSON.parse(people);

answered Jul 26, 2018 at 5:01

Luis Gurmendez

6644 silver badges11 bronze badges

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

2 Comments

mkaczor Over a year ago

But in your example people is read only

Luis Gurmendez Over a year ago

Oh, so you want to modify the json of your file system? You should create a server and update the file through an HTTP request. If you use node as backend you could use the fs library. You can start from here alligator.io/nodejs/express-basics and create a simple express server and define a post method where you include all you logic that modifies the json. And on the client side you could use axios to make the request and pass the people object as a parameter. I hope this helps!

Ben Steward · Accepted Answer · 2018-07-26 00:31:20Z

0

If this is taking place in your browser, then you won’t have access to fs which is limited to server-side NodeJS. You’ll just access the JSON through web apis or window.fetch() and then just JSON.parse(data) to get access to it as a JS object.

answered Jul 26, 2018 at 0:31

Ben Steward

2,4171 gold badge15 silver badges26 bronze badges

7 Comments

mkaczor Over a year ago

I don't understand so what I need to do for test in my browser?

Ben Steward Over a year ago

Probably ship the JSON file as an asset and access it via fetch(‘assetPath’).then(response => doStuff()). Here’s info on the fetch API: developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Luis Gurmendez Over a year ago

You can import it directly without doing a fetch

mkaczor Over a year ago

@LuisGurmendez so can you say me do that?

Ben Steward Over a year ago

Yeah, I read that in your original question. You can’t use fs. Did you read Luis’ answer?

|

Collectives™ on Stack Overflow

Can't add json in reactjs [duplicate]

2 Answers 2

2 Comments

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Linked

Related