title: processing json with fetch returns undefined for valid json key
body: <p>I need to request data from my REST server to populate my UI (frontend). In doing so, I need to request some data from my and other servers. One such request is to get a list of states (provinces), process each one and add them to a <code>select</code> HTML component. I use <a href="https://stackoverflow.com/a/37663899/4628115">fetch()</a> and <a href="https://stackoverflow.com/a/37664206/4628115">.json()</a> amongst other tools to do this.</p>
  <p><strong>Problem:</strong></p>
  <p>In calling my REST server for json data, I receive the following data (taken from Chrome console):</p>
  <pre><code>{provinces:[Eastern Cape,Mpumalanga,Western Cape,Gauteng,KwaZulu Natal,North West,Northern Cape,Free 
  State,Limpopo]}
  </code></pre>
  <p>I intend to add each of these as an option to a <code>select</code>. While attempting to acquire the value for the <code>provinces</code> key, I get <code>undefined</code>.</p>
  <p>I am making this call using:</p>
  <pre><code>fetch(&quot;http://localhost:3443/app/location/provinces&quot;).then(e =&gt; e.json()).then(e =&gt; console.log(e.provinces));
  </code></pre>
  <p>Further, since I can directly refer to json keys using the <code>[]</code> operator, I attempt this using</p>
  <pre><code>fetch(&quot;http://localhost:3443/app/location/provinces&quot;).then(e =&gt; e.json()).then(e =&gt; console.log(e['provinces']));
  </code></pre>
  <p>which as you may have guessed aswel, also returns undefined.</p>
  <p>For the record, the full Chrome Console output is</p>
  <pre><code>Promise {&lt;pending&gt;}
  undefined
  </code></pre>
  <p>Looking over some SO examples, I believe my call(s) may be correct, this <a href="https://stackoverflow.com/a/37121496/4628115">one</a>, and <a href="https://stackoverflow.com/a/37664029/4628115">this</a> one, and <a href="https://stackoverflow.com/a/48842213/4628115">this</a> one all which confirm its validity.</p>
  <p><strong>What else have I tried:</strong></p>
  <p>This <a href="https://stackoverflow.com/a/37663899/4628115">SO post</a> and <a href="https://stackoverflow.com/a/37664206/4628115">this one</a> suggested to use the json data response inside of the same <code>then()</code> call e.g.</p>
  <pre><code>fetch(&quot;http://localhost:3443/app/location/provinces&quot;).then(e =&gt; {
      e.json().then(s =&gt; {
          console.log(s['provinces']);
   });
  });
  </code></pre>
  <p>and</p>
  <pre><code>fetch(&quot;http://localhost:3443/app/location/provinces&quot;).then(e =&gt; {
      e.json().then(s =&gt; {
          console.log(s.provinces);
   });
  });
  </code></pre>
  <p>both which return:</p>
  <pre><code>Promise {&lt;pending&gt;}
  undefined
  </code></pre>
  <p><strong>What am I missing / doing wrong?</strong></p>
  <hr />
  <p><strong>Update</strong></p>
  <p>Screenshot of Chrome console in order of commands listed above:</p>
  <p><a href="https://i.stack.imgur.com/3uChq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3uChq.png" alt="enter image description here" /></a></p>
  <p><strong>Resource file</strong> <a href="https://github.com/dirkstrauss/SouthAfrica/blob/master/SouthAfricanCities.json" rel="nofollow noreferrer">za-province-city.json</a></p>
  <p><strong>NodeJS express code:</strong></p>
  <pre><code>const express = require('express');
  const router = express.Router();
  const fs = require('fs');
  const raw = fs.readFileSync(&quot;./res/za-province-city.json&quot;);
  const map = JSON.parse(raw);
  const mapProvinceCity = {};
  map.forEach(item =&gt; {
      if (!mapProvinceCity.hasOwnProperty(item.ProvinceName)) {
          mapProvinceCity[item.ProvinceName] = [];
      }
      mapProvinceCity[item.ProvinceName].push(item.City);
  });
  for (let key in mapProvinceCity) {
      mapProvinceCity[key].sort((a, b) =&gt; a.toLocaleString().localeCompare(b.toLowerCase()));
  }
  
  router.get('/location/provinces', function (req, res, next) {
      let strings = Object.keys(mapProvinceCity);
      let json = JSON.stringify({provinces: strings}).replace(/&quot;/g, '');
      return res.json(json);
  });
  
  router.get('/location/:province/cities', function (req, res, next) {
      let province = req.param('province');
      let cities = mapProvinceCity[province];
      let json = JSON.stringify({cities: cities}).replace(/&quot;/g, '');
      return res.json(json);
  });
  
  module.exports = router;
  </code></pre>
  <p>Note: if you are wondering about the <code>replace()</code>, each time I requested data in postman, I got</p>
  <p><a href="https://i.stack.imgur.com/OP8CI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OP8CI.png" alt="enter image description here" /></a></p>