Whats wrong with JavaScript console.log in chrome when reading a JSON file
<p>I have a json sample <code>menulist.json</code> (attached in <a href="http://pastebin.com/DbLYWMJ6" rel="nofollow noreferrer">pastebin</a>) that needs to be read in jsavascript. I'm reading file as mentioned in this <a href="https://stackoverflow.com/a/24378510/4881948">answer</a>.</p>

<p>But looks like JavaScript is not reading JSON properly. 
<code>Beverages</code> and <code>Desserts</code> should be under <code>Menu</code>. But it doesn't seem to be happening: 
<a href="https://i.stack.imgur.com/H0mg5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H0mg5.png" alt="JSON IN Chrome Console"></a></p>

<p>Just to verify same json, I pasted that in python shell. It looks like python is reading properly.
<a href="https://i.stack.imgur.com/4oCvY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4oCvY.png" alt="JSON in Python console"></a></p>

<p>Here is my code:
HTML </p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
  ...
  ...
  ...
        &lt;script type="text/javascript" src="menulist.json"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
     &lt;body&gt; 
          ...
          ...
          ...
     &lt;/body&gt;
    &lt;/html
</code></pre>

<p><strong>Note</strong> : It's not about the ordering or sequence. It's about the child objects not appearing under same key. </p>