show Doc icon of SharePoint document library using jquery in jqgrid

Question

My scenario is to show doc icon in Jquery Grid for sharepoint document library. My Data is in JSON. here is how i am fetching the data and building the array object and Pass it to JSON.Now in my Jqgrid i want to display Doc icon based up on the type. For example . If my doc type is pdf i want to load image which is related to pdf, and if it is of xsxlx i want to load image which is related to xslx. so on .I tried using formatter function but it shows only one image for all types ie. pdf ,xslx,txt.here is the function which i have written. can you please help me out on this .

 $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: pdlist,
             CAMLQuery: pdquery,
            CAMLViewFields:pdfieldsToRead,
            completefunc: buildProcessDocdata
        });
    }
    function buildProcessDocdata(xData, status)
    {
       var ProcessDocdata  = [ ];
      $(xData.responseXML).SPFilterNode("z:row").each(function () {  
         ProcessDocdata.push({
                Processid: $(this).attr("ows_ID"),
                Type: $(this).attr("ows_DocIcon"),            
                DocumentName: $(this).attr("ows_FileLeafRef").split("#")[1],            
                Date: $(this).attr("ows_Modified"),
                ProcessTask: $(this).attr("ows_Process_x0020_Task").split("#")[1], 
                DocumentType: $(this).attr("ows_Document_x0020_Type"),
                DocumentURL: "http://test.sharepoint.com/" + $(this).attr("ows_FileRef").split("#")[1]
            });
       console.log(ProcessDocdata);
      });
           ClientGriddisplay(ProcessDocdata);
    }

/BINDING THE DATA TO THE SHAREPOINT GRID/

function ClientGriddisplay(ProcessDocdata) { 
 jQuery("#Grid_ProcessDocuments").jqGrid({   
   url: ProcessDocdata.json,
   data: ProcessDocdata,
        datatype: "local",
          colNames:["Date","Document Name","DocumentType","DocumentURL","ProcessTask","Processid","Type"],

          colModel:[
            {name:'Date',index:'Date',align: 'left',sortable: true,width:100,formatter:"date" },
            {name:'DocumentName',index:'DocumentName',align:'left', width:350,sortable:true,formatter:formatURL}, 
            {name:'DocumentType',index:'DocumentType',hidden: true,align:'left', width:100,sortable: false},
            {name:'DocumentURL',index:'DocumentURL',hidden: true,align:'left', width:100,sortable: false},
            {name:'ProcessTask',index:'ProcessTask',align: 'left',width:450,sortable: false },
            {name:'Processid',index:'Processid',hidden: true,align:'left', width:60,sortable: false},
           {name:'Type',index:'Type',align:'left', width:60,sortable: true,formatter:formatImage}         

                       ],
        rowNum: 300,      
        height: 'auto',
        viewrecords: true,
      sortname: 'ProcessTask',
      grouping:true,
      groupingView : { groupField : ['DocumentType'] },
      groupColumnShow : [false, false],
      groupCollapse : false, 
      groupOrder: ['asc', 'asc'], 
      groupSummary : [false, false],
      caption: "PROCESS DOCUMENTS "

 });

}
   function formatURL(cellValue, options, rowObject) 
{
            var docuurl = '<a href="' + rowObject['DocumentURL'] + '" target="_blank" >' + rowObject['DocumentName'] + '</a>';
            return docuurl;
  }
function formatImage(cellValue, options, rowObject)
{
  alert(cellValue);
  var imageHtml;
  if(cellValue="pdf")
    {
        imageHtml = "<img src='/_layouts/images/icpdf.png' />";

    }
  else if(cellValue="icxlsx")
    {
        imageHtml = "<img src='/_layouts/images/icxlsx.png' />";

    }

            return imageHtml;

        }

function unformatImage(cellValue, options, cellObject) {

            return $(cellObject.html()).attr("originalValue");
        }

MY JSON OUT PUT

Answer 1

Shorten your logic with:

var icons = {
    xls: 'ICXLS.PNG',
    xlsx: 'ICXLS.PNG',
    xlsm: 'ICXLS.PNG',
    docx: 'icdocx.png',
    doc: 'icdocx.png',
    ppt: 'icpdf.png',
    pptx: 'icpdf.png',
    txt: 'ictxt.gif',
};
var icon = 'ATTACH16.PNG';
if (icons.hasOwnProperty(ext)) icon = icons[ext];
var thumbnail = '<img class="ms-asset-icon" src="/_layouts/15/images/' + icon + '">';

Answer 2

I was able to solve this . Here is the function which i have created and might be useful for some one

/*This Function will Get the DOCiCON for sharepoint library
   Here FileURL will be the ServerUrl. 
     */
function GenerteDocIcon(FileURL)
{
  var fileURL = FileURL;
        var filenameArray = fileURL.split("/");
        var filenamePosition = filenameArray.length;
        var theFileName = filenameArray[filenamePosition-1];
     var pattern=/\.[0-9a-z]+$/i;
        var ext = (theFileName).match(pattern);
        ext = ext[0].toLowerCase();
    //alert(ext);

     var icon = '/_layouts/15/images/ATTACH16.PNG';  
        // check for excel
        if ( '.xls' == ext || '.xlsx' == ext|| '.xlsm' == ext){
            icon = '/_layouts/15/images/ICXLS.PNG';
        }
        // check for ms document
        else if( '.docx' == ext || '.doc' == ext){
             icon = '/_layouts/15/images/icdocx.png';
        }
        // check for powerpoint
        else if( '.ppt' == ext || '.pptx' == ext){
             icon = '/_layouts/15/images/PPT16.GIF';
        }
      else if( '.pdf' == ext ){
             icon = '/_layouts/15/images/icpdf.png';
        }
    else if( '.txt' == ext ){
             icon = '/_layouts/15/images/ictxt.gif';
        }
        // create the html to dipslay the file icon
        var thumbnail = '<img class="ms-asset-icon" src="'+icon+'">';

     return thumbnail;
}