Trying to update prices from an API using AJAX/Flask

Admin 1
Viewed 299

So I am trying to update prices on products, without having to refresh. I wat it to update live, but I don't understand. I have read a bunch of threads, but haven't figured it out.

Here is my python code:

@app.route('/bprices', methods=['GET'])
def bPrices():
    f = requests.get(
        'https://api.hypixel.net/skyblock/bazaar?key=[can get you a key if needed]').json()

    products = [
        {
            "id": product["product_id"],
            "sell_price": product["sell_summary"][:1],
            "buy_price": product["buy_summary"][:1],
            "sell_volume": product["quick_status"]["sellVolume"],
            "buy_volume": product["quick_status"]["buyVolume"],
        }
        for product in f["products"].values()
    ]
    return jsonify(products=products)

And here is my HTML + js:

<table
    id="myTable"
    class="table table-striped table-bordered table-sm table-dark sortable"
    cellspacing="0"
  >
    <thead>
      <tr>
        <th aria-label="Product Name" data-balloon-pos="up">Product</th>
        <th aria-label="Product's buy price" data-balloon-pos="up">
          Buy Price
        </th>
        <th aria-label="Product's sell price" data-balloon-pos="up">
          Sell Price
        </th>
        <th aria-label="Product's buy volume" data-balloon-pos="up">
          Buy Volume
        </th>
        <th aria-label="Product's sell volume" data-balloon-pos="up">
          Sell Volume
        </th>
        <th>
          Margin
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="price"></td>
      </tr>
    </tbody>
  </table>
</div>
<script>
  $SCRIPT_ROOT = {{ request.script_root | tojson | safe }};
    (function () {
      $.getJSON(
        $SCRIPT_ROOT + "/_stuff", // Your AJAX route here
        function (data) {
          $("#price").text(data.products)
        }
      );
      setTimeout(arguments.callee, 10000);
    })();
</script>

currently, it is only displaying a JSON file of the data I want to access, most likely because of the "jsonify".

flask python ajax
1 Answers

To show the JSON data in a table view, loop through the products in jquery and create the table records inside a tbody element. Then insert this tbody into the desired table.

Here I have shown an example of displaying live data without page refresh using AJAX and Flask.

app.py:

from random import randint
from flask import Flask, render_template, jsonify, request



app = Flask(__name__)


@app.route("/get_data", methods=["GET"])
def get_data():
    products = [
        {
            "name": "mobile",
            "quantity": 3217210,
            "price": randint(1,1000)
        },
        {
            "name": "laptop",
            "quantity": 343217210,
            "price": randint(1,1000)
        },
        {
            "name": "mouse",
            "quantity": 100,
            "price": randint(1,1000)
        }        
    ]
    return jsonify(products=products)



@app.route("/", methods=["GET"])
def home():
    return render_template("products.html")

products.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <title>Live Prices</title>
</head>
<body>
    <h3>Products</h3>
    <table border="1" id="products_table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
    </table>
    <script type=text/javascript>
        $SCRIPT_ROOT = {{ request.script_root | tojson | safe }};
        (function () {
            $.getJSON($SCRIPT_ROOT + "/get_data",
            function(data) {
                var products = data.products;
                var table_body = document.createElement("tbody");
                $.each(products, function(index, product){
                    var product_name = product.name.toString();
                    var product_quantity = product.quantity;
                    var product_price = product.price;
                    var row = table_body.insertRow();
                    var name_cell = row.insertCell();
                    name_cell.appendChild(document.createTextNode(product_name));
                    var quantity_cell = row.insertCell();
                    quantity_cell.appendChild(document.createTextNode(product_quantity));
                    var price_cell = row.insertCell();
                    price_cell.appendChild(document.createTextNode(product_price));
                })
                $("#products_table tbody").remove();
                $("#products_table").append(table_body);
            }
            );
            setTimeout(arguments.callee, 5000);
        })();
    </script>
</body>
</html>

Output:

live data using flask and ajax

Note: - In get_data route, I have generated random price between 1 to 1000 for each products in each GET request. - In setTimeout(arguments.callee, 5000); the 5000 indicates it will delay 5000 milliseconds(=5 seconds) between executions of the script.

user_31294140
Related