Почему ajax возвращает неопределенную ошибку TypeError, если она вызывает функцию при успешном завершении?

Question

Im, пытаясь получить содержимое json-файла с моего локального хоста и отобразить его на моей странице, я создал пользовательскую функцию displayProfile, которая вызывается внутри success всякий раз, когда файл существует в каталоге. проблема в том, я получаю сообщение об ошибке сказав:

TypeError: data is undefined

Jquery код версии 1

$.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+")"); 
}; 

Но это работает, когда я просто скопировать содержимое функции и вставить ее успеха, как это:

Jquery код версии 2

$.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)"); 
     } 
}); 

Можете ли вы объяснить, почему работает версия 2? Я начинаю с этого языка. Благодаря!

Answer 1

Вы не передавая данные в функции:

success:function(data){ 
    // Provide the data to the function as parameter 
    displayProfile(data); 
} 

Answer 2

Вы должны пройти data возвращенное в обработчик успеха:

success:function(data){ 
    displayProfile(data); 
}, 

Why version 2 Works?

Это происходит потому, что вы имеете в виду данные непосредственно в обработчике успеха и данные определяются в параметрах функции.

В то время как в вашем первом случае вы не прошли data, возвращенный из ajax. Таким образом, результаты в undefined и Не работает.

---

И, как указаны выше в комментариях Рори упоминается использовать эту функцию в качестве ссылки вместо этого, то он будет в состоянии решить data, как это определенно в парах функции в:

success: displayProfile, 

Answer 3

$.ajax({ 
    url:'api/profile.json', 
    dataType:'json', 
    data: {format: "json"}, 
    success:function(data){ 
     displayProfile(data);//Must have the corresponding parameters 
    }, 
    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+")"); 
};