SPClientPeoplePicker.SPClientPeoplePickerDict ProcessedUserList DisplayName values

Question

I've used this code (found on this site) to access a people picker field in SP2016:

var peoplePickerID = "field title"; 
var clientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title^="' + peoplePickerID + '"]')[0].id];

Seems to work well and I've console logged the output that looks like this image below. (Have redacted info but the basics are there.)

What I need to do is get the DisplayName from the ProcessedUserList. There may be more than one name in the field.

Any ideas how to get the DisplayName?

Answer 1

You can get the display name of users from people picker field using below code:

var peoplePickerID = "TestPersonField";
var clientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title^="' + peoplePickerID + '"]')[0].id];
var peoplePickerUsersInfo = clientPeoplePicker.GetAllUserInfo();
if (peoplePickerUsersInfo.length > 0) {
    for(var index = 0; index < peoplePickerUsersInfo.length; index++) {
        console.log(peoplePickerUsersInfo[index].DisplayText);
    }
}

Output:

---

Update from comments:

If above code is not working for you, you can use below code to extract "DisplayName" from "ProcessedUserList":

var peoplePickerID = "TestPersonField";
var clientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title^="' + peoplePickerID + '"]')[0].id];
var processedUserList = clientPeoplePicker.ProcessedUserList;
var objectKeys = Object.keys(clientPeoplePicker.ProcessedUserList);

for(var i = 0; i < objectKeys.length; i++) {
    if(processedUserList[objectKeys[i]].hasOwnProperty("DisplayName")) {
        var displayName = processedUserList[objectKeys[i]].DisplayName;
        console.log(displayName);
    }
}