CSR jquery append not working on list items after async query

Question

Hello i got some trouble displaying some icons inside a column using CSR, what it should do is to check for the contents inside a document set and if the content is equal to a content type and add a corresponding icon.

for this im returning a div with a custom class based on the id of the element so when i query the info i need it will update the content using this unique class.

But is not appending the content inside the div, the code inside the conditions seem to works, the query is getting the right data, but in the list the content is not being added, and the field remains blank!

Any help?? thanks!!

Example idea

CSR Code

 var listName = 'listName';
 var docSetUrlBase = 
  '/path/to/site/_layouts/15/DocSetHome.aspx?id=';


 (function() {
   var item = '';
   var documentContext = {};
   documentContext.Templates = {};
   documentContext.Templates.Fields = {
    "DocIcon": { "View": function(ctx) { return '<a href="' + docSetUrlBase 
   + ctx.CurrentItem.FileRef + '" target="_blank">' + cumplimiento(ctx) + '</a>'}}
};

documentContext.ListTemplateType = 101;

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(documentContext);

})();


function cumplimiento(ctx) {
  var folderPath = ctx.CurrentItem.FileLeafRef;
  var id = ctx.CurrentItem.ID;
  var title = ctx.CurrentItem.Title;

  getItems(folderPath)
  .then(function(itemData) {
    console.log(itemData);

    for (var i = 0; i < itemData.length; i++) {
        var contentTypeId = itemData[i].ListItemAllFields.ContentTypeId;
        var id = itemData[i].ListItemAllFields.Id;


        if (contentTypeId == '0x010100BC518CBCA7403542BF454A841A7C617C0033D81DB44D6A174481029C297ECADA81') {
            console.log(itemData[i].Name);
            console.log(contentTypeId);
            $('a.' + 'id-' + id).append('<img class="icon-acta" src="../SiteAssets/icon1.svg" alt="Acta" title="Acta de constultor: ' + itemData[i].Name + '"/>');
            $('.spinner').delay(3000).fadeOut(300);

        }
        if (contentTypeId == '0x01010200559801707304394B9B71C1722E74B93900D43E57E10A8E244194F6A6ADBF0B454E') {
          console.log(itemData[i].Name);
          console.log(contentTypeId);
            $('a.' + 'id-' + id).append('<img class="icon-evidencia" src="../SiteAssets/icon2.svg" alt="Evidencia" title="Evidencia: ' + itemData[i].Name + '"/>');
        }
    }
});

return '<div class="estado-incentivo ' + 'id-' + id + '"><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>';
}

 function getItems(folderName) {
   return 
   $pnp.sp.web.getFolderByServerRelativeUrl(
    _spPageContextInfo.webServerRelativeUrl + 
   '/libraryFolderName' + '/' + folderName)
    .files.expand('ListItemAllFields')
    .get();
 }

Answer 1

There could be a better solution for your problem, but in one of my previous projects where we had to use REST API call in CSR, we had to make the ajax call synchronous.

Can you try and modify the below code and check :

function cumplimiento(ctx) {
  var folderPath = ctx.CurrentItem.FileLeafRef;
  var id = ctx.CurrentItem.ID;
  var title = ctx.CurrentItem.Title;

  $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/GetFolderByServerRelativeUrl(" + _spPageContextInfo.webServerRelativeUrl + "/libraryFolderName/" + folderName +")/Files?$expand=ListItemAllFields",
        async: false,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            // parse the results 
            var itemData = data.d.results;

            for (var i = 0; i < itemData.length; i++) {
                var contentTypeId = itemData[i].ListItemAllFields.ContentTypeId;
                var id = itemData[i].ListItemAllFields.Id;

                if (contentTypeId == '0x010100BC518CBCA7403542BF454A841A7C617C0033D81DB44D6A174481029C297ECADA81') {
                    console.log(itemData[i].Name);
                    console.log(contentTypeId);
                    $('a.' + 'id-' + id).append('<img class="icon-acta" src="../SiteAssets/icon1.svg" alt="Acta" title="Acta de constultor: ' + itemData[i].Name + '"/>');
                    $('.spinner').delay(3000).fadeOut(300);

                }
                if (contentTypeId == '0x01010200559801707304394B9B71C1722E74B93900D43E57E10A8E244194F6A6ADBF0B454E') {
                  console.log(itemData[i].Name);
                  console.log(contentTypeId);
                    $('a.' + 'id-' + id).append('<img class="icon-evidencia" src="../SiteAssets/icon2.svg" alt="Evidencia" title="Evidencia: ' + itemData[i].Name + '"/>');
                }
            }
        },
        error: function (data) {    
            console.log("An error has occured " + data);
        }
    });

    return '<div class="estado-incentivo ' + 'id-' + id + '"><div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></div>';
}

Answer 2

I finally didnt find the proper solution, i ended creating a new list with the same columns and views, and then it worked properly, both codes works in this question are okay, i suspect the problem was within the list view or something.