Display HTML list from nested python dictionary

Question

I got the following Python dictionary:

d = {'DataType': 'XY', 'DataReportGrp': {'NoSides_1': {'Side': '2', 'Reports': {'NoReportIDs_1': {'ReportID': '250001'}, 'NoReportIDs_2': {'ReportID': '250002'}}}}}

I want to transform it into an HTML list similar to this:

    <li> DataType </li>
    <li> DataReportGrp </li>
    <ul>
       <li> NoSides_1 </li>
       <ul>
          <li> Side </li>
          <li> Reports </li>
          <ul>
             <li> NoReportIDs_1 </li>
             <ul>
                <li> ReportID </li>
             </ul>
             <li> NoReportIDs_2 </li>
             <ul>
                <li> ReportID </li>
             </ul>
          </ul>
       </ul>
    </ul>

I tried to do this with the below code. Unfortunately I do not know what logic to implement to find out when to close the </ul> group at the right time and it might be that this dictionary gets more nested levels in the future:

    def nested_groups(levels):
        groups = list()
    
        def going_through(d):
            if isinstance(levels, dict):
                for kd, kv in d.items():
                    if isinstance(kv, dict):
                        groups.append(kd)
                        print(f" <li> --- {kd} </li>")
                        print(" <ul>")
    
                        going_through(kv)
                    else:
                        print(f" <li> --- {kd} </li>")
    
        going_through(levels)
        print("</ul>" * len(groups))

This results into:


    <li> --- DataType </li>
    <li> --- DataReportGrp </li>
    <ul>
    <li> --- NoSides_1 </li>
    <ul>
    <li> --- Side </li>
    <li> --- Reports </li>
    <ul>
    <li> --- NoReportIDs_1 </li>
    <ul>
    <li> --- ReportID </li>
    <li> --- NoReportIDs_2 </li>
    <ul>
    <li> --- ReportID </li>
    </ul></ul></ul></ul></ul>

Some help would be appreciated.

You can close the ul tag after the recursive call to going_through. — Anson Miu
– Anson Miu, Commented Apr 14, 2021 at 13:18

Ajax1234 · Accepted Answer · 2021-04-14 15:37:09Z

1

You can use a recursive generator function:

d = {'DataType': 'XY', 'DataReportGrp': {'NoSides_1': {'Side': '2', 'Reports': {'NoReportIDs_1': {'ReportID': '250001'}, 'NoReportIDs_2': {'ReportID': '250002'}}}}}
def to_html(d, c = 0):
   for a, b in d.items():
      yield '{}<li>{}</li>'.format('   '*c, a)
      if isinstance(b, dict):
         yield '{}<ul>\n{}\n{}</ul>'.format('   '*c, "\n".join(to_html(b, c + 1)), '   '*c)

print('\n'.join(to_html(d)))

Output:

<li>DataType</li>
<li>DataReportGrp</li>
<ul>
   <li>NoSides_1</li>
   <ul>
      <li>Side</li>
      <li>Reports</li>
      <ul>
         <li>NoReportIDs_1</li>
         <ul>
            <li>ReportID</li>
         </ul>
         <li>NoReportIDs_2</li>
         <ul>
            <li>ReportID</li>
         </ul>
      </ul>
   </ul>
</ul>

edited Apr 14, 2021 at 15:37

answered Apr 14, 2021 at 15:31

Ajax1234

71.7k9 gold badges67 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display HTML list from nested python dictionary

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related