React JS Unexpected end of JSON input error when binding data from an API

Question

I have a select-dropdown-list, it's data is generated from a API/json file. The json resembles the following:

[
    {
        "id": 444,
        "ggg_progid": "0000-111-222-333-44444",
        "clientName": "client 1- aaa-bb-01-05 - AA"
    }
]

...but I get the error, Unhandled Rejection (SyntaxError): Unexpected end of JSON input, when I run my code using a particular url for the API/json file. So when I copy the code from the API and paste it into myjson.com, then use the url provided by myjson.com, my code works fine.

What could the problem be, both API's have the same json syntax?

Just in case, I provided the code below:

import React, { Component } from 'react';

class Ast extends Component {

   constructor(){
       super();
       this.state = {
           data: [],
       };
   } //end constructor

    componentDidMount() {
        fetch('http://myapi/:1234/api/clients', {
            method: 'GET',
            headers: {
                'Content-type': 'application/json',
                'Authorization': 'Bearer abc123def.abc123def.abc123def'
            },
        })
        .then(results => results.json())
        .then(data => this.setState({ data: data }))
    }

    render() {
    console.log(this.state.data);
    return (
    <div>
        <div className="container">
            <form>
            <h2>Memeber Selection:</h2>
            <div>
                {
                    this.state.data.map(item =>(
                        <div>
                            <select className="custom-select" id="clientName">>
                            <option key={item.clientName}>{item.clientName}</option>
                            </select>
                        </div>
                    ))
                }
            </div>
            <div>
            <button type="submit" className="btn btn-primary">Submit</button>
            </div>
            </form>
        </div> 
    </div>
        );
      }
}

export default Ast

I took the failing URL and pasted it into postman, and it renders results. Any ideal why an error is generated when I use the url in my code?

yes, ...and I notice a 404 error is return (url not found), however, when process the URL using postman (bearer token selected); I get results from the API. ...Any suggestion? — user1724708
– user1724708, Commented May 11, 2018 at 16:06
@ionizer, I was wondering, when processing the url via Postman, I entered a bearer token generated from the a previous API, could the issue be, that I need to pass a token in my code? — user1724708
– user1724708, Commented May 11, 2018 at 16:21

Nick Prozee · Accepted Answer · 2018-05-11 17:12:02Z

2

Your Auth header is wrong

Change

'Authorization': 'abc123def.abc123def.abc123def'

To

'Authorization': 'Bearer abc123def.abc123def.abc123def'

answered May 11, 2018 at 17:12

Nick Prozee

2,9234 gold badges27 silver badges49 bronze badges

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

Comments

Nick Prozee · Accepted Answer · 2018-05-11 15:50:56Z

1

Try changing the following

[
    {
        "id": 444,
        "ggg_progid": "0000-111-222-333-44444",
        "clientName": "client 1- aaa-bb-01-05 - AA"
    }
]

to

{
  [
      {
        "id": 444,
        "ggg_progid": "0000-111-222-333-44444",
        "clientName": "client 1- aaa-bb-01-05 - AA"
      }
  ]
}

answered May 11, 2018 at 15:50

Nick Prozee

2,9234 gold badges27 silver badges49 bronze badges

8 Comments

user1724708 Over a year ago

Thanks for the quick reply, unfortunately, I do not have direct access to the API, (The API was provided by another). Is there anything I can do in my code?

user1724708 Over a year ago

I was wondering, when processing the url via Postman, I entered a bearer token generated from the a previous API, could the issue be, that I need to pass a token in my code?

Nick Prozee Over a year ago

You need to pass access token for sure, yes

user1724708 Over a year ago

I modified the code I posted; I implemented a GET method into the fetch statement and where I have authorization, I entered a token that was generated from postman, but I still get the same error. I'm new to API consumption; could you take a look at my code and let me know what am doing wrong?

Nick Prozee Over a year ago

Add bearer to authorization header. I posted new answer

|

Collectives™ on Stack Overflow

React JS Unexpected end of JSON input error when binding data from an API

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest