jQuery Ajax throws error while using JSON Parse for Wikipedia API

0 votes

I'm trying to Parse JSON data using the Wikipedia API, The URL returns json data properly and i want the snippet part of the search notation... but running into errors. I have added the code for your consideration and also going through some JSON parsing tutorials but this errors cant seems to be going away..

JSON DATA:

{
    "batchcomplete": "",
    "continue": {
        "sroffset": 10,
        "continue": "-||"
    },
    "query": {
        "searchinfo": {
            "totalhits": 1773
        },
        "search": [
            {
                "ns": 0,
                "title": "Avengers: Infinity War",
                "pageid": 44240443,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War is a 2018 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            },
            {
                "ns": 0,
                "title": "Avengers: Endgame",
                "pageid": 44254295,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: Endgame is a 2019 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            },
            {
                "ns": 0,
                "title": "Avengers Infinity",
                "pageid": 3511035,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> is a four-issue American comic book limited series published from September to December 2000 by Marvel Comics. It was written by Roger"
            },
            {
                "ns": 0,
                "title": "Production of Avengers: Infinity War and Avengers: Endgame",
                "pageid": 46208997,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War and <span class=\"searchmatch\">Avengers</span>: Endgame are American superhero films based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios"
            },
            {
                "ns": 0,
                "title": "List of Marvel Cinematic Universe films",
                "pageid": 42163310,
                "snippet": "Captain America: Civil War, The <span class=\"searchmatch\">Avengers</span>, and <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War), and the final day showing Iron Man and The <span class=\"searchmatch\">Avengers</span> as chosen by the fans via a Twitter"
            },
            {
                "ns": 0,
                "title": "The Infinity Gauntlet",
                "pageid": 515090,
                "snippet": "third and fourth <span class=\"searchmatch\">Avengers</span> films were revealed to be <span class=\"searchmatch\">Infinity</span> War - Part I and <span class=\"searchmatch\">Infinity</span> War - Part II. As the 2018 release of <span class=\"searchmatch\">Infinity</span> War neared, several"
            },
            {
                "ns": 0,
                "title": "Avengers: Infinity War (soundtrack)",
                "pageid": 57256096,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War (Original Motion Picture Soundtrack) is the film score for the Marvel Studios film <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War by Alan Silvestri. Hollywood"
            },
            {
                "ns": 0,
                "title": "Infinity Gems",
                "pageid": 606571,
                "snippet": "mid-credits scene of <span class=\"searchmatch\">Avengers</span>: Age of Ultron revealed Thanos had acquired a left-handed gauntlet (the real one). <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War elaborates on this"
            },
            {
                "ns": 0,
                "title": "Infinity (comic book)",
                "pageid": 38382468,
                "snippet": "Vol 2013 <span class=\"searchmatch\">Infinity</span> <span class=\"searchmatch\">Avengers</span> Vol 5 #16 <span class=\"searchmatch\">Avengers</span> Vol. 5 #17 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #8 <span class=\"searchmatch\">Infinity</span> #1 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #9 <span class=\"searchmatch\">Infinity</span> #2 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #10"
            },
            {
                "ns": 0,
                "title": "Avengers: Age of Ultron",
                "pageid": 36484254,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: Age of Ultron is a 2015 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            }
        ]
    }
}

Code

<!Doctype html>
<html>
    <head>
        <title>Wikipedia API Posts</title>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {

    var searchp = 'AVENGER INFINITY WAR';

    $.ajax({
        method: "GET",
        dataType: "jsonP",
url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&format=json&srprop=snippet&srsearch='+searchp,

        success: function(response) {
            var s = $.parseJSON(response.responseText);
        console.log(s);

              $("#WikipediaAPI").html(s.search[snippet]);

        }
    });

});
</script>
    </head>

<body>
    <div id="WikipediaAPI"></div>
</body> 
</html>

Returns this error:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at Object.success (wikipedia-fetch-api.html:18)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at HTMLScriptElement.i (jquery.min.js:2)
    at HTMLScriptElement.dispatch (jquery.min.js:2)
    at HTMLScriptElement.v.handle (jquery.min.js:2)

jqueryajax

I'm trying to Parse JSON data using the Wikipedia API, The URL returns json data properly and i want the snippet part of the search notation... but running into errors. I have added the code for your consideration and also going through some JSON parsing tutorials but this errors cant seems to be going away..

JSON DATA:

