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",
"birth_city": "Ottawa",
"native_country": "Canada",
"year_of_birth": "1997",
"citizenship": "Canadian",
"address": {
"address1": "25 rue de la Republique",
"city": "Paris",
"phone": "+33 6 42 57 34 56",
"country": "France",
"zip": "75012",
"country_code": "Fr",
"country_name": "France"
},
"relationship_manager": "manager of robotech",
"product_and_option": {
"product": "360 camera",
"payments": "monthly report on paper",
"assets_discretionary": "e-access",
"beneficialOwner": {
"Rpger": "1994",
"Phil": "1988"
}
}
},
{
"id": "smith",
"first_name": "John",
"last_name": "Smith",
"rank":"2",
"birth_city": "Pretoria",
"native_country": "South_Africa",
"year_of_birth": "1995",
"citizenship": "South_African",
"address": {
"address1": "1 Rue des Carrieres",
"address2": "Suite 1234",
"city": "Montreal",
"phone": "819-555-5555",
"province": "Quebec",
"country": "Canada",
"zip": "G1R 4P5",
"province_code": "QC",
"country_code": "CA",
"country_name": "Canada"
},
"relationship_manager": "manager of luxury watch",
"product_and_option": {
"product": "luxury watch",
"payments": "monthly report on paper",
"assets_discretionary": "e-access",
"beneficialOwner": {
"John": "1995",
"Phil": "2001"
}
}
}
]*/
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>
<h1> {person.first_name} </h1>
<h1>{person.last_name}</h1>
<h1>{person.birth_city}</h1>
<h1>{person.year_of_birth}</h1>
<h1>{person.citizenship}</h1>
<h1>{person.address.address1}</h1>
</div>
)
}
</div>
);
}
}
export default App;
Thank for Help
with
by
