Unable to Find Solution: JSON.parse: unexpected end of data at line 1 column 1

Keywords´╝Ü javascript api http

Question: 

I'm trying to build a basic React application that reaches out to an API to fetch quotes. The 'GET' request returns a string, however, when I try to parse that string to JSON is when I receive the error.

Here's my function making the request:

const httpCallout = () => {
  const Http = new XMLHttpRequest();

  const endpoint = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
  Http.open("GET", endpoint, true);
  Http.send();
  let reply = "";

  Http.onreadystatechange = (e) =>{
      console.log(JSON.parse(Http.response));
      //console.log(Http.response);
  }
  return reply;
}

and the parsed response from the server:

[
  {
    "ID": 1286,
    "title": "Adrian Shaughnessy",
    "content": "<p>Graphic design has been likened to a wine glass. When we drink wine we barely notice the glass it&#8217;s served in. It wouldn&#8217;t be true to say that we don&#8217;t care what glass we drink out of &#8211; we wouldn&#8217;t choose to drink a rare vintage out of a Tupperware mug, for example &#8211; but it&#8217;s the wine that matters, not the vessel it comes in.   </p>\n",
    "link": "https://quotesondesign.com/adrian-shaughnessy/",
    "custom_meta": {
      "Source": "<a href=\"http://observatory.designobserver.com/entry.html?entry=7257\">transcript</a>"
    }
  }
]

I'm also looking for non-jQuery responses. Again, the full error the console is throwing is: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data and giving the error at the line console.log(JSON.parse(Http.response));

Answers: