Search code examples
javascriptjqueryajaxjsondbpedia

Reference error on javascript using json data from dbpedia server


Hi all and thanks in advance for the help: i got this error:

Uncaught SyntaxError: Unexpected identifier

for line 65 (the line with the "Var query"... here the third line)

and when i click on the Execute button this is the other error:

Uncaught ReferenceError: retrieveData is not defined

(retrieveData is the function i call with the click)

i have used an existing code modifyng it for my purpose. the very strange things are:

1: the original code run without errors (and it seems to me quite the same)

2: if i paste the url and the query and &output=json on the browser, it works fine... so i think it's not an error about mispelling...

this is the code I wrote:

<script type="text/javascript">
function retrieveData() {
  var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, "Firenze")}";

  var url = 'http://it.dbpedia.org/sparql?default-graph-uri=&query=' + encodeURIComponent(query) + '&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['museum']['value'].replace("http://it.dbpedia.org/resource/", "");
     name = decodeURIComponent(name.replace(/_/g, " "));
      html += "<div><h3><b>" + name + ":</b> () </h3></div>";

      $('#output_div').append(html);
    }
  );
}
</script>

and this is the original code:

<script type="text/javascript">
function retrieveData() {
  var query = "PREFIX : <http://dbpedia.org/resource/> PREFIX dbp: <http://dbpedia.org/ontology/> PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> PREFIX dbpprop: <http://dbpedia.org/property/> 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 >= '1488-01-01'^^xsd:date && ?b_date < '1600-01-01'^^xsd:date && ?d_date < '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&query=' + encodeURIComponent(query) + '&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 += "<div><h3><b>" + name + ":</b> (" + value['b_date']['value'] + " - " + value['d_date']['value'] + ")</h3></div>";

      if (value['thumbnail'] != null)
        html += "<div class='inline thumb'><img style='width: 200px' src='" + value['thumbnail']['value'].replace("200px", "150px") + "'/></div>";
      else
        html += "<div class='inline thumb'><img src=''/></div>";

      html += "<div class='inline abstract'>" + value['abstract']['value'] + "</div><div class='clear'></div><br>";

      $('#output_div').append(html);
    }
  );
}
</script>

Thanks again

--UPDATE-- Obviously i 'm made a mess with quotation mark. Thanks dodl. Now it works. A LITTLE NOTE if anyone tries to run this script: It will come "XMLHttpRequest same domain policy error"... Just add the '&callback=?' in the url, using the built-in support for JSONP in JQUERY.


Solution

  • You're not escaping your quotation marks properly, ie:

    var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, "Firenze")}";
    

    should be

    var query = "SELECT ?museum WHERE {?museum a <http://dbpedia.org/ontology/Museum>.?museum <http://dbpedia.org/ontology/address> ?address. FILTER contains(?address, \"Firenze\")}";
    

    (Or alternatively, in javascript you can use single and double quotes to differentiate quotes within strings from string definition quotes.)