Displaying json response in html file

Hi

I have built a blockchain web application using Python and Flask. I am using VS code. My project folder is as follows:
Project folder contains: app.py, temples folder (which contains HTML files), static folder (which contains CSS and JS).

app.py:

import datetime 
  
import hashlib 
  
import json 
  
from flask import Flask, jsonify, render_template, url_for
  
  
class Blockchain: 
    
    def __init__(self): 
        self.chain = [] 
        self.create_block(proof=1, previous_hash='0') 
  
    def create_block(self, proof, previous_hash): 
        block = {'index': len(self.chain) + 1, 
                 'timestamp': str(datetime.datetime.now()), 
                 'proof': proof, 
                 'previous_hash': previous_hash} 
        self.chain.append(block) 
        return block 
        
    def print_previous_block(self): 
        return self.chain[-1] 
        
    def proof_of_work(self, previous_proof): 
        new_proof = 1
        check_proof = False
          
        while check_proof is False: 
            hash_operation = hashlib.sha256( 
                str(new_proof**2 - previous_proof**2).encode()).hexdigest() 
            if hash_operation[:5] == '00000': 
                check_proof = True
            else: 
                new_proof += 1
                  
        return new_proof 
  
    def hash(self, block): 
        encoded_block = json.dumps(block, sort_keys=True).encode() 
        return hashlib.sha256(encoded_block).hexdigest() 
  
    def chain_valid(self, chain): 
        previous_block = chain[0] 
        block_index = 1
          
        while block_index < len(chain): 
            block = chain[block_index] 
            if block['previous_hash'] != self.hash(previous_block): 
                return False
                
            previous_proof = previous_block['proof'] 
            proof = block['proof'] 
            hash_operation = hashlib.sha256( 
                str(proof**2 - previous_proof**2).encode()).hexdigest() 
              
            if hash_operation[:5] != '00000': 
                return False
            previous_block = block 
            block_index += 1
          
        return True  
  
app = Flask(__name__) 
  
blockchain = Blockchain() 

@app.route('/') 
def home_page(): 
    return render_template('index.html')
  
@app.route('/mine_block', methods=['GET']) 
def mine_block(): 
    previous_block = blockchain.print_previous_block() 
    previous_proof = previous_block['proof'] 
    proof = blockchain.proof_of_work(previous_proof) 
    previous_hash = blockchain.hash(previous_block) 
    block = blockchain.create_block(proof, previous_hash) 
      
    response = {'message': 'A block is MINED', 
                'index': block['index'], 
                'timestamp': block['timestamp'], 
                'proof': block['proof'], 
                'previous_hash': block['previous_hash']} 
    
    return jsonify(response), 200
  
@app.route('/get_chain', methods=['GET']) 
def display_chain(): 
    response = {'chain': blockchain.chain, 
                'length': len(blockchain.chain)} 
    return jsonify(response), 200
  
@app.route('/is_valid', methods=['GET']) 
def valid(): 
    valid = blockchain.chain_valid(blockchain.chain) 
      
    if valid: 
        response = {'message': 'The Blockchain is valid.'} 
    else: 
        response = {'message': 'The Blockchain is not valid.'} 
    return jsonify(response), 200
  
if __name__ == "__main__":
        app.run(host='0.0.0.0', port=5000) 

index.html:

<!-- html file code for main page -->
<!DOCTYPE html>
<html>
<title>Blockchain</title>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">   
</head>

<body>

    <h1>Web Based Blockchain</h1>

    <p><a href="/mine_block">Mine a new block in Blockchain</a></p>
    <p><a href="/get_chain">View Blockchain</a></p>
    <p><a href="/is_valid">Check blockchain validity</a></p>

</body>

</html>

index.css:

h1{
    background-color: rgb(125, 218, 247);
    color: black;
    margin: 0;
    padding-top: 20px;
    height: 70px;
    text-align: center;
}
a:link, a:visited{
    width: 25%;
    background-color: rgb(8, 73, 52);
    color: floralwhite;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

My home page looks like:

However, the three functionalities I have created for the blockchain: the two of them show the response just as a JSON object and the third one displays the message as a text.

What can I do to format (like creating HTML pages, etc.) to make my JSON response as well as message appear visually appealing and in a proper, user friendly way?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

You need to parse the JSON data and display it however you choose.

Here are some links with more info:

https://stackoverflow.com/questions/7771011/how-can-i-parse-read-and-use-json-in-python

https://docs.python.org/3/library/json.html

https://realpython.com/python-json/

https://www.w3schools.com/python/python_json.asp

1 Like