title: JSON and JavaScript integration when formatting a SPARQL query in HTML
body: <p>I have an HTML + SPARQL + JSON + JavaScript program that works correctly, shown here: <a href="http://ontomatica.com/public/test/clavius.html" rel="nofollow">http://ontomatica.com/public/test/clavius.html</a></p>
  
  <p>Here is the SPARQL + JSON + JavaScript code:</p>
  
  <pre><code>function retrieveData() {
    var query = "PREFIX : &lt;http://dbpedia.org/resource/&gt; PREFIX dbp: &lt;http://dbpedia.org/ontology/&gt; PREFIX rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt; PREFIX dbpprop: &lt;http://dbpedia.org/property/&gt; SELECT ?person ?b_date ?d_date ?abstract ?thumbnail WHERE { ?person rdf:type dbp:Person ; dbp:birthDate ?b_date ; dbp:deathDate ?d_date ; dbp:abstract ?abstract . OPTIONAL { ?person dbp:thumbnail ?thumbnail } FILTER ( ?b_date &gt;= '1488-01-01'^^xsd:date &amp;&amp; ?b_date &lt; '1600-01-01'^^xsd:date &amp;&amp; ?d_date &lt; '1650-01-01'^^xsd:date ) FILTER ( langMatches(lang(?abstract), 'EN')) } ORDER BY ?person ?b_date";
  
    var url = 'http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&amp;query=' + encodeURIComponent(query) + '&amp;output=json';
  
    $.ajax({
      url: url,
      dataType: "json",
      success: function (data) {
        $('#results').show();
        $('#raw_output').text(JSON.stringify(data, null, 3));
        handle_json(data);
      },
      error: function(e) {}
    });
  }
  
  function handle_json(json) {
    $('#output_div').text("");
  
    $.each(
      json['results']['bindings'], function(index, value) {
        var html = "";
        name = value['person']['value'].replace("http://dbpedia.org/resource/", "");
        name = decodeURIComponent(name.replace(/_/g, " "));
        html += "&lt;div&gt;&lt;h3&gt;&lt;b&gt;" + name + ":&lt;/b&gt; (" + value['b_date']['value'] + " - " + value['d_date']['value'] + ")&lt;/h3&gt;&lt;/div&gt;";
  
        if (value['thumbnail'] != null)
          html += "&lt;div class='inline thumb'&gt;&lt;img style='width: 200px' src='" + value['thumbnail']['value'].replace("200px", "150px") + "'/&gt;&lt;/div&gt;";
        else
          html += "&lt;div class='inline thumb'&gt;&lt;img src=''/&gt;&lt;/div&gt;";
  
        html += "&lt;div class='inline abstract'&gt;" + value['abstract']['value'] + "&lt;/div&gt;&lt;div class='clear'&gt;&lt;/div&gt;&lt;br&gt;";
  
        $('#output_div').append(html);
      }
    );
  }
  </code></pre>
  
  <p>However, a new version of the program does not work correctly. Here are the components.</p>
  
  <p>The modified SPARQL query works correctly:</p>
  
  <pre><code>PREFIX : &lt;http://dbpedia.org/resource/&gt;PREFIX dbp: &lt;http://dbpedia.org/ontology/&gt;PREFIX rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;PREFIX dbpprop: &lt;http://dbpedia.org/property/&gt;SELECT ?food ?abstract ?thumbnail ?caption WHERE { ?food rdf:type dbp:Food ; dbpprop:name ?name ; dbpprop:caption ?caption ; dbp:abstract ?abstract . OPTIONAL { ?food dbp:thumbnail ?thumbnail } FILTER ( regex(?name, "Calzone" )) FILTER ( langMatches(lang(?abstract), "EN"))} ORDER BY ?food
  </code></pre>
  
  <p>I've tested the query on the DBpedia Virtuoso SPARQL end point. Here is the result:</p>
  
  <pre><code>http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&amp;query=PREFIX+%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fresource%2F%3EPREFIX+dbp%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fontology%2F%3EPREFIX+rdf%3A+%3Chttp%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%3EPREFIX+dbpprop%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fproperty%2F%3ESELECT+%3Ffood+%3Fabstract+%3Fthumbnail+%3Fcaption+WHERE+{+%3Ffood+rdf%3Atype+dbp%3AFood+%3B+dbpprop%3Aname+%3Fname+%3B+dbpprop%3Acaption+%3Fcaption+%3B+dbp%3Aabstract+%3Fabstract+.+OPTIONAL+{+%3Ffood+dbp%3Athumbnail+%3Fthumbnail+}+FILTER+%28+regex%28%3Fname%2C+%22Calzone%22+%29%29+FILTER+%28+langMatches%28lang%28%3Fabstract%29%2C+%22EN%22%29%29}+ORDER+BY+%3Ffood&amp;format=text%2Fhtml&amp;timeout=30000&amp;debug=on
  </code></pre>
  
  <p>So far, so good.</p>
  
  <p>Here is the modified JSON + JavaScript program (with the operational SPARQL query).</p>
  
  <pre><code>function retrieveData() {
    var query = "PREFIX : &lt;http://dbpedia.org/resource/&gt;PREFIX dbp: &lt;http://dbpedia.org/ontology/&gt;PREFIX rdf: &lt;http://www.w3.org/1999/02/22-rdf-syntax-ns#&gt;PREFIX dbpprop: &lt;http://dbpedia.org/property/&gt;SELECT ?food ?abstract ?thumbnail ?caption WHERE { ?food rdf:type dbp:Food ; dbpprop:name ?name ; dbpprop:caption ?caption ; dbp:abstract ?abstract . OPTIONAL { ?food dbp:thumbnail ?thumbnail } FILTER ( regex(?name, "Calzone" )) FILTER ( langMatches(lang(?abstract), "EN"))} ORDER BY ?food";
  
    var url = 'http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&amp;query=' + encodeURIComponent(query) + '&amp;output=json';
  
    $.ajax({
      url: url,
      dataType: "json",
      success: function (data) {
        $('#results').show();
        $('#raw_output').text(JSON.stringify(data, null, 3));
        handle_json(data);
      },
      error: function(e) {}
    });
  }
  
  function handle_json(json) {
    $('#output_div').text("");
  
    $.each(
      json['results']['bindings'], function(index, value) {
        var html = "";
        name = value['food']['value'].replace("http://dbpedia.org/resource/", "");
        name = decodeURIComponent(name.replace(/_/g, " "));
        html += "&lt;div&gt;&lt;h3&gt;&lt;b&gt;" + name + ":&lt;/b&gt; (" + value['caption']['value'] + ")&lt;/h3&gt;&lt;/div&gt;";
  
        if (value['thumbnail'] != null)
          html += "&lt;div class='inline thumb'&gt;&lt;img style='width: 200px' src='" + value['thumbnail']['value'].replace("200px", "150px") + "'/&gt;&lt;/div&gt;";
        else
          html += "&lt;div class='inline thumb'&gt;&lt;img src=''/&gt;&lt;/div&gt;";
  
        html += "&lt;div class='inline abstract'&gt;" + value['abstract']['value'] + "&lt;/div&gt;&lt;div class='clear'&gt;&lt;/div&gt;&lt;br&gt;";
  
        $('#output_div').append(html);
      }
    );
  }
  </code></pre>
  
  <p>Here are the differences between the correct program and the incorrect program.</p>
  
  <ol>
  <li>The DBpedia ontology term is changed from <code>'person'</code> to <code>'food'</code>.</li>
  <li>The query field to be formatted in HTML output (encoded by <code>&lt;div&gt;&lt;h3&gt;&lt;/div&gt;&lt;/h3&gt;</code>) is changed from <code>['b_date']</code> to  <code>['caption']</code>.</li>
  </ol>
  
  <p>I suspect the problem is local to the <code>$.ajax</code> clause and the <code>JSON.stringify</code> statement: </p>
  
  <pre><code>$('#raw_output').text(JSON.stringify(data, null, 3));
  </code></pre>
  
  <p>Bottom line: I would like to generalize the first program for other applications, but am fumbling the JSON statements.</p>
  
  <ul>
  <li>Why does the second program fail when it is based on the first program? What am I doing wrong?</li>
  <li><p>Is there a better way to generalized the program (1) for other SPARQL queries with different terms; (2) with different numbers of terms; (3) for a SPARQL query of federated databases (only DBpedia is used in the example, but I'd like to format terms from a federated query - mashing up data from different RDF triplestores).</p>
  
  <ul>
  <li><a href="http://ontomatica.com/public/test/clavius.html" rel="nofollow">Working Example</a></li>
  <li><a href="http://ontomatica.com/public/test/calzone.html" rel="nofollow">Non-working Example</a></li>
  </ul></li>
  </ul>