How to convert JSON String to HTML Table in Flask?

Question

I am trying to convert json to html table but getting error UndefinedError: 'unicode object' has no attribute 'items'. I am getting below json from response and I am storing it into d5,

['{"pf":"K"', '"users":1', '"evennts":1}', '{"pf":"A"', '"users":7', '"evennts":7}', '{"pf":"I"', '"users":3', '"evennts":3}']

follwing is my code,

finalJson = json.dumps(d5)
    table_data = (json2html.convert(json = finalJson))
    return render_template_string('''
    <table>
            <tr>
                <td> PF </td> 
                <td> users </td>
                <td> events </td>
            </tr>

    {% for pf, users,events in table_data.items() %}

            <tr>
                <td>{{ pf }}</td> 
                <td>{{ users }}</td>
                <td>{{ events }}</td>
            </tr>
    {% endfor %}
    </table>
''', table_data=table_data)

I want to convert that json into html table like,

pf	users	events
K	1	1
I	3	3
A	7	7

Why do the data need to be json format? You could just keep it as original form. — Epic Chen
– Epic Chen, Commented May 26, 2021 at 6:13
@EpicChen I am getting that json from response and i want to use it — Gaurav
– Gaurav, Commented May 27, 2021 at 5:46
The response is ['{"pf":"K"', '"users":1', '"evennts":1}', '{"pf":"A"', '"users":7', '"evennts":7}', '{"pf":"I"', '"users":3', '"evennts":3}'] or [{"pf":"K", "users":1, "evennts":1}, {"pf":"A", "users":7, "evennts":7}, {"pf":"I", "users":3, "evennts":3}]? Actually, the first one is wrong josn format if you post it to json.parser.online.fr — Epic Chen
– Epic Chen, Commented May 27, 2021 at 6:02
I have done some surveys, I think that the output of spark dataframe should be ['{"pf":"K", "users":1, "evennts":1},{"pf":"A", "users":7, "evennts":7},{"pf":"I", "users":3, "evennts":3}'] ? devrats.com/spark-and-json — Epic Chen
– Epic Chen, Commented May 27, 2021 at 6:46

Epic Chen · Accepted Answer · 2021-05-27 09:03:37Z

1

As I have checked above, try this

        d5 = ['{"pf":"K", "users":1, "events":1},{"pf":"A", "users":7, "events":7},{"pf":"I", "users":3, "events":3}']
        # convert spark json array result to a list.
        finalJson = json.loads("[" + d5[0] + "]") 
    
        return render_template_string('''
        <style>
        table, th, td {
             border: 1px solid black;
        }
        table {
            width:80%;
            border-collapse: collapse;
        }
        td {
            text-align: center
        }
        th:first-child, td:first-child {
            text-align: left
        }
        th:last-child, td:last-child {
            text-align: right
        }
        </style>
        <table>
                <tr>
                    <th> PF </th> 
                    <th> users </th>
                    <th> events </th>
                </tr>
    
        {% for row in table_data %}
    
                <tr>
                    <td>{{ row['pf'] }}</td> 
                    <td>{{ row['users'] }}</td>
                    <td>{{ row['events'] }}</td>
                </tr>
        {% endfor %}
        </table>
    ''', table_data=finalJson)

You could also feel free to modify styles to what you want.

edited May 27, 2021 at 9:03

answered May 27, 2021 at 6:51

Epic Chen

1,39212 silver badges17 bronze badges

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

7 Comments

Epic Chen Over a year ago

Do you notice that d5 is not a string? d5 is a array. [ xxxxxxx ], You mean your d5 = "['{"pf":"K", "users":1, "evennts":1},{"pf":"A", "users":7, "evennts":7},{"pf":"I", "users":3, "evennts":3}']"? The goal is that modify the string to a valid json string before call json.load

Gaurav Over a year ago

Thanks, got that. but still there is one issue. In PF column I am getting rows like events events events, in Users column i am getting pf and in events column getting users.

Epic Chen Over a year ago

Maybe you could provide the screenshot?

Gaurav Over a year ago

can you give me your email id, I will send you screenshot

Epic Chen Over a year ago

I have modified the code, main is at the {% for row in table_data %} loop part. Moreover, the original spell of the field 'events' is incorrect, I have modified it from 'evennts' to 'events'.

|

G.Young · Accepted Answer · 2021-05-26 06:21:09Z

0

d5='[{"pf":"K","users":1,"events":1},{"pf":"A","users":7,"events":7},{"pf":"I","users":3,"events":3}]'
finalJson = json.loads(d5)

return render_template_string('''
<table>
        <tr>
            <td> PF </td> 
            <td> users </td>
            <td> events </td>
        </tr>

{% for pf, users,events in finalJson %}

        <tr>
            <td>{{ pf }}</td> 
            <td>{{ users }}</td>
            <td>{{ events }}</td>
        </tr>
{% endfor %}
</table>
''', finalJson=finalJson)

First, the string d5 should have correct json format. Second, if you want to covert string to json, you can use json.loads (not dumps)

finalJson is 'List'. So you can iterate it without items() funciton.

answered May 26, 2021 at 6:21

G.Young

1412 bronze badges

1 Comment

Gaurav Over a year ago

I think your json is also invalid

Collectives™ on Stack Overflow

How to convert JSON String to HTML Table in Flask?

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related