Get site title and display it search results

Question

I am using display templates to search specific items based on content type and display them in the root site. One of the requirements is to display the site title besides the item.

Searching on the web I found this code which displays the title of the library/list. I would like to extend it to display the site title of each item. Anyone can help me with this? I am not that confident with javascript.

Type.registerNamespace('search.listname');

search.listname = function () {
    var itemInfo = {};
    var listInfo = {};

    var init = function (context, elmId) {
        // Store item info
        itemInfo[elmId] = {};
        itemInfo[elmId]["webUrl"] = context.CurrentItem.SPWebURL;
        itemInfo[elmId]["listId"] = context.CurrentItem.ListID;

        // Add an on post render callback, this will be excuted when all the results are rendered
        AddPostRenderCallback(context, function() {
            get(elmId);
        });
    },
    get = function (elmId) {
        // Retrieve the item information
        var webUrl = itemInfo[elmId].webUrl;
        var listId = itemInfo[elmId].listId;

        if ($isEmptyString(webUrl) || $isEmptyString(listId)) {
            return;
        }

        // Remove brackets from guid
        listId = listId.substring(listId.indexOf('{') + 1, listId.indexOf('}'));

        // Check if the list object exists, if it exists, an Ajax call is already initiated or performed
        if (typeof listInfo[listId] !== "undefined") {
            // Check if the list name is retrieved
            if (typeof listInfo[listId]["Title"] !== "undefined") {
                // Write the list name to the listname element on the page
                quickRender(elmId, listId);
            } else {
                // List name was not yet retrieved, set the list ID as class on the element
                setClass(elmId, listId);
            }
            return;
        } else {
            // Ajax call not yet initiated, create a new object for the list ID
            listInfo[listId] = {};
            setClass(elmId, listId);
        }

        // Do a Ajax call to retrieve the list / library title
        (function (elmId, listId) {
            var request = new XMLHttpRequest();
            var restUrl = String.format("{0}/_api/Web/Lists(guid'{1}')?$select=Title'", webUrl, listId);
            request.open('GET', restUrl, true);
            request.setRequestHeader('Accept', 'application/json;odata=nometadata');
            request.setRequestHeader('Content-Type', 'application/json;odata=nometadata');
            request.onload = function (e) {
                if (request.readyState === 4) {
                    // Check if the get call was successful
                    if (request.status === 200) {
                        // List retrieved
                        var data = JSON.parse(request.response);
                        if ($isEmptyString(data.Title)) {
                            return;
                        }
                        // Store the list name
                        listInfo[listId]["Title"] = data.Title;
                        // Render the list name
                        render(elmId, listId);
                    } else {
                        // No list found
                    }
                }
            };
            request.onerror = function (e) {
                // Catching errors
            };
            request.send(null);
        })(elmId, listId);
    },
    // Set the list ID as class name to the SPAN element
    setClass = function (elmId, listId) { 
        var elm = document.getElementById(elmId);
        if (!$isNull(elm)) {
            var listElm = elm.getElementsByClassName('listname')[0];
            if (!$isNull(listElm)) {
                // Write the list name to the page
                listElm.className = String.format('{0} {1}',listElm.className, listId);
            }
        }
    },
    // Write the document title to all elements with the same list ID
    render = function (elmId, listId) {
        var elms = document.getElementsByClassName(listId);
        if (!$isNull(elms)) {
            for (var i = 0; i < elms.length; i++) {
                elms[i].innerHTML = listInfo[listId].Title;
            }
        }
    },
    // Write the list name to the element
    quickRender = function (elmId, listId) {
        var elm = document.getElementById(elmId);
        if (!$isNull(elm)) {
            var listElm = elm.getElementsByClassName('listname')[0];
            if (!$isNull(listElm)) {
                // Write the list name to the page
                listElm.innerHTML = listInfo[listId].Title;
            }
        }
    };

    return {
        init: init
    };
}();

Srch.U.registerRenderTemplateByName("listname_init", search.listname.init);

Answer 1

You could use the Managed Property SiteTitle in your display template in order to show it.

You could specify the managed properties you want to retrieve with the selectproperties parameter: _api/search/query?querytext='your+keywords'&selectproperties='SiteTitle'