Can't add json in reactjs


(Mkaczor75) #1

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