JSON данные обработка на Jquery и вывод в HTML

// Defined to be called from ajax 
$.fn.drawFriends = function (data) { 
  // В этом случае JSON файл не дублируется в консоли, не выводит нечего в HTML. 
  var html = ""; 
  //---------------------------------------------------------------- 
  //         Этот массив неизвестен ??? 
  //---------------------------------------------------------------- 
  var friends = [{first_name: "Petrov"}]; 
  var i = 0; 
  //---------------------------------------------------------------- 
   
  var f = friends[i]; // Is not defined !!!! 
  html += '<h1>' + f.first_name + '</h1>'; 
 
  var bdjson = data;//$.parseJSON(data); // В случае с получением JSON не нужно парсить  
  console.log(data[0]); // debug print 
 
  html += '<h3>' + bdjson[0].name + '</h3><br>'; // first_name changed to name 
  //---------------------------------------------------------------- 
   
  var res = document.getElementById("res"); 
  res.innerHTML += html; 
  //---------------------------------------------------------------- 
   
} 
 
function sendRequest(method, params, func) { 
  $.ajax({ 
    url: 'https://jsonplaceholder.typicode.com/users', // testing JSON 
    method: 'GET', 
    dataType: 'JSONP', 
    success: function(data) { 
      $.fn.drawFriends(data); // Обработка результатов 
    } 
    // Получение ответа и вывод в консоле (подразумевается что data это название или обозначение JSON массива 
  }); 
} 
 
function loadFriends() { 
  sendRequest('friends.search', { 
    count: 60, 
    fields: 'photo_100' 
  }, function(data) { 
    drawFriends(data); 
  }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button onclick="sendRequest()">Send</button> 
<div id="res"></div>