title: Display JSON file data in Flask HTML
body: <p>I am working on a python flask application and would like to display the data from a JSON file onto the html webpage. But when I do so, I loose the JSON structure and the result is not what I expected it to be. I would like the webpage to display the data in a expandable structure. Can I get some help with this?</p>
  <p><strong>JSON Data</strong></p>
  <pre><code>[
     [
        {
           &quot;Name&quot;: &quot;Harold&quot;,
           &quot;ID&quot;: &quot;CX1024&quot;,
           &quot;Job&quot;: &quot;Sales&quot;,
           &quot;Address&quot;: {
              &quot;Street&quot;: &quot;37  Philadelphia Avenue&quot;,
              &quot;Postal Code&quot;: &quot;84010&quot;,
              &quot;City&quot;: &quot;Bountiful&quot;
           },
           &quot;Emergency Contact&quot;: {
              &quot;Person&quot;: &quot;Mark&quot;,
              &quot;Relation&quot;: &quot;Brother&quot;,
              &quot;Phone&quot;: &quot;801-296-4536&quot;
           }
        },
        {
           &quot;Name&quot;: &quot;James&quot;,
           &quot;ID&quot;: &quot;CX1120&quot;,
           &quot;Job&quot;: &quot;Sales&quot;,
           &quot;Address&quot;: {
              &quot;Street&quot;: &quot;671  Lonely Oak Drive&quot;,
              &quot;Postal Code&quot;: &quot;04617&quot;,
              &quot;City&quot;: &quot;BROOKSVILLE&quot;
           },
           &quot;Emergency Contact&quot;: {
              &quot;Person&quot;: &quot;Stephen&quot;,
              &quot;Relation&quot;: &quot;Father&quot;,
              &quot;Phone&quot;: &quot;251-454-0515&quot;
           }
        }
     ],
     [
        {
           &quot;Name&quot;: &quot;Sarah&quot;,
           &quot;ID&quot;: &quot;RJ1020&quot;,
           &quot;Job&quot;: &quot;Management&quot;,
           &quot;Address&quot;: {
              &quot;Street&quot;: &quot;4991  Stoney Lane&quot;,
              &quot;Postal Code&quot;: &quot;75081&quot;,
              &quot;City&quot;: &quot;Richardson&quot;
           },
           &quot;Emergency Contact&quot;: {
              &quot;Person&quot;: &quot;Curtis&quot;,
              &quot;Relation&quot;: &quot;Husband&quot;,
              &quot;Phone&quot;: &quot;972-995-0475&quot;
           }
        },
        {
           &quot;Name&quot;: &quot;Clarkson&quot;,
           &quot;ID&quot;: &quot;RJ1117&quot;,
           &quot;Job&quot;: &quot;Management&quot;,
           &quot;Address&quot;: {
              &quot;Street&quot;: &quot;4663  Kovar Road&quot;,
              &quot;Postal Code&quot;: &quot;02192&quot;,
              &quot;City&quot;: &quot;Needham&quot;
           },
           &quot;Emergency Contact&quot;: {
              &quot;Person&quot;: &quot;Angie&quot;,
              &quot;Relation&quot;: &quot;Sister&quot;,
              &quot;Phone&quot;: &quot;508-578-0498&quot;
           }
        }
     ]
  ]
  
  
  </code></pre>