Rails API not returning JSON to React frontend

Question

I have written a Rails API backend. I can see that the endpoint is getting hit by watching my server in my terminal. I can also see a return in Postman. However, I am unable to get a payload returned in my React frontend. Here is my fetch call in React(I have the debuggers in there but they're not getting hit):

  handleSearch(video) {
   fetch(`http://localhost:3000/api/v1/search?q=${video}`)
    .then((response) => {
      debugger
      return response.json()
    })
    .then((data) => {
      debugger
    })
  }

Here is my api controller:

def index
    videos = VideoService.search_content(params['q'])
    render json: videos
  end

And here's my output in my terminal server:

Started GET "/api/v1/search?q=Firefly" for 127.0.0.1 at 2017-12-28 11:40:38 -0700
Processing by Api::V1::SearchController#index as */*
  Parameters: {"q"=>"Firefly"}
Completed 200 OK in 426ms (Views: 7.5ms | ActiveRecord: 0.0ms)

I'm not really sure what the problem is. I have never had an issue before when making api requests. And like I said. I can see the server being interacted with and can see a payload return in Postman. Thanks for any help!

EDIT: Here is how I'm calling the handleSearch on the way down:

<SideBar
        info={this.state.info}
        logout={this.handleLogout.bind(this)}
        search={this.handleSearch.bind(this)}
       />

And here it is being called in the SideBar component:

searchHandler(video) {
    this.props.search(video)
  }

        <SearchBox search={this.searchHandler.bind(this)}/>

And finally where the input is actually coming in:

 handleSearch(e){
    let video = e.target.previousSibling.value
    this.props.search(video)
  }

  render() {
    return(
      <form className="search-box" >
      <input type="text" placeholder="Search.." name="search"/>
      <button className="fa fa-search" type="submit" onClick={this.handleSearch.bind(this)}>
      </button>
      </form>
    )
  }

Have you seen any errors in the console? If you're getting a payload with Postman and your controller action is returning 200, it seems like the error could be coming from your JavaScript somewhere. Everything else seems ok to me. — Derek Hopper
– Derek Hopper, Commented Dec 28, 2017 at 18:49
I pass the handleSearch in props to the button/input field in another components, which then returns the search term to this function. @PatrickHund — Int'l Man Of Coding Mystery
– Int'l Man Of Coding Mystery, Commented Dec 28, 2017 at 18:53
Try adding a catch method call to your fetch result and see if the debugger hits that — Patrick Hund
– Patrick Hund, Commented Dec 28, 2017 at 18:58
@DerekHopper nope, still no hits. I got excited there for a second, :P — Int'l Man Of Coding Mystery
– Int'l Man Of Coding Mystery, Commented Dec 28, 2017 at 19:01

Int'l Man Of Coding Mystery · Accepted Answer · 2017-12-28 20:40:13Z

1

Missing e.preventDefault() I'm new to React and thought it was handled behind the scenes by React.

answered Dec 28, 2017 at 20:40

Int'l Man Of Coding Mystery

1,7122 gold badges16 silver badges36 bronze badges

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

1 Comment

Patrick Hund Over a year ago

Ah, interesting, I may have stumbled into that trap sooner or later myself 😀

Collectives™ on Stack Overflow

Rails API not returning JSON to React frontend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related