How to send JSON data created by Python to JavaScript?
<p>I am using Python <code>cherrypy</code> and <code>Jinja</code> to serve my web pages. I have two Python files: <em>Main.py</em> (handle web pages) and <em>search.py</em> (server-side functions).<br>
I create a dynamic dropdown list (using <code>JavaScript</code>) based on a local <code>JSON</code> file called <em>component.json</em>(created by function <em>componentSelectBar</em> inside <em>search.py</em>).  </p>

<p>I want to ask how can my JavaScript retrieve JSON data <strong>without physically storing the JSON data into my local website root's folder</strong> and still fulfil the function of dynamic dropdown list.</p>

<p>The <em>componentSelectBar</em> function inside <em>search.py</em>:</p>

<pre><code>def componentSelectBar(self, brand, category):
    args = [brand, category]
    self.myCursor.callproc('findComponent', args)
    for result in self.myCursor.stored_results():
        component = result.fetchall()
    if (len(component) == 0):
        print "component not found"
        return "no"

    components = []
    for com in component:
        t = unicodedata.normalize('NFKD', com[0]).encode('ascii', 'ignore')
        components.append(t)

    j = json.dumps(components)
    rowarraysFile = 'public/json/component.json'
    f = open(rowarraysFile, 'w')
    print &gt;&gt; f, j

    print "finish component bar"
    return "ok"
</code></pre>

<p>The <em>selectBar.js</em>:</p>

<pre><code>    $.getJSON("static/json/component.json", function (result) {
        console.log("retrieve component list");
        console.log("where am i");
        $.each(result, function (i, word) {
            $("#component").append("&lt;option&gt;"+word+"&lt;/option&gt;");
        });
    });
</code></pre>

<ol>
<li>store results from componentSelectBar into database</li>
<li>expose new api to get results from database and return json to browser</li>
</ol>

<p>demo here:</p>

<pre><code>@cherrypy.expose
def codeSearch(self, modelNumber, category, brand):
    ...
    result = self.search.componentSelectBar(cherrypy.session['brand'], cherrypy.session['category'])
    # here store result into a database, for example, brand_category_search_result
    ...

@cherrypy.expose
@cherrypy.tools.json_out()
def getSearchResult(self, category, brand):
    # load json from that database, here is brand_category_search_result
    a_json = loadSearchResult(category, brand)

    return a_json
</code></pre>

<p>document on CherryPy, hope helps:
<a href="http://docs.cherrypy.org/en/latest/basics.html#encoding-response" rel="nofollow">Encoding response</a></p>

<p>In your broswer, you need to GET /getSearchResult for json:</p>

<pre><code>$.getJSON("/getSearchResult/&lt;arguments here&gt;", function (result) {
    console.log("retrieve component list");
    console.log("where am i");
    $.each(result, function (i, word) {
        $("#component").append("&lt;option&gt;"+word+"&lt;/option&gt;");
    });
});
</code></pre>

javascript python html json cherrypy