Flask Javascript Jquery Put Json data into Table?

so I am running Flask. And I have been able to so far grab the output of my python script (which returns the stock and prices available in json format) with Javascript.

Now I am trying to convert this json data into a html table using jquery. Unfortunately, I'm not the best with Javascript. I typically like to do as much as I can in Python, but I'm needing some help to achieve the result.

The prices endpoint returns json like so:

[{'0.1': '1387'}, {'0.1': '6060'}, {'0.2': '7000']}

For the end result, I would like to display this information into a table with jquery, so the table only appears after we have data. Also for duplicate prices I would like to add the stock together like so:

Price | Stock
0.1   | 7447
0.2   | 7000

My code:

{% extends "_base.html" %}
{% block content %}
{% if current_user.is_authenticated %}
<h3 class="text-center">Welcome {{current_user.email}}! {{current_user.balance}}</h3>
{% else %}
<h3 class="text-center">Price List</h3>
{% endif %}
<br>
<div class="form-group">
<form action="" method="post">
<div class="input-group mb-3-center" style="display: flex;justify-content: center;">
<div class="input-group-prepend">
<label for="inputsm">Country</label>
<br>
<select class="selectpicker" data-live-search="true" id="country" onchange="update()">
<option value="select">Select a country...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Service</label>
<br>
<select class="selectpicker" data-live-search="true" id="service" onchange="update()">
<option value="select">Select a service...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<br>
<br>
<label for="inputsm">Price</label>
<span class="input-group-text" style="font-size: medium;">$</span>
<br>
<label for="inputsm">Stock</label>
<span class="input-group-text" style="font-size: medium;">-</span>
<br>
</div>
</div>
</form>
</div>
<div id="table">
<table>
<tbody>
<th>Price</th>
<th>Stock</th>
</tbody>
</table>
</div>
<script>
function update() {
const countrySelect = document.getElementById('country').value;
const serviceSelect = document.getElementById('service').value;
if (countrySelect != 'select' && serviceSelect != 'select') {
async function logJSONData(service,country) {
const settings = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
};
const response = await fetch("http://localhost/prices?service="+service+"&country="+country, settings);
const jsonData = await response.json();
console.log(jsonData);
}
logJSONData(serviceSelect,countrySelect);
$(table).find('tbody').append("<tr><td>jsonData</td></tr>");
}
}
</script>
{% endblock %}

To achieve your desired result of displaying the JSON data in an HTML table using jQuery, you can use the following approach:

Add an empty <table> element to your HTML file where you want the table to appear:

<table id="priceTable">
  <thead>
    <tr>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Now, you can use jQuery to fetch the JSON data and populate the table dynamically. Add the following JavaScript code inside a <script> tag:

<script>
$(document).ready(function() {
// Fetch the JSON data using jQuery's AJAX method
$.ajax({
url: '/prices', // Replace with the appropriate URL for your Flask endpoint
method: 'GET',
dataType: 'json',
success: function(data) {
// Process the received JSON data and populate the table
var tableBody = $('#priceTable tbody');
var prices = {};
// Calculate the total stock for each unique price
data.forEach(function(item) {
var price = Object.keys(item)[0];
var stock = parseInt(item[price]);
if (prices.hasOwnProperty(price)) {
prices[price] += stock;
} else {
prices[price] = stock;
}
});
// Populate the table with the calculated prices and stocks
Object.keys(prices).forEach(function(price) {
var stock = prices[price];
var row = '<tr><td>' + price + '</td><td>' + stock + '</td></tr>';
tableBody.append(row);
});
},
error: function() {
console.error('Failed to fetch price data.');
}
});
});
</script>

Make sure to replace '/prices' in the AJAX URL with the appropriate URL that corresponds to your Flask endpoint that returns the JSON data.

With this code, when the page loads, the jQuery script will fetch the JSON data from the specified URL. It will then calculate the total stock for each unique price and populate the <table> with the prices and stocks accordingly.

> Note: Ensure that the Flask endpoint /prices returns the JSON data in the correct format as shown in your example.