<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=us-ascii"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><!--[if !mso]><style>v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style><![endif]--><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:36.0pt;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:1677995319;
mso-list-type:hybrid;
mso-list-template-ids:798359956 201916431 201916441 201916443 201916431 201916441 201916443 201916431 201916441 201916443;}
@list l0:level1
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-AU link="#0563C1" vlink="#954F72"><div class=WordSection1><p class=MsoNormal>Hello all,<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I am sure this is something simple and I am overlooking the cause of the problem. I am new to JavaScript programming and accessing data using JSon via Python. I am not a professional developer and doing this for interest sake and learning more about programming.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I am creating a personal budget program for my own use using Python flask and JavaScript. The JavaScript is going to handle get and post requests. The get request is to retrieve SQL Queries in a dict or array format. Contained in the dict will be dates, strings, integers and floats only. The date is formatted in yyyy-mm-dd format. The test script I am using does not contain dates at this stage. Once I work out the cause of my issue,. then I will be modifying other functions which the query results will include dates in the Json sserialised string. <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The prime issue is why my JavaScript code is not retrieving the data from my flask app. The 2nd issue is why I am getting a encoding file type error. The other parts of my flask app which does not involve JavaScript work fine. <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Examples I have seen have the script in the HTML code and they are using ginger and flask functions to provide the URL to the JavaScript. I have done this as well with the same errors seen in the chrome debug output. I have used an absolute and relative paths with the same failure. This has been done in the JavaScript file or within the HTML code. Below is the error messages:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>error messages from Firefox console:<o:p></o:p></p><p class=MsoNormal>WarningThe script from “<a href="http://localhost:5000/static/test_json.js">http://localhost:5000/static/test_json.js</a>” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type.<o:p></o:p></p><p class=MsoNormal>localhost:5000 ErrorSyntaxError: missing { before function body test_json.js:31:57<o:p></o:p></p><p class=MsoNormal>WarningThe script from “<a href="http://localhost:5000/static/Accordion.js">http://localhost:5000/static/Accordion.js</a>” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type.<o:p></o:p></p><p class=MsoNormal>localhost:5000<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Chrome development console: <o:p></o:p></p><p class=MsoNormal>test_json.js:31 Uncaught SyntaxError: Unexpected token )<o:p></o:p></p><p class=MsoNormal>:5000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (NOT FOUND)<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> 1. I cannot find any syntax code in the test_json.js file.<o:p></o:p></p><p class=MsoNormal>2. Do not understand why Firefox is complaining about the file type when Chrome does not. I am getting this for both .js files.<o:p></o:p></p><p class=MsoNormal>3. The Chrome error is telling me it cannot find the data request source. If I put the absolute path of "<a href="http://localhost/transactions_summary_report">http://localhost/transactions_summary_report</a>" into Firefox. The data comes up as a tree which you can navigate. In the Javascript I have used the same absolute path where "/transactions_summary_report" is currently with no difference with error messages. If I put the absolute path into the browser address bar, the Json data is loaded.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I do not know if this is an JavaScript error or python. I have even used known working JavaScript examples with the same result. Below is the current version of the code.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>JavaScript code for test_json:<o:p></o:p></p><p class=MsoNormal>/* standard Ajax xhr function */<o:p></o:p></p><p class=MsoNormal>function getHTTPObject() {<o:p></o:p></p><p class=MsoNormal> var xhr;<o:p></o:p></p><p class=MsoNormal> if (window.XMLHttpRequest) { // check for support<o:p></o:p></p><p class=MsoNormal> // if it's supported, use it because it's better<o:p></o:p></p><p class=MsoNormal> xhr = new XMLHttpRequest();<o:p></o:p></p><p class=MsoNormal> } else if (window.ActiveXObject) { // check for the IE 6 Ajax<o:p></o:p></p><p class=MsoNormal> // save it to the xhr variable<o:p></o:p></p><p class=MsoNormal> xhr = new ActiveXObject("Msxml2.XMLHTTP");<o:p></o:p></p><p class=MsoNormal> } // end if <o:p></o:p></p><p class=MsoNormal> return xhr;<o:p></o:p></p><p class=MsoNormal>}<o:p></o:p></p><p class=MsoNormal>function ajaxCall(dataUrl, callback) {<o:p></o:p></p><p class=MsoNormal> /* use our function to get the correct Ajax object based on support */<o:p></o:p></p><p class=MsoNormal> var request = getHTTPObject();<o:p></o:p></p><p class=MsoNormal> request.onreadystatechange = function () {<o:p></o:p></p><p class=MsoNormal> if (this.readyState == 4 && this.status === 200) {<o:p></o:p></p><p class=MsoNormal> // save the ajax response to a variable<o:p></o:p></p><p class=MsoNormal> var tableData = JSON.parse(request.responseText);<o:p></o:p></p><p class=MsoNormal> // make sure the callback is indeed a function before executing it<o:p></o:p></p><p class=MsoNormal> if (typeof callback === "function") {<o:p></o:p></p><p class=MsoNormal> callback(tableData);<o:p></o:p></p><p class=MsoNormal> } // end check for function <o:p></o:p></p><p class=MsoNormal> } // end ajax check<o:p></o:p></p><p class=MsoNormal> } // end state check function <o:p></o:p></p><p class=MsoNormal> request.open("GET", dataURl, true);<o:p></o:p></p><p class=MsoNormal> request.send();<o:p></o:p></p><p class=MsoNormal>} // end function for loading ajax data <o:p></o:p></p><p class=MsoNormal>ajaxCall ("/transactions_summary_report", function(data)) {<o:p></o:p></p><p class=MsoNormal> console.log(data);<o:p></o:p></p><p class=MsoNormal> };<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The python flask view code:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>import re, csv, glob, os<o:p></o:p></p><p class=MsoNormal>from datetime import datetime<o:p></o:p></p><p class=MsoNormal>from flask import render_template, flash, redirect, url_for, request, jsonify, json, Response <o:p></o:p></p><p class=MsoNormal>from app import app, db<o:p></o:p></p><p class=MsoNormal>from app.forms import * <o:p></o:p></p><p class=MsoNormal>from app.models import * <o:p></o:p></p><p class=MsoNormal>from sqlalchemy import extract<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>@app.route('/', methods=['GET'])<o:p></o:p></p><p class=MsoNormal>@app.route('/index', methods=['GET'])<o:p></o:p></p><p class=MsoNormal>def index():<o:p></o:p></p><p class=MsoNormal> tables = Accounts.query.all()<o:p></o:p></p><p class=MsoNormal> return render_template('index.html', title='Budget Program Main Page', tables = tables) <o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>@app.route('/transactions_summary_report')<o:p></o:p></p><p class=MsoNormal>def transactions_summary_report():<o:p></o:p></p><p class=MsoNormal> report = [] # array of dicts.<o:p></o:p></p><p class=MsoNormal> # loop through all the categories.<o:p></o:p></p><p class=MsoNormal> for row in SubCategories.query.join(Categories).group_by(SubCategories.category_id).all():<o:p></o:p></p><p class=MsoNormal> # create the dict to store the total of each sub-category and grand total.<o:p></o:p></p><p class=MsoNormal> record = {'Category':'', 'Totals':[], 'grand_total':0}<o:p></o:p></p><p class=MsoNormal> record['Category'] = row.categories.category # assigning the current category <o:p></o:p></p><p class=MsoNormal> # now loop through all the sub-categories and total the values. Place them into the key total array.<o:p></o:p></p><p class=MsoNormal> for subcat in SubCategories.query.filter(SubCategories.category_id == row.category_id).all():<o:p></o:p></p><p class=MsoNormal> res = Transactions.query.join(SubCategories).with_entities(SubCategories.subcategory, db.func.sum(Transactions.amount).label("total")).filter(Transactions.subcategory_id == subcat.id).all()<o:p></o:p></p><p class=MsoNormal> if res[-1].total is not None:<o:p></o:p></p><p class=MsoNormal> # assign the sub-category total to dict.<o:p></o:p></p><p class=MsoNormal> record ['Totals'] += res<o:p></o:p></p><p class=MsoNormal> # end if<o:p></o:p></p><p class=MsoNormal> # calculate the grand total and add to dict.<o:p></o:p></p><p class=MsoNormal> res = Transactions.query.join(SubCategories).join(Categories).with_entities(db.func.sum(Transactions.amount).label("grand_total")).filter(SubCategories.category_id == row.category_id).all()<o:p></o:p></p><p class=MsoNormal> if res[-1].grand_total is not None:<o:p></o:p></p><p class=MsoNormal> record['grand_total'] = res[-1].grand_total<o:p></o:p></p><p class=MsoNormal> report.append(record) # assign record dict to the array<o:p></o:p></p><p class=MsoNormal> # return response code plus serialise the dict. Dict does not contain dates.<o:p></o:p></p><p class=MsoNormal> return jsonify(report)<o:p></o:p></p><p class=MsoNormal> #return Response(json.dumps(report), mimetype='application/json')<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Note: I have used the last line in the above code as well with the same errors. Now for the HTMl index code:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>{% extends "base.html" %}<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>{% block content %}<o:p></o:p></p><p class=MsoNormal> <h1> Total costs Per Category and Sub-Category </h1><o:p></o:p></p><p class=MsoNormal> <div class="data"><o:p></o:p></p><p class=MsoNormal> <table id='reports_table'><o:p></o:p></p><p class=MsoNormal> <caption> Transactions Summary</caption><o:p></o:p></p><p class=MsoNormal> <tr><o:p></o:p></p><p class=MsoNormal> <th scope='col'>Category</th><o:p></o:p></p><p class=MsoNormal> <th scope='col'>sub_Category</th><o:p></o:p></p><p class=MsoNormal> <th scope='col'>Totals</th><o:p></o:p></p><p class=MsoNormal> </tr><o:p></o:p></p><p class=MsoNormal> </table><o:p></o:p></p><p class=MsoNormal></div><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal> <script type="text/javascript" src="static/test_json.js"></script><o:p></o:p></p><p class=MsoNormal>{% endblock %}<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><table class=MsoNormalTable border=1 cellspacing=0 cellpadding=0 width=545 style='width:408.75pt;border:solid #828177 1.0pt'><tr><td valign=top style='border:none;background:white;padding:7.5pt 7.5pt 7.5pt 7.5pt'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 align=left width=543 style='width:407.25pt;background:white'><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%'><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='mso-fareast-language:EN-AU'><img border=0 width=543 height=70 style='width:5.6562in;height:.7291in' id="Picture_x0020_10" src="cid:image001.png@01D56BB8.29B5C330" alt="https://www.cisco.com/c/dam/m/en_us/signaturetool/images/banners/standard/02_standard_ciscoblue02.png"><o:p></o:p></span></p></td></tr></table></td></tr><tr style='height:15.0pt'><td valign=top style='padding:0cm 0cm 0cm 0cm;height:15.0pt'></td></tr><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%'><tr><td width=30 valign=top style='width:22.5pt;padding:0cm 0cm 0cm 0cm'></td><td valign=top style='padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%'><tr><td width=260 valign=top style='width:195.0pt;padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%'><tr><td valign=top style='border:none;border-right:solid #E1E1E1 1.0pt;padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><b><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'>Sean Murphy</span></b><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:white;mso-fareast-language:EN-AU'><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'>SR ENGINEER.SOFTWARE ENGINEERING<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'><a href="mailto:seanmmur@cisco.com"><span style='color:#007FC5;text-decoration:none'>seanmmur@cisco.com</span></a><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'>Tel: <b>+61 2 8446 7751</b><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'> <o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#666666;mso-fareast-language:EN-AU'><o:p> </o:p></span></p></td></tr><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='mso-fareast-language:EN-AU'> </span><span style='font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:EN-AU'><o:p></o:p></span></p></td></tr><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'></td></tr><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='mso-fareast-language:EN-AU'> <o:p></o:p></span></p></td></tr><tr><td width=230 valign=top style='width:172.5pt;background:white;padding:0cm 0cm 0cm 0cm'></td></tr></table></td><td width=20 valign=top style='width:15.0pt;padding:0cm 0cm 0cm 0cm'></td><td width=260 valign=top style='width:195.0pt;padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%'><tr><td valign=top style='padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>Cisco Systems, Inc.</span><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:white;mso-fareast-language:EN-AU'><o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>The Forum 201 Pacific Highway<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>ST LEONARDS<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>2065<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>Australia<o:p></o:p></span></p><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#59595B;mso-fareast-language:EN-AU'>cisco.com<o:p></o:p></span></p></td></tr></table></td></tr><tr style='height:11.25pt'><td colspan=3 valign=top style='padding:0cm 0cm 0cm 0cm;height:11.25pt'></td></tr><tr><td colspan=3 valign=top style='padding:0cm 0cm 0cm 0cm'><table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width=483 style='width:362.25pt'><tr><td width=20 valign=top style='width:15.0pt;padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='mso-fareast-language:EN-AU'><img border=0 width=18 height=19 style='width:.1875in;height:.1979in' id="Picture_x0020_5" src="cid:image002.gif@01D56BB8.29B5C330" alt="http://www.cisco.com/assets/swa/img/thinkbeforeyouprint.gif"></span><span style='font-size:12.0pt;mso-fareast-language:EN-AU'><o:p></o:p></span></p></td><td width=5 valign=top style='width:3.75pt;padding:0cm 0cm 0cm 0cm'></td><td width=458 valign=bottom style='width:343.5pt;padding:0cm 0cm 0cm 0cm'><p class=MsoNormal><span style='font-size:8.5pt;font-family:"Arial",sans-serif;color:#009900;mso-fareast-language:EN-AU'>Think before you print.<o:p></o:p></span></p></td></tr><tr><td colspan=3 valign=top style='padding:0cm 0cm 0cm 0cm'><p class=MsoNormal style='margin-bottom:2.25pt'><span style='font-size:7.5pt;font-family:"Arial",sans-serif;color:#999999;mso-fareast-language:EN-AU'>This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.</span><span style='font-size:7.5pt;font-family:"Arial",sans-serif;color:white;mso-fareast-language:EN-AU'><o:p></o:p></span></p><p class=MsoNormal style='margin-bottom:2.25pt'><span style='font-size:7.5pt;font-family:"Arial",sans-serif;color:#999999;mso-fareast-language:EN-AU'>Please <a href="http://www.cisco.com/c/en/us/about/legal/terms-sale-software-license-agreement/company-registration-information.html" title="Legal Information"><span style='color:#0E58A0'>click here</span></a> for Company Registration Information.<o:p></o:p></span></p></td></tr></table></td></tr></table></td><td width=30 valign=top style='width:22.5pt;padding:0cm 0cm 0cm 0cm'></td></tr></table></td></tr></table></td></tr></table><p class=MsoNormal><span lang=EN-GB style='mso-fareast-language:EN-AU'><o:p> </o:p></span></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>