When Multiples are Allowed - Finding the IDs of the People Selected in a peoplePicker

Question

On another page, I have a peoplepicker saving to SharePoint (when only one person can be selected). I used this tutorial (https://www.c-sharpcorner.com/article/custom-people-picker-in-sharepoint-online/)

And, I'm trying to adapt that to grab the id's of people when more than one is allowed... I "thought" I did this correctly by putting it into an array, but I'm missing something. Appreciate any help/suggestions..

function ensureUser() {

        var peoplePickerTopDivId = $('#peoplePickerUsers').children().children().attr('id');
        var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerTopDivId];
        var users = peoplePicker.GetAllUserInfo();
        var arryuser = users[0];
        if (arryuser) {
            var payload = { 'logonName': arryuser.Key };
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/ensureuser",
                type: "POST",
                async: false,
                contentType: "application/json;odata=verbose",
                data: JSON.stringify(payload),
                headers: {
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "accept": "application/json;odata=verbose"
                },
                success: function (data, status, xhr) {
                    UserId = data.d.Id;
                },
                error: function (xhr, status, error) {
                }
            });
        }
        else {
            UserId = 0;
        }
    }


function addRequest() {


        var userID = [];
        $('.peoplePickerUsers:selected').each(function () {
            userID .push($(this).val());
        })

        var item = {
            "__metadata": { "type": "SP.Data.NewDepartmentListItem" },

            "EmployeeID":{
                "__metadata": { "type": "Collection(Edm.String)" },
                "results": UserId
            }       };


        $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/lists/getbytitle('" + listName + "')/Items",
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function (data) {


            },
            error: function (data) {

            }
        });
        return false;
    }

Answer 1

You've got a lot of code here but the only code that's relevant to the question is the first four lines of the first function.

The code looks correct on first glance but the devil is in the details. I think your errors are most likely to be an incorrect jQuery selector or a people field that's not configured as you expect. Or maybe your SPClientPeoplePicker is not resolving, which might be a page load timing issue or a missing JS reference.

Try hardcoding the peoplePickerTopDivId just to see if that resolves your issue. Also, drop a breakpoint or a console.log on the users object. You would expect an array but you want to make sure.

Also are there any console errors showing up?