title: Passing JSON data from server to client with Flask
body: <p>I'm completely new to Flask and am trying to figure out how to display networkx graph data with d3js force layouts. Here is the relevant Python code:</p>
  
  <pre><code>@app.route("/")
  def index():
      """
      When you request the root path, you'll get the index.html template.
  
      """
      return flask.render_template("index.html")
  
  
  @app.route("/thread")
  def get_graph_data(thread_id: int=3532967):
      """
      returns json of a network graph for the specified thread
      :param thread_id:
      :return:
      """
      pqdict, userdict = graphs.get_post_quote_dict(thread_id)
      G = graphs.create_graph(pqdict)
      s = graphs.graph_to_node_link(G, remove_singlets=True) # returns dict
      return flask.jsonify(s)
  </code></pre>
  
  <p>And here is the index.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Index thing&lt;/title&gt;
      &lt;script type="text/javascript" src="http://d3js.org/d3.v2.js"&gt;&lt;/script&gt;
      &lt;link type="text/css" rel="stylesheet" href="templates/graph.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chart"&gt;&lt;/div&gt;
  &lt;script&gt;
      var w = 1500,
          h = 1500,
          fill = d3.scale.category20();
  
      var vis = d3.select("#chart")
          .append("svg:svg")
          .attr("width", w)
          .attr("height", h);
  
      d3.json("/thread", function (json) {
          var force = d3.layout.force()
              .charge(-120)
              .linkDistance(30)
              .nodes(json.nodes)
              .links(json.links)
              .size([w, h])
              .start();
  
          var link = vis.selectAll("line.link")
              .data(json.links)
              .enter().append("svg:line")
              .attr("class", "link")
              .style("stroke-width", function (d) {
                  return Math.sqrt(d.value);
              })
              .attr("x1", function (d) {
                  return d.source.x;
              })
              .attr("y1", function (d) {
                  return d.source.y;
              })
              .attr("x2", function (d) {
                  return d.target.x;
              })
              .attr("y2", function (d) {
                  return d.target.y;
              });
  
          var node = vis.selectAll("circle.node")
              .data(json.nodes)
              .enter().append("svg:circle")
              .attr("class", "node")
              .attr("cx", function (d) {
                  return d.x;
              })
              .attr("cy", function (d) {
                  return d.y;
              })
              .attr("r", 5)
              .style("fill", function (d) {
                  return fill(d.group);
              })
              .call(force.drag);
  
          vis.style("opacity", 1e-6)
              .transition()
              .duration(1000)
              .style("opacity", 1);
  
          force.on("tick", function () {
              link.attr("x1", function (d) {
                  return d.source.x;
              })
                  .attr("y1", function (d) {
                      return d.source.y;
                  })
                  .attr("x2", function (d) {
                      return d.target.x;
                  })
                  .attr("y2", function (d) {
                      return d.target.y;
                  });
  
              node.attr("cx", function (d) {
                  return d.x;
              })
                  .attr("cy", function (d) {
                      return d.y;
                  });
          });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So clearly the d3.json() function wants a location of a static JSON file, which in this case I'm trying to generate dynamically based on the request URL. </p>
  
  <p>I've tried about a dozen approaches that I've found around here. Per the suggestion below, I tried:</p>
  
  <pre><code>@app.route("/")
  def index():
      """
      When you request the root path, you'll get the index.html template.
  
      """
      return flask.render_template("index.html")
  
  
  @app.route("/thread")
  def get_graph_data():
  
      """
      returns json of a network graph for the specified thread
      :param thread_id:
      :return:
      """
      thread_id = request.args.get("thread_id", 3532967, type=int)
      pqdict, userdict = graphs.get_post_quote_dict(thread_id)
      G = graphs.create_graph(pqdict)
      s = graphs.graph_to_node_link(G, remove_singlets=True)
      return jsonify(s)
  </code></pre>
  
  <p>With the template index.html unchanged, and navigated to "<a href="http://localhost/thread?thread_id=12345" rel="nofollow noreferrer">http://localhost/thread?thread_id=12345</a>" but this failed because it was printing the JSON for ID 12345 on the page instead of rendering the javascript.</p>
  
  <p>So to sum up, my current goal is to specify a parameter in the Python method from the URL (".../showgraph?threadid=whatever..."), generate a json in the Python code, and pass it back to the html/js. How do I accomplish this? </p>