Get Column Values in JSLink Using SharePoint

When working on the development requirements related to JSLink I came across a scenario where a lookup value needed to be shown in a list view web part.

I wanted to show with the following code how to show the lookup values from a single-valued or multi-valued lookup.

Before that I would like to show the relationship between the lists I used to show the demonstration.

I have created the following two custom lists for demonstration.

The first list has the following columns.



The content in the first list will be something like:



The second list has the lookup column from the first list.



The content in the second list is like the following.



The following code will show how to get the single-valued or multi-valued lookup values and show them.

(function()
{

    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Item = CustomPortalPageItem;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomPortalPageItem(ctx)
{
    var html = "";
    html += '<div title="' + ctx.CurrentItem.Title + '"></div><div>' + GetLookupValues(ctx.CurrentItem.Test11, "lookupValue") + '</div>';
    return html;
}

function GetLookupValues(inputArry, originalColumnName)
{
    var retHtml = "";
    if (inputArry != null)
    {
        for (var loopcnt = 0; loopcnt < inputArry.length; loopcnt++) {
            if (typeof(inputArry[loopcnt][originalColumnName]) != 'undefined' && inputArry[loopcnt][originalColumnName] != null) {
                retHtml += inputArry[loopcnt][originalColumnName];
            }
        }
    }
    return retHtml;
}

After this it will look like the following. You can then apply beautiful HTML to it.