JSLink and REST API issue with async

Question

I am trying to use REST API inside JS Link.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(OverrideFieldContext);

function OverrideFieldContext(ctx) {

    var groupingName = ctx.CurrentItem["Grouping"];

    prepareTextFieldValue(ctx, groupingName);
    return SPField_FormDisplay_Default(ctx);
}

function prepareTextFieldValue(ctx, groupingName) {
    var url = _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists(\'' + _spPageContextInfo.pageListId + '\')/items?$select=SomeColumn&$filter=Category eq \'Section\' and Grouping eq \'' + groupingName + '\'';

    $.ajax({
        url: url,
        type: 'GET',
        headers: { 'Accept': 'application/json;odata=verbose' },
        success: function (data) {
            if (data.d.results) {
                temp = data.d.results[0].SomeColumName;
                return "<span style='color :#f00'>" + temp + "</span>";
            }

        }
    })
    debugger;

}

In brief I am pulling some other column information to be overridden on current items' column value.

As JS is async before even code receives the required column value it completes prepareTextFieldValue function and returns back. I need to override value which AJAX call gives me as value on the currentField. Is it possible?

Answer 1

If you want to use a REST API call each time an item renders you would need to return some concrete HTML element that your async call could later come modify -- using roughly the same solution as identified in this question: Client Side Rendering with Async dependencies

Right now, you aren't returning anything from the prepareTextFieldValue function. A return statement inside of a jQuery promise success function will never make it's way back out to the prepareTextFieldValue function's scope.

At the bottom of prepareTextFieldValue, you need to return some uniquely identifiable HTML that your jQuery.ajax call can come back and modify when it's done loading.

...
// somewhere above here you need to define `var idx=0` or similar,
// the idea being that you'll want to increment this for each list item that's
// rendered so you can come back to the correct span element
function prepareTextFieldValue(ctx, groupingName, idx++) {
    var url = _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists(\'' + _spPageContextInfo.pageListId + '\')/items?$select=SomeColumn&$filter=Category eq \'Section\' and Grouping eq \'' + groupingName + '\'';

    $.ajax({
        url: url,
        type: 'GET',
        headers: { 'Accept': 'application/json;odata=verbose' },
        success: function (data) {
            if (data.d.results) {
                temp = data.d.results[0].SomeColumName;
                $("span#jsLinkSpan" + idx).text(temp);
            }

        }
    })

    return "<span id='jsLinkSpan" + idx + "' style='color: #f00'></span>"

}

Some other things to consider: In addition to not handling errors and stuff... if the value you're looking up is in the list that is being rendered, you could dig through the rendering context to find the information for that field instead of making an AJAX request; this would preclude the need for making an async call in the first place although it may not be possible with your specific setup. Also, definitely consider how many list items will load, if you render 100 items you'll be firing off 100 AJAX requests.