title: How to use JSON array with template literal?
body: <p>I am learning javascript and using Fetch to retrieve and parse some JSON from a URL. The console logs the JSON array, but when I attempt to use it in a template literal I get an error in the console <code>"positions is not defined"</code>. That is where I am getting hung up as most of the examples and tutorials do not show the JSON formatted the way I am getting it.</p>
  
  <p>How would I access this so I could use it in a template literal how I want to or is there a better way? I do not want to loop through it as I want to be able to place certain values where I need or want them.</p>
  
  <p>Example of code I am working with: </p>
  
  <pre><code>let positionData = new Request('URL_TO_JSON')
  
    fetch(positionData)
      .then(function(response){
          return response.json();
      })
      .then(function(json){
  
          document.getElementById('online').innerHTML = `THERE ARE CURRENTLY ${positions.lenght} CHASERS LIVE`;
  
          document.getElementById('name').innerHTML = `${positions[0].name}`;
  
          console.log(json)
      })
      .catch(function(err) {
          console.log(`Error: ${err}` )
        });
  </code></pre>
  
  <p>In the console, it displays the JSON array as follows: </p>
  
  <pre><code>{positions: Array(2)}
  positions: Array(2)
  0: {report_at: "2019-04-26 20:29:29", lat: "33.0851707", lon: "-96.8177032", elev: "0", dir: "0", …}
  1: {report_at: "2019-04-26 05:07:29", lat: "33.0173721", lon: "-96.5511093", elev: "0", dir: "0", …}
  length: 2
  __proto__: Array(0)
  __proto__: Object
  </code></pre>
  
  <p>According to the tutorials and videos I have been watching it shows all I need to do is this and I think this is where my problem is because of how the JSON is prefixed with <code>Positions</code>.  </p>
  
  <pre><code>document.getElementById('name').innerHTML = `${positions[0].name}`;
  </code></pre>
  
  <p>But I get "positions is not defined" error in the console. </p>