-1

I did a fair amount of google searching but didn't find a suitable answer for someone who would like take arbitrarily nested JSON, for example from an API response, and display it as an unordered list using HTML using python.

Ultimately, the issue was solved with a fairly short recursive function.

Here's an example of the type of input I was dealing with:

{
  "_id": "61dc4e9130473a8465a11cd0",
  "index": 0,
  "guid": "a2a7e550-8bf4-4be5-b0e0-2b124a2ca7e1",
  "isActive": false,
  "balance": "$1,011.28",
  "picture": "http://placehold.it/32x32",
  "age": 25,
  "eyeColor": "green",
  "name": "Monique Dickerson",
  "gender": "female",
  "company": "AQUASURE",
  "about": "Dolore dolor excepteur tempor excepteur nulla occaecat Lorem dolor cillum sint velit. Minim labore irure ea anim duis in enim laboris. Aute amet ut sunt ea. Do irure sint commodo ea id. Amet dolore culpa anim irure ipsum est labore nostrud irure.\r\n",
  "registered": "2015-12-15T11:10:14 +05:00",
  "latitude": -63.913924,
  "longitude": -21.554531,
  "tags": [
    "eiusmod",
    "dolore",
    "pariatur",
    "in",
    "ipsum",
    "Lorem",
    "adipisicing"
  ]
}

Here was the desired output:

  • _id: 61dc4e9130473a8465a11cd0
  • index: 0
  • guid: a2a7e550-8bf4-4be5-b0e0-2b124a2ca7e1
  • isActive: False
  • balance: $1,011.28
  • picture: http://placehold.it/32x32
  • age: 25
  • eyeColor: green
  • name: Monique Dickerson
  • gender: female
  • company: AQUASURE
  • about: Dolore dolor excepteur tempor excepteur nulla occaecat Lorem dolor cillum sint velit. Minim labore irure ea anim duis in enim laboris. Aute amet ut sunt ea. Do irure sint commodo ea id. Amet dolore culpa anim irure ipsum est labore nostrud irure.\r\n
  • registered: 2015-12-15T11:10:14 +05:00
  • latitude: -63.913924
  • longitude: -21.554531
  • tags:
    • eiusmod
    • dolore
    • pariatur
    • in
    • ipsum
    • Lorem
    • adipisicing
Kyle
  • 321
  • 1
  • 14

1 Answers1

0

I was able to solve the problem successfully with this bit of code:

items = []
def render(json_data, v=""):
    if isinstance(json_data, dict):
        items.append(f"<ul>")
        for k2, v2 in json_data.items():
            render(k2 ,v2) # <---If we have a dict, apply function again
        items.append(f"</ul>")
    elif isinstance(v, dict):
        items.append(f"<li>{json_data}: <ul>")
        for k2, v2 in v.items():
            render(k2 ,v2) # <---If we have a dict, apply function again
        items.append("</ul></li>")
    elif isinstance(v, list):
        items.append(f"<li>{json_data}:<ul>")
        for i in v:
            if isinstance(i, str):
                items.append(f"<li>{i}</li>")
            elif isinstance(i, dict):
                render(i, v)
        items.append("</ul></li>")
    else:
        items.append(f"<li>{json_data}: {v}</li>")

render(data)
html_str = "".join(items)
html_str
Kyle
  • 321
  • 1
  • 14