Unable to fetch data from local json file by axios

Question

I am using axios library for fetching data from the local json file but when i make get request it gives me error 404 not found. Here is my file structure.

and i am using this code for fetching the data.

  import React from 'react';
import axios from 'axios';
class Login extends React.Component{
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { username: null, password: null };
  }

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=e.target.username.value;
   var password=e.target.password.value;
   axios.get('../data.json')
   .then((res)=>{
     console.log(res.data);
   }).catch((err)=>{
     console.log(err);
   })

 }

  render(){

    return(
      <form onSubmit={this.handleSubmit}>
      <input id="username" name="username" type="text" />
      <input id="password" name="password" type="text" />
      <button>Login!</button>
      </form>
    );
  }
}

export default Login;

How do i solve this issue??

Some ideas: 1) Have you tried with the full path? 2) Have you tried putting your JSON in the public folder? 3) You can also simply import you JSON file if you're using webpack (>= 2.0 I believe). Tell me if anything works :) EDIT: Didn't see @underscore's answer below. Seems that the public folder was the solution. — Clafouti
– Clafouti, Commented Sep 29, 2018 at 15:56

underscore · Accepted Answer · 2018-09-29 15:54:29Z

29

If you created this file structure using create-react-app command you have to add your json files into public folder. then change your axios path like bellow

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=e.target.username.value;
   var password=e.target.password.value;
   axios.get('./data.json')
   .then((res)=>{
     console.log(res.data);
   }).catch((err)=>{
     console.log(err);
   })

answered Sep 29, 2018 at 15:54

underscore

6,9277 gold badges44 silver badges82 bronze badges

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

Comments

monika · Accepted Answer · 2021-02-27 06:02:28Z

Are you running the JSON file on the server. Try this command.

json-server -w -p 3001 data.json - runs on port 3001

import React from 'react';
import axios from 'axios';
class Login extends React.Component{
  constructor(){
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {username: null, password: null };
  }

 handleSubmit = (e)=>{
   e.preventDefault();
   var username=this.refs.username.value;
   var password=this.refs.password.value;
   
    axios.get('../data.json')
    .then((res)=>{
     console.log(cb(res.data));//included the call back method
    }
    ).catch((err)=>{
     console.log(err);
    }
    )
    }

  render(){
      return(
      <form>
      <input ref="username" type="text" />
      <input ref="password" type="text" />
      <input type="submit" value="Login" onClick={this.handleSubmit} />
      </form>
    );
  }
}

export default Login;

Hope this works, tried and tested

Collectives™ on Stack Overflow

Unable to fetch data from local json file by axios

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related