ReactJS - How to migrate from json-server to a .json file?

Question

I have this db.json and I want to migrate to file. How do I implement it? I had tried this way above and it didn't work for me. When I put the file in src folder, there appears an error message:

Module not found: Can't resolve 'houses.json' in 'C:\Users\user\Desktop\dir\src'

It does the same thing when I put the file in the public folder.

It is my db.json file:

 {   "houses": [
     {
       "id": 1,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
      ]
     },
     "houses": [
     {
       "id": 2,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
       ]
     },
     "houses": [
     {
       "id": 3,
       "name": "Title here",
       "text": "Text here",
       "photos": [
         "pic1",
         "pic2",
         "pic3"        
       ]
     } 
 }

I had traded this line

const URL = 'http://localhost:3001/houses';

for this other

 const URL = require('houses.json');

And it caused the error message showed before.

And how do I fetch these datas from axios? I was fetching datas from json-server doing this way below. It was successfully. I want to do the same thing but not from json-server but using .json file.

const URL = 'http://localhost:3001/houses';

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: [],
      currentHouse: [],
      name: [],
      photos: [],
      text: []
    };
  }

  componentDidMount() {
    axios.get(URL)
      .then(res => {
        this.setState({
          totalHouses: Object.keys(res.data),
          currentHouse: res.data
        })
      })
  }

//...rest of the code omitted

Piotr Szlagura · Accepted Answer · 2019-02-20 12:38:55Z

Here's a simple example how to achieve what you need, while preserving your state approach.

const houses = require('./houses.json');

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: [],
      currentHouse: [],
      name: [],
      photos: [],
      text: []
    };
  }

  componentDidMount() {
    this.setState({
      totalHouses: Object.keys(houses.data),
      currentHouse: houses.data
    })
  }

  //...

}

You can also achieve it without componentDidMount:

const houses = require('./houses.json');

class House extends Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      totalHouses: Object.keys(houses.data),
      currentHouse: houses.data
      name: [],
      photos: [],
      text: []
    };
  }

  //...

}

Piotr Szlagura · Accepted Answer · 2019-02-20 12:00:06Z

0

It should be require('./houses.json');. Right now it looks for this file inside node_modules or even higher.

answered Feb 20, 2019 at 12:00

Piotr Szlagura

6725 silver badges18 bronze badges

13 Comments

claudiopb Over a year ago

It didn't work. The error messages disappear but it didin't render nothing on the screen

Piotr Szlagura Over a year ago

If you store your houses.json file inside your project, you have to require it using relative path, from the file you are requiring it in. If you require without ./ (or maybe ../../directory/with/file/file.json), it will be treated like npm package. Just like you would do const _ = require('underscore') - notice there is no ./ here.

claudiopb Over a year ago

I put this file one into the 'src' folder and another into 'public' folder

claudiopb Over a year ago

it is inside my project

Piotr Szlagura Over a year ago

By the way, if you require your houses via a file, you don't have to use axios any more. So just do const houses = require('./houses.json') and use houses the same as you would use axios response.

|

Collectives™ on Stack Overflow

ReactJS - How to migrate from json-server to a .json file?

2 Answers 2

Comments

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related