I'm having an issue using JSON.parse. app.py sends 3 arrays of JSON objects to index.html: state_latitude, state_longitude, and state_name.
app.py
def index():
"""Render map"""
if not os.environ.get("API_KEY"):
raise RuntimeError("API_KEY not set")
state_latitude = db.execute("SELECT latitude FROM geo_states")
state_longitude = db.execute("SELECT longitude FROM geo_states")
state_name = db.execute("SELECT name FROM geo_states")
return render_template("index.html", key=os.environ.get("API_KEY"), state_latitude=json.dumps(state_latitude), state_longitude=json.dumps(state_longitude),
state_name=json.dumps(state_name))
index.html
The short script in index.html is meant to define variables that can be accessed by scripts.js. They are still the same 3 arrays return by the python script, but now they are formatted as strings. When I tried to define state_lats, state_longs, and state_names as var state_lats = {{ state_latitude }}
for example, I receive an error "Parsing error: Unexpected token {". If I can define these three variables as JSONs rather than strings, that would be one way of solving this issue, but because I wasn't able to figure that out. I tried to work with them as strings in scripts.js.
...
<script type="text/javascript">
var state_latitudes = "{{ state_latitude }}"
var state_longitudes = "{{ state_longitude }}"
var state_names = "{{ state_name }}"
</script>
<script src="/static/scripts.js"></script>
scripts.js
state_latitudelist (and the other two equivalent variables) is an array of strings that are in JSON format, rather than being one long string containing multiple JSONs. The value for state_latitudelist is below. I tried to iterate over this array and convert each element to an actual JSON, so that I can index into them later in the script, but it does not appear to be working. I'm not receiving an error, but when I attempt to do document.write(statelatitudeJSON)
the command appears to be ignored, which suggests that statelatitudeJSON is empty. Does anyone have any idea what might be going wrong? Thanks for your help.
var state_latitudelist = [];
var value = "";
var addValue = false;
for (i = 0; i < state_latitudes.length; i++) {
if (state_latitudes[i] == '{') {
addValue = true;
}
if (state_latitudes[i] == '}') {
addValue = false;
value += state_latitudes[i];
state_latitudelist.push(value);
value = '';
}
if (addValue == true) {
value += state_latitudes[i];
}
}
var state_latitudeJSON = []
for (i = 0; i < 50; i++) {
state_latitudeJSON.push(JSON.parse(state_latitudelist[i]))
}
document.write(state_latitudelist)
returns
{"latitude": 32.806671},{"latitude": 61.370716},{"latitude": 33.729759},{"latitude": 34.969704},{"latitude": 36.116203},{"latitude": 39.059811},{"latitude": 41.597782},{"latitude": 39.318523},{"latitude": 38.897438},{"latitude": 27.766279},{"latitude": 33.040619},{"latitude": 21.094318},{"latitude": 44.240459},{"latitude": 40.349457},{"latitude": 39.849426},{"latitude": 42.011539},{"latitude": 38.5266},{"latitude": 37.66814},{"latitude": 31.169546},{"latitude": 44.693947},{"latitude": 39.063946},{"latitude": 42.230171},{"latitude": 43.326618},{"latitude": 45.694454},{"latitude": 32.741646},{"latitude": 38.456085},{"latitude": 46.921925},{"latitude": 41.12537},{"latitude": 38.313515},{"latitude": 43.452492},{"latitude": 40.298904},{"latitude": 34.840515},{"latitude": 42.165726},{"latitude": 35.630066},{"latitude": 47.528912},{"latitude": 40.388783},{"latitude": 35.565342},{"latitude": 44.572021},{"latitude": 40.590752},{"latitude": 41.680893},{"latitude": 33.856892},{"latitude": 44.299782},{"latitude": 35.747845},{"latitude": 31.054487},{"latitude": 40.150032},{"latitude": 44.045876},{"latitude": 37.769337},{"latitude": 47.400902},{"latitude": 38.491226},{"latitude": 44.268543},{"latitude": 42.755966}