Get Username from List Person Field using SP.JS

Question

I have a List I'm trying to render using SP.JS/CAML. This is working fine apart from the fact that the two 'Person' data type fields (Change Requestor and Created By) are output as '[object Object]'.

I've tried the method I've seen posted on SE and elsewhere of using .get_lookupValue() against the field item (I only need to display the username, don't need the associated profile details) but all this does is stop any output from happening with the console error 'Home.aspx:1017 Uncaught TypeError: userName.get_lookupValue is not a function'.

Every article I can find provides the same solution which hinges on the above function working against the Person field, so I'm totally stuck as to where to go next.

Full code below - any help appreciated.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    var clientContext;
    var oWebsite;
    var oList;
    var collListItem;
    ExecuteOrDelayUntilScriptLoaded(openContext, "sp.js");
});

function openContext() {
  // Wait until SP.JS has loaded before calling getWebUserData
  clientContext = new SP.ClientContext("https://xxx.sharepoint.com/sites/somesite");
  oWebsite = clientContext.get_web();
  oList = oWebsite.get_lists().getByTitle('xxx');
  var camlQuery = new SP.CamlQuery();
  camlQuery.set_viewXml("<View><Query /><ViewFields><FieldRef Name='Service' /><FieldRef Name='Change_x0020_Overview' /><FieldRef Name='Related_x0020_Ticket_x0020__x002' /><FieldRef Name='Change_x0020_Requestor' /><FieldRef Name='Created' /><FieldRef Name='Author' /></ViewFields><QueryOptions /></View>");
  collListItem = oList.getItems(camlQuery);
  clientContext.load(collListItem);
  clientContext.executeQueryAsync(onQuerySucceeded,onFailure);
  }

function onQuerySucceeded() {
    console.log('No errors... this time.');

    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    var camlOutput = "<table>";

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var thisId = oListItem.get_id();
        var thisService = oListItem.get_item('Service');
        var thisOverview = oListItem.get_item('Change_x0020_Overview');
        var thisTicketNumber = oListItem.get_item('Related_x0020_Ticket_x0020__x002');
        //var thisRequestor = oListItem.get_item('Change_x0020_Requestor');
        var userName = oListItem.get_item("Change_x0020_Requestor");
        userName = userName.get_lookupValue();
        alert(userName);
        var thisCreated = oListItem.get_item('Created');
        var thisAuthor = oListItem.get_item('Author');

        // Need to add checking for nulls and for object extraction on Person fields (thisRequestor, thisAuthor); also shorten date output
        var thisRow = "<tr><td>" + thisId + "</td><td>" + thisService + "</td><td>" + thisOverview + "</td><td>" + thisTicketNumber + "</td><td>" + userName + "</td><td>" + thisCreated + "</td><td>" + thisAuthor + "</td></tr>";
        camlOutput = camlOutput + thisRow;
    }

    camlOutput = camlOutput + "</table>";
    document.getElementById('camlDump').innerHTML = camlOutput;
}

function onFailure(msg) {
  console.log('An error occoured.');
}

</script>

<div id="camlDump" name="camlDump"></div>

Answer 1

Please try below code to get multiple User from list column

    var itemId = 1; // Item ID
    var targetListItem; // List variable
    function getItemByID() {
        var clientContext = new SP.ClientContext();
        var targetList = clientContext.get_web().get_lists().getByTitle('{List Name}'); //SET list name here
        targetListItem = targetList.getItemById(itemId);
        clientContext.load(targetListItem, 'User','Title');// Provide columns name that you want retrieve
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

    function onQuerySucceeded() {
        var users = targetListItem.get_item('User'); // get column one by one
        var Title = targetListItem.get_item('Title');
        for (var i = 0; i < users.length; i++) {
            var userValue = users[i];
            console.log(userValue.get_lookupValue());
        }
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
    }

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getItemByID);