title: React fetch results in Uncaught (in promise) SyntaxError: Unexpected end of JSON input
body: <p>I'm trying to fetch the results from an API call, store it in a state, and then print it. The results from the fetch print properly in the console... but the browser throws the error.</p>
  
  <pre><code>import React, { Component } from 'react'
  import {Link} from 'react-router'
  import ReactDOM from 'react-dom'
  
  
  class NorthAmerica extends Component{
  
      constructor() {
          super();
          this.state = {jsonData: ""};
      }
  
      componentDidMount() {
          const el = ReactDOM.findDOMNode(this.display);
          var map = new jvm.Map({
              container: jQuery(el),
              map: 'north_america_mill',
              backgroundColor: 'transparent',
              hoverColor: true,
              regionStyle: {
                  initial: {
                      fill: '#245b87'
                  },
                  hover: {
                      fill: "#76c4ea"
                  }
              },
              onRegionClick:function(event, code){
                  var name = map.getRegionName(code);
                  fetch('http://localhost:8080/Search/SearchRestaurants?'
                      + 'searchTerm=' + name + '&amp;location=' + 'toronto').then(response =&gt; {
                      if(response.ok){
                          response.json().then(json =&gt; {
                              this.setState({jsonData: JSON.parse(json)});
                          });
                      }
                      else{
                          this.setState({jsonData: ""});
                      }
                  });
              }
  
          })
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;button id="back"&gt;&lt;Link to="/discover" style={{display: 'block', height: '100%'}}/&gt;&lt;/button&gt;
                  &lt;h1 id="discover_header"&gt;/ NORTH AMERICA&lt;/h1&gt;
                  &lt;div id="map" ref={display =&gt; this.display = display} style={{width: '1000px', height: '700px'}}/&gt;
                  &lt;p&gt; JSON: {this.state.jsonData}&lt;/p&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export class northAmerica extends React.Component{
      render(){
          return(&lt;NorthAmerica/&gt;);
      }
  }
  </code></pre>
  
  <p>The code runs, but when I open it in the browser, I get the following error in the console:</p>
  
  <pre><code>:8080/NorthAmerica:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
  </code></pre>
  
  <p>Very new to react, javascript and all that, so any suggestions would be much appreciated!</p>
  
  <p>Thanks.</p>
  
  <p>EDIT:</p>
  
  <p>The console returns this:</p>
  
  <pre><code>Querying https://api.yelp.com/v2/search?term=Canada&amp;location=toronto&amp;limit=3&amp;cc=CA ...
  {"region": {"span": {"latitude_delta": 0.006146690000008448, "longitude_delta": 0.014174379999985831}, "center": {"latitude": 43.653332250000005, "longitude": -79.3769827}}, "total": 7869, "businesses": [{"is_claimed": false, "rating": 2.0, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-16?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/b561c24f8341/ico/stars/v1/stars_2.png", "review_count": 6, "name": "Canada Post", "rating_img_url_small": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/a6210baec261/ico/stars/v1/stars_small_2.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-16?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4165060911", "snippet_text": "So I bookmarked this place in my mind when I came across it a few days ago running around the historical district maze because I had a lot of postcards I...", "snippet_image_url": "https://s3-media1.fl.yelpcdn.com/photo/b45HAZwX9Y7w_K754EQp6A/ms.jpg", "display_phone": "+1-416-506-0911", "rating_img_url_large": "https://s3-media4.fl.yelpcdn.com/assets/2/www/img/c00926ee5dcb/ico/stars/v1/stars_large_2.png", "id": "canada-post-toronto-16", "is_closed": false, "location": {"city": "Toronto", "display_address": ["595 Bay Street", "Downtown Core", "Toronto, ON M5G 2C2"], "geo_accuracy": 8.0, "neighborhoods": ["Downtown Core"], "postal_code": "M5G 2C2", "country_code": "CA", "address": ["595 Bay Street"], "coordinate": {"latitude": 43.6562119, "longitude": -79.3832626}, "state_code": "ON"}}, {"is_claimed": false, "rating": 3.5, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-5?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s                                                                        3-media1.fl.yelpcdn.com/assets/2/www/img/5ef3eb3cb162/ico/stars/v1/stars_3_half.png", "review_count": 7, "name": "Canada Post", "rating_img_url_small": "https://s3-media1.fl.yelpcdn.com/assets/2/www/img/2e909d5d3536/ico/stars/v1/stars_small_3_half.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-5?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4162142352", "snippet_text": "Although it took me two tries before I actually got to send out my mail.. The first time i went at prime time lunch hour and there were probably 10 people...", "image_url": "https://s3-media4.fl.yelpcdn.com/bphoto/UDknxp5yEtbG23fcb7ktXg/ms.jpg", "snippet_image_url": "https://s3-media4.fl.yelpcdn.com/photo/liY7MzZA_SegCa1hUzwlTg/ms.jpg", "display_phone": "+1-416-214-2352", "rating_img_url_large": "https://s3-media3.fl.yelpcdn.com/assets/2/www/img/bd9b7a815d1b/ico/stars/v1/stars_large_3_half.png", "id": "canada-post-toronto-5", "is_closed": false, "location": {"city": "Toronto", "display_address": ["119 Spadina Avenue", "Downtown Core", "Toronto, ON M5C 1J4"], "geo_accuracy": 9.5, "neighborhoods": ["Downtown Core"], "postal_code": "M5C 1J4", "country_code": "CA", "address": ["119 Spadina Avenue"], "coordinate": {"latitude": 43.6505383, "longitude": -79.3770895}, "state_code": "ON"}}, {"is_claimed": false, "rating": 4.5, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-8?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/99493c12711e/ico/stars/v1/stars_4_half.png", "review_count": 2, "name": "Canada Post", "rating_img_url_small": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/a5221e66bc70/ico/stars/v1/stars_small_4_half.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-8?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4168651833", "snippet_text": "Really love this little place, usually a visit to the post office is an experience I dread as it's usually a test of patience with unhappy surely service...", "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/9pw64sWPH67LF3mb38jQaA/ms.jpg", "snippet_image_url": "https://s3-media1.fl.yelpcdn.com/photo/XhqdU7p7bfdrzq9b9yVv7g/ms.jpg", "display_phone": "+1-416-865-1833", "rating_img_url_large": "https://s3-media4.fl.yelpcdn.com/assets/2/www/img/9f83790ff7f6/ico/stars/v1/stars_large_4_half.png", "id": "canada-post-toronto-8", "is_closed": false, "location": {"city": "Toronto", "display_address": ["260 Adelaide Street E", "Corktown", "Toronto, ON M5A 1N1"], "geo_accuracy": 8.0, "neighborhoods": ["Corktown"], "postal_code": "M5A 1N1", "country_code": "CA", "address": ["260 Adelaide Street E"], "coordinate": {"latitude": 43.65191, "longitude": -79.3705}, "state_code": "ON"}}]}
  </code></pre>