convert python's json object to html table? [duplicate]

Question

I am building webpage with flask and i have a python syntax :

@app.route('/uploads/<filename>')
def uploaded_file(filename):
  reader = shapefile.Reader("./uploads/"+filename)
  fields = reader.fields[1:]
  field_names = [field[0] for field in fields]
  buffer = []
  for sr in reader.shapeRecords():
    atr = dict(zip(field_names, sr.record))
    geom = sr.shape.__geo_interface__
    buffer.append(dict(type="Feature", \
                       geometry=geom, properties=atr))
  json_string = json.dumps(buffer)
  return render_template('view.html',r = json_string))

which gives json response like

[{"type": "Feature", "geometry": {"type": "Point", "coordinates": [595371.8167114258, 28460830.87548828]}, "properties": {"Enabled": 1}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [595508.9202880859, 28465509.365478516]}, "properties": {"Enabled": 1}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [595478.0269165039, 28465540.729675293]}, "properties": {"Enabled": 1}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [595594.5479125977, 28465644.839111328]}, "properties": {"Enabled": 1}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [595690.145690918, 28465719.45727539]}, "properties": {"Enabled": 1}}, {"type": "Feature", "geometry": {"type": "Point", "coordinates": [596209.5372924805, 28465729.346679688]}, "properties": {"Enabled": 1}}, .....etc

which i want to print in html table format with miranda.js

     <table class="table table-bordered" id="myTable">
            <thead>
            <tr>
                <th>TYPE</th>
                <th>GEOMETRY</th>
                <th>GEOMETRY TYPE</th>
                <th>COORDINATES</th>

            </tr>
            </thead>
            <tbody id="mydata">
                <tr>
                    <td>[[type]]</td>
                    <td>[[geometry]]</td>
                    <td>[[type]]</td>
                    <td>[[coordinates]]</td>
                </tr>
            </tbody>
        </table>
    $("#mydata").mirandajs("{{r}}");

But no thing happens. I just want a way to parse this python obj json to html table. Can u please show me where i did wrong?? or can u show me a way to get my thing done easily

Does this answer your question? Getting Flask JSON response as an HTML Table? — Zaffer
– Zaffer, Commented Jun 13, 2021 at 20:53

Ajax1234 · Accepted Answer · 2018-04-09 13:43:37Z

1

It is easiest to create a class for the json data and use the builtin jinja templating. Also, it seems that the key "Geometry":

class Stat:
   def __init__(self, stat):
      self.__dict__ = {a:Stat(b) if isinstance(b, dict) else b for a, b in stat.items()}

class Stats:
   def __init__(self, full_data):
      self.full_data = full_data
   def __iter__(self):
      for i in self.full_data:
         yield Stat(i)

Then, call render_template and pass the class instance:

return render_template('view.html',r = Stats(json_string)))

Lastely, in view.html, apply the jinja templating:

   <table class="table table-bordered" id="myTable">
        <thead>
        <tr>
            <th>TYPE</th>
            <th>GEOMETRY TYPE</th>
            <th>COORDINATES</th>

        </tr>
        </thead>
        <tbody id="mydata">
            {%for data in r%}
            <tr>
                <td>{{data.type}}</td>
                <td>{{data.geometry.type}}</td>
                <td>{{data.geometry.coordinates}}</td>
            </tr>
            {%endfor%}
        </tbody>
    </table>

answered Apr 9, 2018 at 13:43

Ajax1234

71.7k9 gold badges67 silver badges110 bronze badges

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

1 Comment

Bishal Chhetri Over a year ago

I used your method but it says " AttributeError: 'str' object has no attribute 'items' . What is wrong ?? @Ajax1234

Hari · Accepted Answer · 2018-04-09 13:45:07Z

0

Try this Library out :

https://pypi.python.org/pypi/json2html

    json2html.convert - The module’s convert method accepts the following arguments:
        Argument    Description
        json    a valid JSON; This can either be a string in valid JSON format or a python object that is either dict-like or list-like at the top level.
        table_attributes    e.g. pass id=”info-table” or class=”bootstrap-class”/data-* to apply these attributes to the generated table
        clubbing    turn on[default]/off clubbing of list with same keys of a dict / Array of objects with same key
        encode  turn on/off[default] encoding of result to escaped html, compatible with any browser
        escape  turn on[default]/off escaping of html tags in text nodes (prevents XSS attacks in case you pass untrusted data to json2html)

answered Apr 9, 2018 at 13:45

Hari

3344 silver badges16 bronze badges

9 Comments

Bishal Chhetri Over a year ago

While using your method i used json_string = json2html.convert(json = json.dumps(buffer)) return render_template('view.html',r = json_string) and while doing {{ r }} in view it gives html data i.e like <table border="1"><tr><th>type</th><th>geometry</th><th>properties</th></tr><tr><td>Feature</td><td><table border="1"><tr><th>type</th><td>Point</td></tr><tr><th>coordinates</th><td><ul><li>595371.8167114258</li><li>28460830.87548828</li></ul></td></tr></table></td><td><table border="1"...... but table is not generated why ?? @hari

Hari Over a year ago

the <table> tag is generated right then does it mean table is not generated

Bishal Chhetri Over a year ago

i mean in my view.html i am getting tag like <table><thead>... instead of table @hari

Hari Over a year ago

can u please give me sample output that u need for my better understanding

Bishal Chhetri Over a year ago

ibb.co/gtMo7H I mean i am getting output like this instead i want generated table

|

Collectives™ on Stack Overflow

convert python's json object to html table? [duplicate]

2 Answers 2

1 Comment

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Linked

Related