Execute SPARQL Query with vue.js

Question

I want to make a website by implementing the use of sparql in vue js. The scenario I want is to create a special place to write Sparql Query and then execute it with vue.js. Is all that possible? if possible how should i start it? if not possible, is there any other alternative than using vue.js? Please help.

Answer 1

I am not a JS pro by any means. Anyway, for a similar problem, I used axios for the HTTP request. This worked fine for my use case. Anyway, you will find a precise description of the JSON format at https

var params = new URLSearchParams();
// queryArtistsByNameTpl contains the actual SPARQL query,
// with $artistName as a placeholder
let similarGroupsQuery = queryArtistsByNameTpl.replace("$artistName", this.artistName);
params.append('query', similarGroupsQuery);
let getArtistsHandler = sparqlResponseHandler(this, 'artistList');
axios.post(sparqlEndPoint, params).then(getArtistsHandler);

function sparqlResponseHandler(currentObj, currList) {
  return function(response) {
    const rows = response.data.results.bindings;
    currentObj[currList] = [];
    if (rows.length > 0) {
      rows.forEach(function(item, index) {
        var record = {};
        for (var prop in item) {
          if (item.hasOwnProperty(prop)) {
            record[prop] = item[prop].value;
          }
        }
        currentObj[currList].push(record);
      })
    } else {
      console.log("no data from SPARQL end point");
    }
  }
}

The JSON resturned by SPARQl endpoints is specified in https://www.w3.org/TR/sparql11-results-json/ , which is rather short and very understandable.

The code can certainly be improved by someone more knowledgeable then me, but it was fine for the tech demo we used it for.