jQuery Ajax throws error while using JSON Parse for Wikipedia API

Question

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)

jquery ajax

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)

rajatha · Answer 1 · Aug 2, 2022

<!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.