2

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?

JSON Data

[
   [
      {
         "Name": "Harold",
         "ID": "CX1024",
         "Job": "Sales",
         "Address": {
            "Street": "37  Philadelphia Avenue",
            "Postal Code": "84010",
            "City": "Bountiful"
         },
         "Emergency Contact": {
            "Person": "Mark",
            "Relation": "Brother",
            "Phone": "801-296-4536"
         }
      },
      {
         "Name": "James",
         "ID": "CX1120",
         "Job": "Sales",
         "Address": {
            "Street": "671  Lonely Oak Drive",
            "Postal Code": "04617",
            "City": "BROOKSVILLE"
         },
         "Emergency Contact": {
            "Person": "Stephen",
            "Relation": "Father",
            "Phone": "251-454-0515"
         }
      }
   ],
   [
      {
         "Name": "Sarah",
         "ID": "RJ1020",
         "Job": "Management",
         "Address": {
            "Street": "4991  Stoney Lane",
            "Postal Code": "75081",
            "City": "Richardson"
         },
         "Emergency Contact": {
            "Person": "Curtis",
            "Relation": "Husband",
            "Phone": "972-995-0475"
         }
      },
      {
         "Name": "Clarkson",
         "ID": "RJ1117",
         "Job": "Management",
         "Address": {
            "Street": "4663  Kovar Road",
            "Postal Code": "02192",
            "City": "Needham"
         },
         "Emergency Contact": {
            "Person": "Angie",
            "Relation": "Sister",
            "Phone": "508-578-0498"
         }
      }
   ]
]
Gara
  • 21
  • 3

1 Answers1

0

There are two things I would recommend.

Firstly, you need to "stringify" your JSON object (to get that nice formatting you have above). From this answer, the way to do that is, using JavaScript:

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

(Note JSON.stringify(...) is unavailable in some versions of IE. Theoretically, you could also do this with Python and send a "raw" string... but sending JSON makes a lot more sense; let the frontend handle formatting.)

Next, you need the right HTML tags to render the string. You need <pre> to preserve the whitespace ("pre" means "preformatted") and you might want <code> as well.

<html>
 <body>
  <pre>
   <code>
   { 
       foo: "sample", 
       bar: "sample" 
   }
   </code>
  </pre>
 </body>
</html>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Michael DeMarco
  • 28
  • 1
  • 5
  • The JSON is a local file, will it work for that? – Gara Apr 18 '21 at 23:11
  • Sure, you'll just have to read in the JSON file and spit the data to your FE. If it's just a local file, you might be able to just directly include it on the frontend as well. – Michael DeMarco Apr 19 '21 at 16:58