title: Uncaught (in promise) SyntaxError: Unexpected end of JSON input when fetch get data
body: <p>Is there any way to check if the data already fetched or not? Because when I debugged the code it received the below error -</p>
  <blockquote>
  <p>Uncaught (in promise) SyntaxError: Unexpected end of JSON input.</p>
  </blockquote>
  <p>I have already tried to debug and also tried with different api.</p>
  <p>Also when I test APIs in postman I am able to receive the response and from that I can conclude that API is working fine.</p>
  <p>Can anyone correct me and point me where I am doing wrong as I am new to react.</p>
  <p>Below is the code -</p>
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { Table } from 'react-bootstrap';
  import * as Constants from '../constant'
  class ViewUser extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              myJson: [
                  { username: null, createdDate: null, createdBy: null }
              ],
  
          };
  
      }
  
  
      componentDidMount() {
          fetch(Constants.API_URL + 'api/user', {
              method: 'GET',
              headers: {
                  &quot;Authorization&quot;: &quot;Bearer 733a7570-c39a-4fff-99e8-bcc38c1aad58&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;
              }
          })
              .then(function (response) {
                  console.log(response)
                  return response.json();
  
              })
              .then((myJson) =&gt; {
                  this.setState({
                      myJson: myJson
                  });
                  console.log(myJson)
  
              });
  
  
      }
  
      delete = (myJson) =&gt; {
          console.log(myJson)
          const requestOptions = {
              method: 'DELETE',
              headers: {
                  &quot;Authorization&quot;: &quot;Bearer 733a7570-c39a-4fff-99e8-bcc38c1aad58&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;
              }
  
          }
  
          fetch(Constants.API_URL + 'api/authority/' + myJson.authority, requestOptions)
              .then(response =&gt; response.text())
  
      }
  
      edit = (myJson) =&gt; {
          // Do whatever you want
          console.log(myJson)
          // history.push(&quot;/editAuthority&quot;)
          this.props.history.push({
              pathname: 'authority' + &quot;/&quot; + myJson.authority,
              state: { authority: myJson.authority, description: myJson.description }
  
          })
      }
  
      render() {
  
          return (
              &lt;div className=&quot;container-fluid&quot;&gt;
                  &lt;Table striped bordered hover variant=&quot;dark&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;username&lt;/th&gt;
                              &lt;th&gt;createdDate&lt;/th&gt;
                              &lt;th&gt;createdBy&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          {
                              this.state.myJson.map((item, key) =&gt; {
  
                                  return (
  
                                      &lt;tr key={key} &gt;
  
                                          &lt;td&gt;{item.username}&lt;/td&gt;
                                          &lt;td&gt;{item.createdDate}&lt;/td&gt;
                                          &lt;td&gt;{item.createdBy}&lt;/td&gt;
                                          &lt;td&gt;&lt;center&gt;&lt;button className=&quot;btn btn-primary btn-xs&quot; onClick={() =&gt; this.edit(item)}&gt;Edit
                                          &lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
                                          &lt;td&gt;&lt;center&gt;&lt;button className=&quot;btn btn-primary btn-xs&quot; onClick={() =&gt; this.delete(item)}&gt;Delete
                                          &lt;/button&gt;&lt;/center&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  )
  
                              })}
  
                      &lt;/tbody&gt;
                  &lt;/Table&gt;
              &lt;/div&gt;
          );
         }
       }
  
  
  
      export default ViewUser;
  </code></pre>