1

My JSX file returns the API data when accessed from myjson.com; but when I attempt to access the data from the provided URL for the API, I get an "Unhandled Rejection -SyntaxError- Unexpected end of JSON input" error. The provided URL, when placed into Postman, returns data via GET when a Bearer Token is provided.

My question: does that same token have to be implemented within my JSX file in order to access the data for the API and if so, how is that implemented within the code?

This is my Code (modified):

import React, { Component } from 'react';
import {render} from "react-dom";
import Navbar from '../components/Navbar.jsx';
import Footer from '../components/Footer.jsx';
import './MemberInfo.css';

class MemberInfo extends Component {

    state = { data: [] }

    componentWillMount(){
        fetch('http://myjson.com/api/e312j/', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
        }


        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    render() {
        console.log(this.state.data);
        return (
            <div>
                <Navbar />
                <div className="container">
                     <div className="clientContainer">
                            {
                                this.state.data.map( item =>( 
                                <div>
                                    {item.clientName}
                                </div>
                                ))
                            }
                        </div> 
            </div> 
            <Footer /> 
          </div>
        );
      }
}

export default MemberInfo;

I'm still new when it comes to using ReactJS to fetch API data; could I get some help with this please?

user1724708
  • 1,409
  • 7
  • 31
  • 53
  • Not sure where this is coming from, your code works fine for me [here](https://stackblitz.com/edit/react-gtazhd). – Colin Ricardo Apr 27 '18 at 20:55
  • Colin, yes, but when I replace the fetch url with: http://crg-app-dev:43253/api/clients/ ...I get the error. Anything comes to mind as what I need to do to resolve the issue? – user1724708 Apr 27 '18 at 21:08
  • Are you sure that link returns anything? – Colin Ricardo Apr 27 '18 at 21:15
  • yes, when I placed http://crg-app-dev:43253/api/clients into PostMan, it returns the data via GET and by providing a Bearer Token. – user1724708 Apr 27 '18 at 21:17
  • 1
    Ah, since it doesn't work in the browser you'll have to add the bearer token to your `fetch()`. – Colin Ricardo Apr 27 '18 at 21:22
  • Colin - I modified the code to include the token, but I still get the error (only when I use the provided URL). Any other ideals? thanks! – user1724708 Apr 27 '18 at 21:33
  • What do you mean by the provided URL? – Colin Ricardo Apr 27 '18 at 21:42
  • Colin - the provided URL is the original URL for the API / json file; Iplaced it over – user1724708 Apr 28 '18 at 12:46
  • Colin - the provided URL is the original URL (http://crg-app-dev:43253/api/clients/) I was using to access the API / json file; After using postman to confirm that the original API was returning data, I used that url in my code, and that's when i get the error. I took the data and placed it into myjon.com and when I use the url generated by myjon.com, the code works. I pasted the token (see modified code) and went back and tried the original url, but it errors out still. – user1724708 Apr 28 '18 at 12:56
  • Yes, you're probably just passing the token incorrectly. – Colin Ricardo Apr 28 '18 at 14:02
  • Based on the modification I applied in the code above, does there appear to be an issue in my syntax (where am passing the token)? – user1724708 Apr 28 '18 at 14:08
  • Here's an example: https://stackoverflow.com/questions/30203044/using-an-authorization-header-with-fetch-in-react-native – Colin Ricardo Apr 28 '18 at 14:36

0 Answers0