Using fetch library for Wikipedia API - Javascript

Question

I'm developing a Wikipedia Viewer and I'm trying to extract some data from the Wikipedia API. This is supposed to be a normal request, any idea why this method is not giving any response? I'm using fetch library. The line console.log(data) doesn't run at all.

function getArticleList() {
    var searchFor = "";
    searchFor = document.getElementById('intext').value;
    console.log(searchFor);
    fetch("https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchFor + "&limit=5").then(function(resp) {
        console.log("trySearch");
        return resp.json()
    }).then(function(data) {
        console.log(data);
        document.querySelector.artName.innerText = data.object[1];
        document.querySelector.textArt.innerText = data.object[0];
        document.querySelector.href = data.object[2]
    })
};

Do you have any errors in your console? Does the "trySearch" log successfully? The `document.querySelector....` lines will fail for sure. — Heretic Monkey, Jan 31 '17 at 21:35
Mike, the "trySearch" doesn't log. The case is that the fetch is failing for some reason. I know the lines you mention won't work, they are just to ilustrate what I'm trying to do. Thank you. — Franco Javier Danussi, Jan 31 '17 at 21:47
Incidentally, the code above is not using “the fetch library”—instead it’s using the native [Fetch API](https://fetch.spec.whatwg.org/#fetch-api)—the same one documented in the [Using Fetch article at MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) — sideshowbarker, Feb 01 '17 at 03:55

aaron · Answer 1 · 2017-04-27T21:46:01.280

20

From Wikimedia's documentation: 'For anonymous requests, origin query string parameter can be set to * which will allow requests from anywhere.'

The following worked for me:

fetch("https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=Belgium&limit=5").then(function(resp) {
    console.log(resp);
    return resp.json()
}).then(function(data) {
    console.log(data);

Notice that I filled in my own search with 'Belgium', but your code should work with the right modifications.

edited Apr 27 '17 at 21:46

answered Apr 27 '17 at 20:32

aaron

351
2
10

The -2 comes from the first version of this answer; so, appropriately edited. – aaron Aug 16 '17 at 17:17

score -6 · Accepted Answer · answered Jan 31 '17 at 21:53

-6

Any particular reasons to use fetch library ? This can be done using simple Jquery AJAX.

 function getArticleList() {

 var searchFor = document.getElementById('intext').value;
 var response="";
 console.log(searchFor);
 $.ajax({
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&search="+searchFor+"&limit=5",
    dataType: 'jsonp',
    success: function(data){    
        console.log(data);
        response=data;
    }
}).done(function(response) {
      console.log(response);
      document.querySelector.artName.innerText = response.object[1];
      document.querySelector.textArt.innerText = response.object[0];
      document.querySelector.href = response.object[2];
  });

};

answered Jan 31 '17 at 21:53

Mahad

152
1
3

1

The answer from Aaron should be the correct one.. You just need to add origin=* query param to the request URL. jQuery is WAY larger than a simple fetch module, and given that he is using document.getElementById he is clearly not using jQuery nor should he in this instance. – Lux.Capacitor Jan 14 '18 at 11:08
1

The OP specifically asked not to use jQuery. It's also adds unnecessary weight to this kind of application. – tiffanywhitedev Feb 26 '18 at 03:12

Using fetch library for Wikipedia API - Javascript

2 Answers2