Error: Cannot read property 'text' of undefined

Question

I am having the error in the title while I am running this. I am trying to get the first paragraph parsed without any html while running this

HTML

<div id="headingWiki_0"><h3><span>Roman empire</span></h3></div>

JS

var titolo = $("#headingWiki_0 h3 span").text();
  $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&callback=?", {
    page: titolo
  }, function(data) {
    var markupt = data.parse.text["*"];
    var blurbt = $('<div></div>').html(markup);
    blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove();
    // remove links as they will not work
    blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); });
    // remove any references
    blurbt.find('sup').remove();
    // remove cite error
    blurbt.find('.mw-ext-cite-error').remove();
    $('#usp-custom-4').val($(blurbt).find('p'));

  });

Console says:

Uncaught TypeError: Cannot read property 'text' of undefined

Answer 1

Just remove the &callback=? from the url. It should look like:

https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=titolo

The url you use does not return a JSON, but this one should do.

If you have CORS problems, than you should make JSONP requests:

function onSuccess(data){
    var markupt = data.parse.text["*"];
    var blurbt = $('<div></div>').html(markup);
    blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove();
    // remove links as they will not work
    blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); });
    // remove any references
    blurbt.find('sup').remove();
    // remove cite error
    blurbt.find('.mw-ext-cite-error').remove();
    $('#usp-custom-4').val($(blurbt).find('p'));
}

$.ajax({
    url: "https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=titolo",
    dataType: "jsonp",
    jsonpCallback: "onSuccess"
})

Answer 2

Thanks to the I got from another so question , this is the code which works

 $("#wiki").on("click", function(){ firstWiki(); }); function onSuccess(data){ var markupt = data.parse.text["*"]; $('#usp-custom-4').text(markupt); console.log(markupt); var blurbt = $('<div></div>').html(markupt); blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove(); // remove links as they will not work blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); }); // remove any references blurbt.find('sup').remove(); // remove cite error blurbt.find('.mw-ext-cite-error').remove(); var pOnly = $(blurbt).find('p').text(); } function firstWiki() { var titolo = $("#headingWiki_0 h3 span").text(); titolo = encodeURIComponent(titolo); $.ajax({ url: "https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + titolo + "&callback=?", contentType: "application/json; charset=utf-8", dataType: "jsonp", success: onSuccess }); } 

 textarea { width: 100%; height: 200px; } input[type=checkbox] { display: none; } input[type=checkbox] + label { background: #999; display: inline-block; padding: 0; } input[type=checkbox]:checked + label { border: 10px solid grey; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="headingWiki_0"><h3><span>Impero romano</span></h3></div> <button id="wiki"> Load </button> <textarea id="usp-custom-4"></textarea> 

 $("#wiki").on("click", function(){ firstWiki(); }); function onSuccess(data){ var markupt = data.parse.text["*"]; console.log(markupt); var blurbt = $('<div></div>').html(markupt); blurbt.find(".mw-editsection, #toc, .noprint, .thumb, img, table").remove(); // remove links as they will not work blurbt.find('a').each(function() { $(this).replaceWith($(this).html()); }); // remove any references blurbt.find('sup').remove(); // remove cite error blurbt.find('.mw-ext-cite-error').remove(); var pOnly = $(blurbt).find('p').text(); $('#usp-custom-4').text(pOnly); } function firstWiki() { var titolo = $("#headingWiki_0 h3 span").text(); titolo = encodeURIComponent(titolo); $.ajax({ url: "https://it.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + titolo + "&callback=?", contentType: "application/json; charset=utf-8", dataType: "jsonp", success: onSuccess }); } 

 textarea { width: 100%; height: 200px; } input[type=checkbox] { display: none; } input[type=checkbox] + label { background: #999; display: inline-block; padding: 0; } input[type=checkbox]:checked + label { border: 10px solid grey; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="headingWiki_0"><h3><span>Impero romano</span></h3></div> <button id="wiki"> Load </button> <textarea id="usp-custom-4"></textarea>