title: React JS - How do I pass variables (parameters) to the API URL?
body: <p>I have a single page that consist of two dropdown-list components; The page is only accessible upon successful authentication (valid token). Both dropdown-list consumes it's data from different JSON-API's. I have one of the dropdown list functional, but for the other, the URL to it's API requires parameters.</p>
  
  <p><strong>Example URL</strong>:
  <a href="http://buildingsAPI:111/api/buildings/" rel="noreferrer">http://buildingsAPI:111/api/buildings/</a></p>
  
  <p><strong>tested via postman with an id appended</strong>: 
  <a href="http://buildingsAPI:111/api/buildings/abcde-abce-abc2-111-2222" rel="noreferrer">http://buildingsAPI:111/api/buildings/abcde-abce-abc2-111-2222</a></p>
  
  <p>sample Json:</p>
  
  <pre><code>[
      {
          "abc_buildingid": "1111-2222-3333-aaa-1111117",
          "abc_energyprogramid": "abcde-abce-abc2-111-2222",
          "siteName": "Building 1",
          "Available": false,
          "clientName": "Client 1"
      },
      {
          "abc_buildingid": "222-2222-3333-aaa-1111117",
          "abc_energyprogramid": "xyz11-abce-abc2-111-2222",
          "siteName": "Building 2",
          "Available": false,
          "clientName": "Client 2"
      },
  ]
  </code></pre>
  
  <p>...am already obtaining the token upon user authentication (localStorage), but I also need to append/pass the abc_energyprogramid as a parameter to the API URL. </p>
  
  <p>...<strong>the code</strong>:</p>
  
  <pre><code>     constructor(props) {
        super(props);
  
        this.getToken = this.getToken.bind(this);
      }
  
  
  componentDidMount() {
      const bearerToken = this.getToken();
  
      fetch('http://buildingsAPI:111/api/buildings/?myparam1={abc_energyprogramid}', {
       method: 'GET',
       headers: {
                  'Content-type': 'application/json',
                  'Authorization': `Bearer ${bearerToken}`
                },
          })
          .then(results =&gt; results.json())
          .then(buildings =&gt; this.setState({ buildings: buildings }))
        }
  
      getToken() {
          return localStorage.getItem('id_token');
      }
  
      render() {
          console.log(this.state.buildings);
          return(
              &lt;div&gt;
              &lt;select className="custom-select" id="siteName"&gt;
                      { this.state.buildings.map(item =&gt;(
                      &lt;option key={item.siteName}&gt;{item.siteName}&lt;/option&gt;
                      ))
                      }
                  &lt;/select&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>...I currently get an error:" Unhandled Rejection (SyntaxError):unexpected end of JSON input" on this line of the code: .then(results => results.json()). Could I get some help with this please?</p>