Create a table like structure with keys on the left and values on the right of the table from json d-CodePudding

I am trying to create a table like structure where this table has two columns ( specs, value) and all the keys go into specs column and values for those keys go into value column. I have a json file locally stored on my system. So, the goal is to get everything from that json file and create this table structure and display it on my webpage.

Here is my route for Specs. When users click on a button thats in my html page, that button basically runs this function where it fetches the hosts facts, and stores that json data in a file called hostsfacts.json. I want to be able to create a table I described above from that json data and pass that table to provision.html.

@app.route('/Specs', methods=['GET', 'POST'])
def Specs():
ID = request.form["foremanId1"]
print(ID)
response10 = requests.get('https://test.com/api/hosts/{v1}/facts'.format(v1=ID), auth=('abc', 'password'), verify=False)
if response10.status_code == 200:
    myDictForHostsFacts = json.loads(response10.content.decode('utf-8'))
    resultForHostsFacts = json.dumps(myDictForHostsFacts)

with open("static\hostsFacts.json", "w") as hostsFactsFile:
    add_text1 = (resultForHostsFacts)
    print(add_text1, file=hostsFactsFile)
    hostsFactsFile.close()

return render_template('provision.html')

here is my json file:

{"total": 366, "subtotal": 1, "page": 1, "per_page": 320, "search": " host = 529", "sort": {"by": null, "order": null}, "results": {"mac7287327223": {"memory::system": null, "dmi::board": null, "disks::sdb::size_bytes": "0", "nmprimary_ipv4_dns-priority": "0", "nmprimary_ipv6_dns-priority": "0", "nmprimary_802-3-ethernet_speed": "0", "nmprimary_ipv4_route-table": "0", "nmprimary_ipv6_route-table": "0", "dmi::bios::release_date": "03/08/2022", "bios_release_date": "03/08/2022", "disks::sdb::size": "0 bytes", "partitions::/dev/loop2::size": "1.56 GiB", "partitions::/dev/mapper/live-rw::size": "1.56 GiB", "partitions::/dev/mapper/live-base::size": "1.56 GiB", "partitions::/dev/loop4::size": "1.56 GiB", "processorcount": "16", "processors::count": "16", "nmprimary_dhcp4_option_expiry": "1661435487", "partitions::/dev/loop2::size_bytes": "1677721600", "partitions::/dev/mapper/live-rw::size_bytes": "1677721600", "partitions::/dev/loop4::size_bytes": "1677721600"}}}

So, I just want to create table with whats inside of mac7287327223{}. I am looking to have something like this table below:

| Specs | value |

| memory::system | null |

| dmi::board | null |

| disks::sdb::size | 0 bytes |

| processorcount | 16 |

I was having hard time to format this table here in stackoverflow so, I just put it like this to give everyone an idea.

In case if you want to look at provision.html, it is super simple because all i want is to display this table there. So, all it would have is body tag with the table inside it. That's all.

So, I am basically trying to achieve this and I have been having really hard time figuring out this issue since I really need to use python for this.

Please help me if you can. Any help will be highly appreciated.

CodePudding user response：

You do not need to store the data in a .json file unless you want to save it permanently.

In Flask you can pass data to the render_template() function:

if response10.status_code == 200:
    myDictForHostsFacts = json.loads(response10.content.decode('utf-8'))
    # ...
    return render_template('provision.html', data=myDictForHostsFacts)

In your HTML you can then access that dictionary with the jinja2 syntax. Jinja2 is a templating tool which basically allows you to use python code in your html-document

<table >
    <thead >
      <tr>
        <!-- Your Columns HERE -->
        <th  scope="col">Key</th>
        <th  scope="col">Value</th>
    
      </tr>
    </thead>
    <tbody id="temp-table">
      {% for entry in data%}
      <tr>
        <td >{{entry}}</td>
        <td >{{data[entry]}}</td>
       
      </tr>
      {% endfor %}
    </tbody>
  </table>

The HTML-Code above is some of my own code which I edited. I recommend a look at the documentation of jinja2 it is quite useful.