- What I know
- Getting data from the Wikidata API using
curl - Getting data from the Wikidata API using jQuery
- Getting data from the Wikidata API using
- The problem
- The question
What I know
Getting data from the Wikidata API using curl
I know that it is possible to get data of Wikidata items through the Wikidata API. The following code block shows a shell command that uses curl to get the data of the Wikidata item Q549037.
$ curl -s 'https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037'
$ curl -s 'https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037' | jq | head -n 10
{
"entities": {
"Q549037": {
"pageid": 517337,
"ns": 0,
"title": "Q549037",
"lastrevid": 1899479542,
"modified": "2023-05-19T21:53:09Z",
"type": "item",
"id": "Q549037",
Getting data from the Wikidata API using jQuery
I also know that it is possible to use jQuery to do the same. The following code block shows HTML code that uses Jquery to get the data of the Wikidata item Q549037.
<body>
<p>This is a paragraph.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$.ajax({
url: 'https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037',
dataType: 'jsonp'
})
.done(function(data) {
if (console && console.log)
console.log(data)
})
</script>
</body>
The following screenshot shows Mozilla Firefox 113.0 and the console opened showing the data that was obtained through the Wikidata API.
The problem
I'm now trying to query Wikidata using Javascript but without using Jquery. The following code block shows what I've written.
<script>
const myHeaders = new Headers()
myHeaders.append("Access-Control-Allow-Origin", "*")
const request = new Request('https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037', {
method: "GET",
headers: myHeaders
})
fetch(request)
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("Something went wrong on API server!");
}
})
.then((response) => {
console.debug(response);
})
.catch((error) => {
console.error(error);
})
</script>
It fails with the following error in Mozilla Firefox 113.0
- Error no. 1:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037 - Error no. 2:
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. - Error no. 3:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <https://www.wikidata.org/w/api.php?format=json&action=wbgetentities&ids=Q549037>. (Reason: CORS request did not succeed). Status code: (null). > TypeError: NetworkError when attempting to fetch resource.
The following screenshot shows Mozilla Firefox 113.0 showing the errors that were mentioned above.
The question
What am I doing wrong? I want to be able to query Wikidata using Javascript, but without having to use a heavy library such as Jquery.
