Why do ajax returns a TypeError undefined error if it calls a function on success? : <p>Im trying to get the contents of a json file from my localhost and display it on my page, i made a custom function <code>displayProfile</code> that is called inside the <code>success</code> whenever the file exist on the directory. the problem is i get an error saying: </p>

<blockquote>
  <p>TypeError: data is undefined</p>
</blockquote>

<p><strong>JQUERY code version 1</strong></p>

<pre><code>$.ajax({
    url:'api/profile.json',
    dataType:'json',
    data: {format: "json"},
    success:function(data){
        displayProfile();
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus+' '+errorThrown);
        $("#myfirstname").text('Firstname');
        $("#mymiddlename").text('M.I.');
        $("#mylastname").text("Lastname");
        $("#mybiography").text("Biography")
        $("#myprofpic").attr("src","default.jpg");
        $("#mycoverphoto").css("background-image","url(defaultcover.jpg");
        }
});

var displayProfile = function(data){
    // initialize values
    var firstname = data.profile.firstname;
    var middlename = data.profile.middlename;
    var lastname = data.profile.lastname;
    var biography = data.profile.biography;
    var prof_pic = data.profile.profpic;
    var cover_photo = data.profile.coverphoto;

    // set values
    $("#myfirstname").text(firstname);
    $("#mymiddlename").text(middlename.substr(0,1)+".");
    $("#mylastname").text(lastname);
    $("#mybiography").text(biography)
    $("#myprofpic").attr('src',prof_pic);
    $("#mycoverphoto").css("background-image","url("+cover_photo+")");
};
</code></pre>

<p>But it works when i just copy the content of the function and paste it inside the success like this:</p>

<p><strong>JQUERY code version 2</strong></p>

<pre><code>$.ajax({
    url:'api/profile.json',
    dataType:'json',
    data: {format: "json"},
    success:function(data){
        // initialize values
        var firstname = data.profile.firstname;
        var middlename = data.profile.middlename;
        var lastname = data.profile.lastname;
        var biography = data.profile.biography;
        var prof_pic = data.profile.profpic;
        var cover_photo = data.profile.coverphoto;

        // set values
        $("#myfirstname").text(firstname);
        $("#mymiddlename").text(middlename.substr(0,1)+".");
        $("#mylastname").text(lastname);
        $("#mybiography").text(biography)
        $("#myprofpic").attr('src',prof_pic);
        $("#mycoverphoto").css("background-image","url("+cover_photo+")");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus+' '+errorThrown);
        $("#myfirstname").text('Firstname');
        $("#mymiddlename").text('M.I.');
        $("#mylastname").text("Lastname");
        $("#mybiography").text("Biography")
        $("#myprofpic").attr("src","default.jpg");
        $("#mycoverphoto").css("defaultcover.jpg)");
        }
});
</code></pre>

<p>Can you guys explain why version 2 works? i am a beginner with this languages. Thanks!</p>
