SharePoint CSOM Javascript Custom Employee SpotLight WebPart

<div class="carousel-wrapper">
  <div class="carousel-title">Know Your Friend</div>
  <div class="emp-carousel">
    <ul id="SpotlightContainer" class="bjqs">
      <!--<li> <img src="images/img1.jpg" />
        <div class="text">
          <h3>Maria Goretti</h3>
          <h5>(Marketing Lead)</h5>
          <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum </p>
        </div>
        <a href="#" class="knowmore">Know more</a> </li>-->
     
    </ul>
  </div>
</div>

<script type="text/javascript" src="_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js" ></script>
<script src="/js/carousel.min.js"></script>
<link rel="stylesheet" href="/css/carousel.css">
<script type="text/javascript">

var profilePropertyNames = ["PreferredName", "PictureURL", "FirstName", "Designation"];
var Spot={
ctx: null,
listname: 'Spotlight',
listitems:'',
spotUsers:[],
userProperties: [],
finalData: [],
Spot: function () {
        //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', Spot.load);
        Spot.Load();//write this line in main js load method
        Spot.ctx.executeQueryAsync(Function.createDelegate(this, function(){
Spot.onLoad();//write this line in main js onLoad method
}),
Function.createDelegate(this, Spot.QueryFailed ));
     
    },
    Load:function(){
   Spot.ctx = new SP.ClientContext.get_current();
   var list = Spot.ctx.get_web().get_lists().getByTitle(Spot.listname);
var query = new SP.CamlQuery();
   query.set_viewXml('');
Spot.listitems= list.getItems(query);
Spot.ctx.load(Spot.listitems);
   },
    onLoad:function(){
    var listEnumerator, title, userId, userName, loginName, pictureUrl, users=[], i=0, spotdescription, data=[];
    listEnumerator = Spot.listitems.getEnumerator();
while (listEnumerator.moveNext()) {
title = listEnumerator.get_current().get_item("Title");
userId= listEnumerator.get_current().get_item("UserName").get_lookupId();
spotdescription = listEnumerator.get_current().get_item("Description");
data.push({
        'userId': userId,
        'title': title,
        'spotdescription': spotdescription
       });
users[i] = Spot.ctx.get_web().getUserById(userId);
   Spot.ctx.load(users[i++]);
}//End while

/**/  Spot.ctx.executeQueryAsync(Function.createDelegate(this, function(){
      for( i=0; i < users.length;i++){
       console.log(users[i].get_loginName().split('|')[1]);
       console.log(users[i].get_id());
       Spot.spotUsers.push({
        'userId': users[i].get_id(),
        'userName': users[i].get_loginName().split('|')[1],
        'title': data[i].title,
        'spotdescription': data[i].spotdescription
       });
      }
   
      Spot.GetAllUserProperties();

/**/  }), Function.createDelegate(this, this.onFail));

    },
    QueryFailed : function(sender, args){
alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
},
GetAllUserProperties:function(){
var peopleManager = new SP.UserProfiles.PeopleManager(Spot.ctx);
for(var i=0 ; i < Spot.spotUsers.length ; i++){
     Spot.GetUserProperties(Spot.ctx, peopleManager, Spot.spotUsers[i].userId, Spot.spotUsers[i].userName, profilePropertyNames);
}
},
GetUserProperties:function(clientContext, peopleManager, userId, targetUser, profilePropertyNames){
var userProfilePropertiesForUser = new SP.UserProfiles.UserProfilePropertiesForUser(
 clientContext,
 targetUser,
 profilePropertyNames);
var userProfileProps = peopleManager.getUserProfilePropertiesFor(userProfilePropertiesForUser);
Spot.ctx.load(userProfilePropertiesForUser);
Spot.ctx.executeQueryAsync(
  function () {
  var jsonContent=[], jsonData = '{[';
  for(var j=0; j< profilePropertyNames.length; j++){
  var data='{"' + profilePropertyNames[j] + '":"' + userProfileProps[j] + '"}' ;
  jsonContent.push(data);
  }
  if(profilePropertyNames.length){
  Spot.userProperties.push({ 'userId': userId, 'prop': jsonContent });
  }
 
  Spot.SyncData();
},
  function () { Spot.QueryFailed });
},

SyncData: function(){
var users = Spot.spotUsers,
props = Spot.userProperties,
sync = [];
$.grep(users, function( a ) {

       $.grep(props, function( b ) {

if(a.userId == b.userId){
sync.push({ 'userId': a.userId, 'title' : a.title,'spotdescription':a.spotdescription, 'prop': b.prop });
}

});

});

Spot.finalData = sync;
Spot.BindToHTML();
},

BindToHTML: function(){
var html='', imgUrl, userName, desig, desc, spotdescription, title, props=[];

$.grep(Spot.finalData, function( p ) {
props=[];
for(var i=0; i< p.prop.length; i++){
props.push($.parseJSON(p.prop[i]));
}
imgUrl = props[1].PictureURL;
userName = props[0].PreferredName;
desig = props[3].Designation;
spotdescription = p.spotdescription;
desc = 'Temp Desc';
summary = 'Temp Summary';
title = p.title;

html += '<li><img src="'+ imgUrl +'" />' +
        '<div class="text">' +
          '<h3>' + userName + '</h3>' +
          '<h5>(' + desig + ')</h5>' +
          '<p>' + spotdescription + '</p>' +
        '</div>' +
        '<a href="' + spotdescription + '" class="knowmore">Know more</a>' +
       '</li>';
});
$('#SpotlightContainer').html(html);

$('.emp-carousel').bjqs({
animtype      : 'fade',
responsive    : false,
randomstart   : false
});

}
};

</script>