Кажется, моя функция неправильно отображает имена в журнале консоли, разделенные после нажатия, как я пытаюсь реализовать правильно. Это дает мне эту неопределенную ошибку, отображаемую здесь: 
Однако код, который он выдает с ошибкой, "response.data[i]" , правильно отображается на стороне html в теге привязки, как показано в коде (по ссылке ниже) и на этом снимке экрана:

Итак, как это не определено при нажатии, чтобы разделить имя в журнале консоли, но четко работает, когда оно отображается? Также console.log(response.data); команда четко отображает response.data , как показано здесь:

Так что я просто не понимаю, как это исправить, чтобы правильно отображать имена в журнале консоли после нажатия, будь то имя из двух слов или имя из трех слов.
Код:
function getGroupWall() {
$("#groupUL").html("");
FB.api('/421727124532461/feed', 'get', function(response){
console.log(response.data);
for (i=10, j=response.data.length; i<=j; i++) {
function splitName(txt){
var myString = txt;
var mySplitResult = myString.split(" ");
console.log("The first element is " + mySplitResult[0]);
console.log("<br /> The second element is " + mySplitResult[1]);
console.log("<br /> The third element is " + mySplitResult[2]);
};
$("#groupUL").append("<li>" + "<h4>Item Description:</h4> " + response.data[i].message + "<br /> " + "<h2>Posted By:</h2> <a href='#' id='splitNames'>" + response.data[i].from.name + "</a>" + "<br />"+ "<h4># of Replys: </h4>" + response.data[i].comments.count + "<br />" + "<a href='" + response.data[i].link + "' target='new' style='text-align:right;'>(external url)</a>" + "<br /> " + "<img src='"+response.data[i].picture+"'>" + "</li><br />");
$("#splitNames").click(function(){ splitName(response.data[i].from.name) });
}
});
}