URGENT HELP
How would I change the following code from json to HTML? building a html string, adding appropriate tags and using a list or a table to display the astronauts in space. the string has to pass to the html file
import requests, json
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.route('/')
def index():
response = requests.get("http://api.open-notify.org/astros.json")
if response.status_code==200:
astronautlist = json.dumps(response.json(), sort_keys=True, indent=4)
print(response.json()["message"])
print(response.json()["number"])
people=response.json()["people"]
print(people)
for i in people:
print(i["name"])
print(i["craft"])
return render_template('astronauts.html', astronauts=astronautlist)
else:
return render_template('astronauts_404.html'), 404
See there are many ways to convert json data to html template like using javascript, python etc. but as you have used flask in python so i recommend you to use python. But for your convenience i'm telling you in python as well as in javascript(jquery). Follow the below steps:-
PYTHON:
1. Below is the json data which i got from your code. You need to make a json file and inculde this data.
{"people": [{"craft": "ISS", "name": "Andrew Morgan"}, {"craft": "ISS", "name": "Oleg Skripochka"}, {"craft": "ISS", "name": "Jessica Meir"}], "message": "success", "number": 3}
So now you have json file with you.
2. Open cmd and install json2html using the command " pip install json2html".
So now you are having json2html library with you.
3. Now open your python compiler and write the below code:
import json2html
import json
infoFromJson = json.loads(jsonfile)
print json2html.convert(json = infoFromJson)
JAVASCRIPT:
Below is th javascript code which you can run to convert your json data into html table.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> var data = [ {"people": [{"craft": "ISS", "name": "Andrew Morgan"}, {"craft": "ISS", "name": "Oleg Skripochka"}, {"craft": "ISS", "name": "Jessica Meir"}], "message": "success", "number": 3} ]; $(document).ready(function () { var html = '<table class="table table-striped">'; html += '<tr>'; var flag = 0; $.each(data[0], function(index, value){ html += '<th>'+index+'</th>'; }); html += '</tr>'; $.each(data, function(index, value){ html += '<tr>'; $.each(value, function(index2, value2){ html += '<td>'+value2+'</td>'; }); html += '<tr>'; }); html += '</table>'; $('body').html(html); }); </script>Also for your help i am uploading the html file also which will come as a result from it. Below it is refer it if you want.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JSON To HTML using
codebeautify.org</title>
</head>
<body>
<table
border=1>
<thead>
<tr>
<th>people.0.craft</th>
<th>people.0.name</th>
<th>people.1.craft</th>
<th>people.1.name</th>
<th>people.2.craft</th>
<th>people.2.name</th>
<th>message</th>
<th>number</th>
</tr>
</thead>
<tbody>
<tr>
<td>ISS</td>
<td>Andrew Morgan</td>
<td>ISS</td>
<td>Oleg Skripochka</td>
<td>ISS</td>
<td>Jessica Meir</td>
<td>success</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
URGENT HELP How would I change the following code from json to HTML? building a html...