title: How to access received JSON data from Flask Template?
body: <p><strong>1.</strong>
  In this example code when you click on a date a JSON string is sent to my Flask view.</p>
  
  <p><strong>2.</strong>
  In Flask view (ajax.py) I then plan on doing some more advanced processing but for now I just return the same JSON data with an extra message and only returning the 4th item from the list key.</p>
  
  <p><strong>3.</strong>
  The third stage where Flask view is sending the JSON data back to Flask template is where I'm having problems. I don't really understand how to access the JSON data from my Flask template?</p>
  
  <p>When using Chrome's console mode:</p>
  
  <pre><code>* Network &gt; XHR &gt; Response
  </code></pre>
  
  <p>I see that I have received this data in console mode, but how do I access these values from my Flask template file?:</p>
  
  <pre><code>{
    "age": 35, 
    "full_date": "2019-07-18", 
    "location": "United States", 
    "name": "Anthony", 
    "randomkeyinlist": "four", 
    "result": "Success!"
  }
  </code></pre>
  
  <pre><code>from flask import Flask
  from flask import jsonify
  from flask import redirect
  from flask import render_template
  from flask import request
  from flask import url_for
  
  app = Flask(__name__)
  
  @app.route("/")
  def ajax():
      return render_template('ajax.html')
  
  @app.route('/_get_data', methods=['POST'])
  def get_data():
      # dictionary
      data = request.get_json()
  
      full_date = data['full_date']
      name = data['name']
      age = data['age']
      location = data['location']
      randomlist = data['randomlist']
  
      return jsonify({'result': 'Success!',
                      'full_date': full_date,
                      'name': name,
                      'age': age,
                      'location': location,
                      'randomkeyinlist': randomlist[3]
      })
  </code></pre>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;JSON Flask AJAX&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;!-- _______________________________________________________________________ --&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt"
  crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;!-- jQuery UI --&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css"&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;!-- _______________________________________________________________________ --&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready( function() {
  
    //----------------------------------//
   //  jQuery UI Datepicker: Settings  //
  //----------------------------------//
  $('#inlineDate').datepicker({
      altField: "#demoDate",
      showOtherMonths: true
  });
  
    //----------------------------------------//
   //  jQuery UI Datepicker: getDate method  //
  //----------------------------------------//
  $('#inlineDate').change(function() {
      "use strict";
      var date = $(this).datepicker('getDate');
      var $fullDate;
  
      $fullDate = $.datepicker.formatDate('yy-mm-dd', date);
  
        //--------//
       //  AJAX  //
      //--------//
      const toSend = {
          full_date: $fullDate,
          name: "Anthony",
          age: 35,
          location: "United States",
          randomlist: ["one", "two", "three", "four"]
      };
  
      // Convert js value to JSON string.
      const jsonString = JSON.stringify(toSend);
      console.log(jsonString);
  
      // Create XMLHttpRequest object.
      const xhr = new XMLHttpRequest();
  
      // Send HttpRequest to web server.
      xhr.open("POST", "/_get_data");
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(jsonString);
  
  }); // END getDate method
  
  }); // END .ready event
  &lt;/script&gt;
  
  &lt;!-- _______________________________________________________________________ --&gt;
  
  &lt;style&gt;
  th, td { border: 1px solid black; }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- jQuery UI DatePicker Widget --&gt;
  &lt;form method="post" action="#"&gt;
      &lt;div id="wrapper" class="ui-widget"&gt;
      &lt;label for="demoDate"&gt;Date: &lt;/label&gt;&lt;input id="demoDate"/&gt;&lt;span id="inlineDate"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;br&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Status&lt;/th&gt;
          &lt;th&gt;Task&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;Check&lt;/td&gt;
          &lt;td&gt;Receive JSON data from Flask view.&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;How?&lt;/td&gt;
          &lt;td&gt;Access received JSON data in Template.&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>