get 'AssignTo' display name in Office 365 using jQuery?

Question

I am trying to get the display name for filed 'AssignTo' , I have used this :

var AssignToValue = MyTasksListListItem.get_item("AssignTo");

but it gives me [object Object]

then I added this for lookup :

var AssignToValue = MyTasksListListItem.get_item("AssignTo");
        AssignToValue.get_lookupValue()

and it is not working.

any solution please.

The Full code :

//-----------------------------------------------------------

// Tasks List Retrival //-----------------------------------------------------------

function GetMyTasksListList(itemId) {
var clientContextMyTasksListList = new SP.ClientContext.get_current();
var MyTasksListList = clientContextMyTasksListList.get_web().get_lists().getByTitle('All Tasks');
//Start
var MyTasksListcamlQuery = new SP.CamlQuery();
MyTasksListcamlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Subject_x003a_ID"></FieldRef><Value Type="Text">' + itemId + '</Value></Eq></Where><OrderBy><FieldRef Name=\'ID\' Ascending=\'FALSE\' /></OrderBy></Query></View>');
//END

this.MyTasksListcollListItem = MyTasksListList.getItems(MyTasksListcamlQuery);
clientContextMyTasksListList.load(MyTasksListcollListItem);
clientContextMyTasksListList.executeQueryAsync(
    Function.createDelegate(this, this.onMyTasksListQuerySucceeded),
    Function.createDelegate(this, this.onMyTasksListQueryFailed)
);
}


function onMyTasksListQuerySucceeded(sender, args) {

var MyTasksListlistItemEnum = MyTasksListcollListItem.getEnumerator();

var count = MyTasksListcollListItem.get_count();

//alert(count);

var MyTasksListList = '';
if (count > 0) {
    while (MyTasksListlistItemEnum.moveNext()) {
        var MyTasksListListItem = MyTasksListlistItemEnum.get_current();

        var MyTasksListTitle = MyTasksListListItem.get_item("Title");

        var MyTasksListCreatedDate = new Date(MyTasksListListItem.get_item("Created"));

        var userName = MyTasksListListItem.get_item("AssignedTo").get_lookupValue();/;//replace AssignedTo with your person column
        var user = web.ensureUser(userName);
        var email = user.get_email();
        var loginName = user.get_loginName();


        var Author = MyTasksListListItem.get_item("Author");

        MyTasksListList += '<tr>' +
            '<td>' + MyTasksListListItem.get_item('ID') + '</td>' +
            '<td>' + MyTasksListTitle + '</td>' +
            '<td>' + MyTasksListCreatedDate.toDateString() + '</td>' +
            //'<td><a href="#" class="text-info">' + Author.get_lookupValue() + '</a></td>' +
            '<td><a href="#" class="text-info">' + loginName + '</a></td>' +
            '</tr>';
    }

}

else {
    MyTasksListList += '<tr><td colspan="6">No comment Related to this subject yet</td></tr>';
}

MyTasksListList += '';
$('#MyTasksListContainer').html(MyTasksListList);

//notify_i('Info', 'What\'s Next Updated');

}

function onMyTasksListQueryFailed(sender, args) {
notify_e('Request failed', args.get_message() + '\n' + args.get_stackTrace());

}

Answer 1

Please try this below code:

SP.SOD.executeFunc("sp.js", "SP.ClientContext", function(){
SP.SOD.registerSod("sp.userprofiles.js", SP.Utilities.Utility.getLayoutsPageUrl("sp.userprofiles.js"));
SP.SOD.executeFunc("sp.userprofiles.js", "SP.UserProfiles.PeopleManager", getTaskListItem);
});
        function getTaskListItem(){
        var item;    
            var clientContext = new SP.ClientContext.get_current();

            var web = clientContext.get_web();

            var list = web.get_lists().getByTitle('Tasks'); //replace with your custom list

            item = list.getItemById(1);

            clientContext.load(item);

            clientContext.executeQueryAsync(onSuccess, onFailure);
        }
        function onSuccess(){
        var context = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var userName = item.get_item("AssignedTo").get_lookupValue();//replace AssignedTo with your person column
        var user = web.ensureUser(userName);
        var email = user.get_email();
    var loginName = user.get_loginName();

        }
        function onFailure(){

            console.log('Failure!');
        }

Hope this will help you!

Answer 2

Why use JSOM when you can REST :)

You can try the below REST endpoint. Basically, you need to expand the AssignTo field an then retrieve values.

_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Test')/items?$select=AssignTo/Title&$expand=AssignTo

The REST call using plain jQuery would be as below:

$.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Test')/items?$select=AssignTo/Title&$expand=AssignTo",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {                  
                console.log(data); 
            },
            error: function (data) {
                console.log(data);
            }
      });

Possible values you can use in the expansion of AssignedTo are as below:

Title

Name

Email

MobilePhone

SipAddress

Department

JobTitle

FirstName

LastName

WorkPhone

UserName

Office

ID

Modified

Created

ImnName

NameWithPicture

NameWithPictureAndDetails

ContentTypeDisp

Reference - REST expand people column

Using the SharePoint User Type Field (People or Group) in List