how to load data from a flask url and console log the data n react? - json

Question

I want to load a json file that I get from a url generated in flask.
After d3.json(url, function) I'm trying to console log the json, but nothing happens and I dont know what's wrong. So maybe someone can help
This is basically my code:
Component where I want to display a graph (Display.js):
import React, { Component } from 'react';
import "./Display.css";
import * as d3 from "d3";
export default class Display extends Component {
componentWillReceiveProps() {
const url = "http://localhost:5000/company?company_name=" + this.props.inputDataFromParent //the url depends on the input the user made. InputDataFromParent is the passed value (from the parent) that the user typed in
d3.json(url, function (data) {
console.log(data)
})
}
when I type in an input (company name) that doesnt exist in the database I get an error: "Uncaught (in promise) SyntaxError: Unexpected token N in JSON at position 0"at (index):1
when I type in an input that does exist nothing happens in the console.
Here's my main.py:
import flask
from pandas import DataFrame
from models import company_search
from flask import request
from models import subsidiaries
app=flask.Flask("__main__")
#app.route("/company")
def result():
if request.method == 'GET':
company_name = request.args.get('company_name', None)
if company_name:
return subsidiaries(company_name)
return "No place information is given"
app.run(debug=True)
and this is models.py (neo4j is used as the database):
def subsidiaries(eingabe):
if regex_eingabe_kontrolle(eingabe):
namelistdf = graph.run("MATCH (c:Company)-[rel:Relation]->(d:Company) WHERE rel.relation_group='OWNERSHIP' AND rel.percent_share >= 50 AND c.company_name= $eingabe RETURN c, rel, d",eingabe=eingabe).to_data_frame()
if namelistdf.empty:
return "No company with this name exists"
namelistjson = namelistdf.to_json(orient="records",date_unit="s",default_handler=str)
return namelistjson
else:
return "Please enter a valid company name"
I get the data from a neo4j database.
It's not about to console log the data because I want to generate a graph from the data. The console log is only for testing if the data is right. But now it seems that the data isn't passed to d3.json(url, function (data) correctly

Answer 1

Your problem occurs in your main file when you return No place information is given. Since this is not in JSON format, JavaScript fails to parse it causing the error to be thrown. To fix this, you can change it to:
import json
#app.route("/company")
def result():
if request.method == 'GET':
company_name = request.args.get('company_name', None)
if company_name:
return subsidiaries(company_name)
return json.dumps("No place information is given")
If you do the same for No company with this name exists and Please enter a valid company name, you won't get anymore JSON deserialization errors. However, D3 may still throw errors because it does not know what to do with a string.
You may want to return HTTP status codes along with your error messages so you can control the error. To do this in Flask, you can return the text along with the status code. For example: return json.dumps("Error message"), 400 will return the JSON string Error message with the status code 400. Since d3.json makes an underlying call to the JavaScript fetch function, you should be able to access the status code by using data.status.