How do I convert a list containing OrderedDicts into a HTML table?

Question

I have a list containing several OrderedDict objects, that looks like this:

[OrderedDict([('Name', 'Soytra'), ('Class', 'First'), ('Number', '23768'), ('Place', 'NY'), ('Place1', 'LA'), ('Grade', 16.6038)]), OrderedDict([('Name', 'Reuhyta'), ('Class', 'First'), ('Number', '23769'), ('Place', 'NY'), ('Place1', 'LA'), ('Grade', 23.56789)])]

I'd like to convert that list into the following HTML table, like below:

INFO: I have already used Pandas, would like to see some other solution

Clarify what you mean by *"table"* are you talking about a HTML table or a text table? — Malekai, May 01 '19 at 09:22
Maybe this might help? https://stackoverflow.com/questions/1475123/easiest-way-to-turn-a-list-into-an-html-table-in-python — Devesh Kumar Singh, May 01 '19 at 09:25

Malekai · Accepted Answer · 2019-05-01T09:48:42.797

You don't even have to import anything! This is such a simple task that you could use lists and strings to get the same result.

All you have to do is convert the OrderedDict objects into python lists:

keys, rows = [], []
for sub_dict in ordered_items:
  row = []
  for key in sub_dict:
    if key not in keys:
      keys.append(key)
    row.append(sub_dict[key])
  rows.append(row)

Then converted those lists into a HTML table string:

thead = "<thead><tr>{}</tr></thead>".format("".join(map(lambda key: "<th>{}</th>".format(key), keys)))
tbody = "<tbody>"
for row in rows:
  tbody += "<tr>{}</tr>".format("".join(map(lambda value: "<td>{}</td>".format(value), row)))
tbody += "</tbody>"

Then when you print the concatenated strings, like this:

print("<table>" + thead + tbody + "</table>")

You should get the following result:

<table><thead><tr><th>Name</th><th>Class</th><th>Number</th><th>Place</th><th>Place1</th><th>Grade</th></tr></thead><tbody><tr><td>Soytra</td><td>First</td><td>23768</td><td>NY</td><td>LA</td><td>16.6038</td></tr><tr><td>Reuhyta</td><td>First</td><td>23769</td><td>NY</td><td>LA</td><td>23.56789</td></tr></tbody></table>

Which should output the following HTML:

table, table * {
  border-collapse: collapse;
}

th, td {
  padding: 7px;
  text-align: left;
  border: 1px solid #EEE;
}

<table><thead><tr><th>Name</th><th>Class</th><th>Number</th><th>Place</th><th>Place1</th><th>Grade</th></tr></thead><tbody><tr><td>Soytra</td><td>First</td><td>23768</td><td>NY</td><td>LA</td><td>16.6038</td></tr><tr><td>Reuhyta</td><td>First</td><td>23769</td><td>NY</td><td>LA</td><td>23.56789</td></tr></tbody></table>

Good luck.

@Techiesoft You're very welcome, also the answer has been updated since you've accepted, in case you're wondering what's changed, I've added a `` element that was missing from the `` element. — Malekai, May 01 '19 at 09:45

score 2 · Answer 2 · answered May 01 '19 at 09:42

You can create your own function to create an HTML table:

from collections import OrderedDict
inDict = [OrderedDict([('Name', 'Soytra'), ('Class', 'First'), ('Number', '23768'), ('Place', 'NY'), ('Place1', 'LA'), ('Grade', 16.6038)]), OrderedDict([('Name', 'Reuhyta'), ('Class', 'First'), ('Number', '23769'), ('Place', 'NY'), ('Place1', 'LA'), ('Grade', 23.56789)])]

def makeHtmlTable(inDict):
    htmlOutput = "<table>"
    headers = [elem for elem in list(inDict[0])]
    htmlOutput += "<tr>" + "".join(["<th>" + header + "</th>" for header in headers]) + "</tr>"
    for elem in inDict:
        htmlOutput += "<tr>" + "".join(["<td>" + str(value) + "</td>" for key, value in elem.items()]) + "</tr>"
    htmlOutput += "</table>"
    return htmlOutput

print(makeHtmlTable(inDict))

Output:

<table><tr><th>Name</th><th>Class</th><th>Number</th><th>Place</th><th>Place1</th><th>Grade</th></tr><tr><td>Soytra</td><td>First</td><td>23768</td><td>NY</td><td>LA</td><td>16.6038</td></tr><tr><td>Reuhyta</td><td>First</td><td>23769</td><td>NY</td><td>LA</td><td>23.56789</td></tr></table>

How do I convert a list containing OrderedDicts into a HTML table?

2 Answers2