How to set lookup column value in SharePoint 2013/2016 ECMA Script

This SharePoint 2013 ECMA script explains how to set lookup column value in SharePoint 2013/2016 using ECMA script.

As part of my code to add /update the list items, I was trying to set the value for a lookup field using ECMA script block. When I try to do it I got the error message: fnFailedAdd. Message: Invalid data has been used to update the list item. The field you are trying to update may be read-only.

I was trying to set the lookup value with the below code:

var objCrrItem = ObjLstEnum.get_current();
objCrrItem.set_item("CompanyName", "Honda");

Note: This works for a normal field but this field is Lookup Field

JSOM code to set lookup column value sharepoint 2013

We must have to set the lookup field value with SP.FieldLookupValue() object.

The code snippet will be like as below:

var _objLkpField = new SP.FieldLookupValue();
_objLkpField.set_lookupId(1);
objCrrItem.set_item('CompanyName', _objLkpField);
The complete code will be like as below:
function fnSetlkpValue()
{
    var objClntContext = new SP.ClientContext.get_current();
    var objWeb = objClntContext.get_web();
    var ObjLst = objWeb.get_lists().getByTitle("Car Inventory");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Number\'>3</Value></Eq></Where></Query><RowLimit>10</RowLimit></View>');
    this.allItems =ObjLst.getItems(camlQuery);
    objClntContext.load(allItems, "Include(Title,CompanyName)");
    objClntContext.executeQueryAsync(Function.createDelegate(this, this.fnSccSetVal), Function.createDelegate(this, this.fnFailSetVal));
}
function fnSccSetVal() {
    var objClntContext = new SP.ClientContext.get_current();
    var ObjLstEnum = this.allItems.getEnumerator();
    while(ObjLstEnum.moveNext())
    {
        var objCrrItem = ObjLstEnum.get_current();
        var _objLkpField = new SP.FieldLookupValue();
        _objLkpField.set_lookupId(2); /* Updated with some lookup ID value from Primary List for lookup field */
        objCrrItem.set_item('CompanyName', _objLkpField);
        objCrrItem.update();
        objClntContext.load(objCrrItem);
        objClntContext.executeQueryAsync(Function.createDelegate(this, this.fnsuccessAdd), Function.createDelegate(this, this.fnFailedAdd));
    }
}
function fnFailSetVal(sender, args) {
    alert("fnFailSetVal. Message:" + args.get_message());
}
function fnsuccessAdd()
{
    alert("Lookup Value added Successfully!!!")
}
function fnFailedAdd(sender, args) {
    alert("fnFailedAdd. Message:" + args.get_message());
}

Little background/prerequisites to execute this script:

• Create 2 lists
• Primary List
• Car Inventory
• Create lookup field from car inventory list to primary list

With this code operation completed successfully.

You may ECMA script tutorials:

• Get SharePoint List Items and Display in Tabular Format using ECMA Script in SharePoint
• Get SharePoint 2013 List Item Count using Rest API and ECMAScript object model
• Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint 2013/2016/Online
• Various ECMA List field operations in SharePoint 2013
• CRUD Operations with ECMA or jsom in SharePoint 2013 and SharePoint 2016 Part-2
• CRUD Operations with ECMA or jsom in SharePoint 2013 and SharePoint 2016 Part-1
• Remove DIV tag from Multiline text field using ECMA
• Uncaught TypeError: SP.ClientContext is not a constructor in SharePoint Online JSOM (JavaScript object model)
• unable to get property ‘getenumerator’ of undefined or null reference SharePoint

We saw here how to set lookup column value in SharePoint 2013/2016 ECMA Script.