Javascript accessing local JSON files in flask app

Question

I'm running a flask app locally and my goal is to pass a dictionary from python to Javascript. I currently am able to store the dictionary as a json file in the local folder, however my ajax request cannot seem to access the local json. Why would this not work, and is there a flask module that allows me to pass python dictionaries to javascript locally?

# app.py
dictionary_a = {
    "a": {
        "b": {
            "function_handler": c,
            "defaults": {'d':e, 'f':g},
        },
        "h": {
            "function_handler": i,
            "defaults": {'d':l},
        },
    },
}

def dumper(obj):
    try:
        return obj.toJSON()
    except:
        return obj.__dict__


@app.route('/')
def index():
    jsonn = json.dumps(dictionary_a, default=dumper, indent=2)
    with open('data.json', 'w') as json_file:
        json.dump(jsonn, json_file)
    return render_template('home.html')

This is my python code,

# code.js
$.getJSON("../../data.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

This is code in javascript

Folder structure is

>project
  -app.py
  >static
    >js
      -code.js
  -data.json

error message: GET http://localhost:5000/data.json 404 (NOT FOUND)

data.json is not served statically and can only see the one route, pos dupe of https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask — Lawrence Cherone, Mar 03 '20 at 18:23

score 0 · Answer 1 · answered Mar 03 '20 at 19:01

Solved:

# code.js
var script = document.currentScript;
var fullUrl = script.src;

These lines allow getting the path of the code.js

var jsonUrl = fullUrl.replace("code.js", "data.json") // hard coded jsonUrl

$.getJSON(jsonUrl, function(from_to_conversions) {
    console.log(from_to_conversions)
});

I have the json file get dumped into the static/js folder for this to work

score 0 · Answer 2 · answered Mar 03 '20 at 19:12

Are you trying to render your python dictionary in an HTML file? you should consider using Jinja.

If you add a dictionary to your response, it will be received as a JSON by your html page, as of flask 1.1.

# app.py
dictionary_a = {
    "a": {
        "b": {
            "function_handler": c,
            "defaults": {'d':e, 'f':g},
        },
        "h": {
            "function_handler": i,
            "defaults": {'d':l},
        },
    },
}


@app.route('/')
def index():
    jsonn = dictionary_a
    return render_template('home.html', jsonn=jsonn)

then you can handle it in your html page using Jinja.

You can loop through its elements, add if statements, etc...

your home.html should look something like this:

<html>
...
    <body>
    ...
    {{jsonn}}
    ...
    </body>
...
</html>

you can also pass it directly to your javascript code and handle it like a json if need be

<script>
const jsonn = `{{jsonn | safe}}`
</script>

Thank you for your response, I was attempting to pass it into javascript because this dictionary will likely become very large and is used like a hashmap currently. So I would only wanna display a small portion on the html to dynamically update a form while user is putting their input. But passing it on to the template and passing it directly to javascript also seems like a promising way of doing it. — Derin Serbetcioglu, Mar 05 '20 at 16:50

Javascript accessing local JSON files in flask app

2 Answers2