{
    "batchcomplete": "",
    "continue": {
        "sroffset": 10,
        "continue": "-||"
    },
    "query": {
        "searchinfo": {
            "totalhits": 1773
        },
        "search": [
            {
                "ns": 0,
                "title": "Avengers: Infinity War",
                "pageid": 44240443,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War is a 2018 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            },
            {
                "ns": 0,
                "title": "Avengers: Endgame",
                "pageid": 44254295,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: Endgame is a 2019 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            },
            {
                "ns": 0,
                "title": "Avengers Infinity",
                "pageid": 3511035,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> is a four-issue American comic book limited series published from September to December 2000 by Marvel Comics. It was written by Roger"
            },
            {
                "ns": 0,
                "title": "Production of Avengers: Infinity War and Avengers: Endgame",
                "pageid": 46208997,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War and <span class=\"searchmatch\">Avengers</span>: Endgame are American superhero films based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios"
            },
            {
                "ns": 0,
                "title": "List of Marvel Cinematic Universe films",
                "pageid": 42163310,
                "snippet": "Captain America: Civil War, The <span class=\"searchmatch\">Avengers</span>, and <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War), and the final day showing Iron Man and The <span class=\"searchmatch\">Avengers</span> as chosen by the fans via a Twitter"
            },
            {
                "ns": 0,
                "title": "The Infinity Gauntlet",
                "pageid": 515090,
                "snippet": "third and fourth <span class=\"searchmatch\">Avengers</span> films were revealed to be <span class=\"searchmatch\">Infinity</span> War - Part I and <span class=\"searchmatch\">Infinity</span> War - Part II. As the 2018 release of <span class=\"searchmatch\">Infinity</span> War neared, several"
            },
            {
                "ns": 0,
                "title": "Avengers: Infinity War (soundtrack)",
                "pageid": 57256096,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War (Original Motion Picture Soundtrack) is the film score for the Marvel Studios film <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War by Alan Silvestri. Hollywood"
            },
            {
                "ns": 0,
                "title": "Infinity Gems",
                "pageid": 606571,
                "snippet": "mid-credits scene of <span class=\"searchmatch\">Avengers</span>: Age of Ultron revealed Thanos had acquired a left-handed gauntlet (the real one). <span class=\"searchmatch\">Avengers</span>: <span class=\"searchmatch\">Infinity</span> War elaborates on this"
            },
            {
                "ns": 0,
                "title": "Infinity (comic book)",
                "pageid": 38382468,
                "snippet": "Vol 2013 <span class=\"searchmatch\">Infinity</span> <span class=\"searchmatch\">Avengers</span> Vol 5 #16 <span class=\"searchmatch\">Avengers</span> Vol. 5 #17 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #8 <span class=\"searchmatch\">Infinity</span> #1 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #9 <span class=\"searchmatch\">Infinity</span> #2 New <span class=\"searchmatch\">Avengers</span> Vol. 3 #10"
            },
            {
                "ns": 0,
                "title": "Avengers: Age of Ultron",
                "pageid": 36484254,
                "snippet": "<span class=\"searchmatch\">Avengers</span>: Age of Ultron is a 2015 American superhero film based on the Marvel Comics superhero team the <span class=\"searchmatch\">Avengers</span>, produced by Marvel Studios and distributed"
            }
        ]
    }
}

Code

<!Doctype html>
<html>
    <head>
        <title>Wikipedia API Posts</title>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {

    var searchp = 'AVENGER INFINITY WAR';

    $.ajax({
        method: "GET",
        dataType: "jsonP",
url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&format=json&srprop=snippet&srsearch='+searchp,

        success: function(response) {
            var s = $.parseJSON(response.responseText);
        console.log(s);

              $("#WikipediaAPI").html(s.search[snippet]);

        }
    });

});
</script>
    </head>

<body>
    <div id="WikipediaAPI"></div>
</body> 
</html>

Returns this error:

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at Object.success (wikipedia-fetch-api.html:18)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at HTMLScriptElement.i (jquery.min.js:2)
    at HTMLScriptElement.dispatch (jquery.min.js:2)
    at HTMLScriptElement.v.handle (jquery.min.js:2)

Aug 2 in Web Development by gaurav
• 18,960 points
122 views

1 answer to this question.

0 votes
<!Doctype html>
<html>
    <head>
        <title>Wikipedia API Posts</title>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {

    var searchp = 'AVENGER INFINITY WAR';

    $.ajax({
        method: "GET",
        dataType: "jsonP",
url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&format=json&srprop=snippet&srsearch='+searchp,

        success: function(response) {
            var s = response.query.search
            var snippetEl = "";
            console.log(s)
              $.each(s, function(index, el) {
                  snippetEl += el.snippet;
                  snippetEl += '<br/><br/>';
              })
              $("#WikipediaAPI").html(snippetEl);

        }
    });

});
</script>
    </head>

<body>
    <div id="WikipediaAPI"></div>
</body> 
</html>

try to console.log(response) to see the available properties of that object.

answered Aug 2 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

jQuery ajax error function

I have an ajax call passing data ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
119 views
0 votes
1 answer

External API GET() request using jQuery

Replace: $.ajax({ type: "GET", url: "http://www.imdbapi.com/", cache: false, data: dataString, success: function(html){ //$("#more").after(html); alert("Success!"); } }); With $.getJSON('http://www.imdbapi.com/?' + ...READ MORE

answered Aug 5 in Web Development by rajatha
• 7,440 points
24 views
0 votes
1 answer

How to download a file by jQuery.Ajax?

Hello @kartik, You don't need to do this ...READ MORE

answered Sep 18, 2020 in Web Development by Niroj
• 82,780 points
5,723 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,440 points
65 views
0 votes
1 answer

jQuery AJAX submit form

There is a simple input mentioned below ...READ MORE

answered Feb 8 in Java by Soham
• 9,150 points
375 views
0 votes
1 answer

TypeError: $.ajax(...) is not a function?

Please double-check if you're using the full-version ...READ MORE

answered Feb 22 in Others by Aditya
• 7,660 points
798 views
0 votes
1 answer

jQuery Ajax error handling, show custom exception messages

Make sure you're setting Response.StatusCode to something other than ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
899 views
0 votes
0 answers

Edit PHP query code depending on image map clicked area using AJAX

I am working on an image map ...READ MORE

Jun 3 in PHP by Kichu
• 19,040 points
31 views
0 votes
1 answer

Using Jquery Ajax to retrieve data from Mysql

Perform a AJAX GET request to get ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,440 points
788 views
0 votes
1 answer

Problems with JQuery $.ajax request to random.org api

You need to stringify the data yourself ...READ MORE

answered Aug 1 in Web Development by rajatha
• 7,440 points
54 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP