title: How do I solve, "Uncaught SyntaxError: Unexpected token l in JSON at position 0 ...?"
body: <p>I am testing pulling in API weather data (open weather map.org) with JavaScript and XMLHttpRequest. I am using Github pages as my test site. I need JSON.parse to turn the info. into a JS object, but JSON.parse is always an issue. I have been struggling with this error message: </p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token l in JSON at position 0
  at JSON.parse (&lt;anonymous&gt;)
  at data.weather.forEach.weather (scripts.js:29)
  at Array.forEach (&lt;anonymous&gt;)
  at XMLHttpRequest.request.onload (scripts.js:22)
  </code></pre>
  
  <p>I read on several support threads that it was a server side error and to look in the network tab -- I did and everything has a 200 status!? I also read on multiple threads that it meant that JSON was not being returned. But either there is no mention of how to remedy this or I have no clue what they are talking about. I am new to this and have been stuck with error messages for weeks. I am the only developer at my startup and need to solve this soon. Any guidance would be greatly appreciated.</p>
  
  <p><strong>scripts.js:</strong></p>
  
  <pre><code>// Whole-script strict mode syntax
  'use strict';
  const app = document.getElementById("root");
  
  const logo = document.createElement("img");
  logo.src = "logo.png";
  
  const container = document.createElement("div");
  container.setAttribute("class", "container");
  
  app.appendChild(logo);
  app.appendChild(container);
  
  var request = new XMLHttpRequest();
  request.open("GET", "https://api.openweathermap.org/data/2.5/weather? 
      q = London &amp; APPID = 3190 b3e074868b6189a94a8795afa8a2 ", true);
      request.onload = function() {
  
        // Begin accessing JSON data here
        'use strict';
        var data = JSON.parse(this.response);
        if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
          data.weather.forEach(weather =&gt; {
            const card = document.createElement("div");
            card.setAttribute("class", "card");
            const h1 = document.createElement("h1");
            h1.textContent = weather.title;
  
            const p = document.createElement("p");
            weather.description = JSON.parse(weather.description).substring(0, 300);
            p.textContent = `${weather.description}...`;
  
            container.appendChild(card);
            card.appendChild(h1);
            card.appendChild(p);
          });
        } else {
          const errorMessage = document.createElement("marquee");
          errorMessage.textContent = `Hug it, it's not working!`;
          app.appendChild(errorMessage);
        }
      }
  
      request.send();
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;title&gt;You are Techy Job Listings&lt;/title&gt;
  
    &lt;link href="https://fonts.googleapis.com/css?family=Dosis:400,700" 
     rel="stylesheet"&gt;
    &lt;link href="style.css" rel="stylesheet"&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  </code></pre>
  
  <p><strong>style.css:</strong></p>
  
  <pre><code>* {
    box-sizing: border-box
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Dosis', sans-serif;
    line-height: 1.6;
    color: #666;
    background: #F6F6F6;
  }
  
  #root {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    text-align: center;
    padding: 1.5rem 2.5rem;
    background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 0 2rem 0;
    font-size: 1.5rem;
    color: white;
  }
  
  p {
    padding: 0 2.5rem 2.5rem;
    margin: 0;
  }
  
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .card {
    margin: 1rem;
    background: white;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 12px;
    overflow: hidden;
    transition: all .2s linear;
  }
  
  .card:hover {
    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
    transform: translate3D(0, -2px, 0);
  }
  
  @media screen and (min-width: 600px) {
    .card {
      flex: 1 1 calc(50% - 2rem);
    }
  }
  
  @media screen and (min-width: 900px) {
    .card {
      flex: 1 1 calc(33% - 2rem);
    }
  }
  
  .card:nth-child(2n) h1 {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  }
  
  .card:nth-child(4n) h1 {
    background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  .card:nth-child(5n) h1 {
    background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);
  }
  </code></pre>