Hit a button and get a result using Wikipedia api

Question

I am trying to use wikipedia api in order to get the content of a page by hitting a button. My code seems not to be working. In fact, when I hit my button, I get nothing in return.

What am i doing wrong? I saw some tutorials, but I can't get the code working.

Here's my code:

<!DOCTYPE html>
<html>

    <head>
    
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie-edge">
        <title>Raccolta differenziata</title>
        <script src="jquery-3.5.0.js"></script>
        <script type="text/javascript" src="funzioniGoto.js"></script>
    
    </head>
    
    
    <body>
    
        <p> aggiungere api wikipedia :)</p>
        
        <div class="container">
            <h1>Wikipedia Search</h1>
            <input type="text" id="sTerm" name="search" placeholder="Search..."></input>
            <button id='go' type="button">Submit</button>
            <div id="data"></div>
        </div>
        
        <script>
            $('#go').click(() => {
                searchTerm = $('#sTerm').val()
                $.ajax({
                    url: 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extract&titles='+searchTerm+'&redirects=true',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Content-Type': 'application/json'
                    },
                    method: 'GET',
                    dataType: 'jsonp',
                    data: '',
                    success: function(data) {
                        dataNum = Object.keys(data.query.pages)[0]
                        $('#data').empty()
                        $('#data').append('<h1>${data.query.pages[dataNum].title}</h1>') // virgoletta `
                        $('#data').append(data.query.pages[dataNum].extract)
                    }
                })
                    
            })
        
        </script>
        
    </body>
    
</html>

Also, is there a way to find out what's happening? Refreshing the browser and using developer tools is not enough.

Basically, my idea is to open an html page and then find some wikipedia content (which my api should get from a page/article).

Errors:

appears "${data.query.pages[dataNum].title}"
A cookie associated with a cross-site resource at http://en.wikipedia.org/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

in the url you are using, the param `prop` has an incorrect value i.e. `extract`: missing `s` it should be : `prop=extracts` and you click handler should use `#go` to find the button to register handler correctly — developer, May 18 '20 at 12:10

score 1 · Accepted Answer · answered May 18 '20 at 12:07

1

Since you are doing a click on id , you need to use #go. Can you try to use -

$('#go').click(()

Js Fiddle here

answered May 18 '20 at 12:07

Mukesh Keshu

467
2
13

1

I have added a js fiddle. – Mukesh Keshu May 18 '20 at 12:13
1

You can print the data inside success function to see if the value you are parsing is in response. – Mukesh Keshu May 18 '20 at 12:37
1

you can add &prop=extracts to the url. This is working - https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extract&titles=harry%20potter&redirects=true&prop=extracts – Mukesh Keshu May 18 '20 at 12:42
It's great! Thanks. btw, what if I need just a part of the article, like the introduction or a single section? Do you have any advise also about it? – hellomynameisA May 18 '20 at 13:56
1

See this - https://stackoverflow.com/questions/8555320/is-there-a-clean-wikipedia-api-just-for-retrieve-content-summary – Mukesh Keshu May 18 '20 at 14:24
Thank you!! You really made my day! – hellomynameisA May 18 '20 at 14:36

Hit a button and get a result using Wikipedia api

1 Answers1