Stuck trying to preselect rows in data table

Question

I'm newish to building lightning components. I've tried several of the suggestions i've found here, but still seem to be stuck. Maybe a 2nd set of eyes will help. I get both the Lists populated, it just doesnt check the box. What did I miss? TIA!

Basically, if an Id exists in the List returned from getPreselectedFiles then the matching row in the datatable should be checked.

apex

@AuraEnabled
public static List<custom__c> getPreselectedFiles(List<Id> files) {
    System.debug('pf: ' + files);
    String parentID = '%' + files + '%';
    // Get list of files attached to current record
    return [Select File_ID__c from custom__c where name like :parentID];
}


@AuraEnabled
public static List<ContentDocument> getAttachedFiles(List<Id> files) {
    System.debug('cdl: ' + files);
    Set<Id> docIDs = new Set<Id>();
    // Get list of files attached to current record
    List<ContentDocumentLink> cdl = [select id,contentdocumentid,contentdocument.Title from contentdocumentlink where linkedentityid = :files];
    for(ContentDocumentLink cdLink:cdl){
        docIDs.add (cdLink.ContentDocumentID);
    }
    return [Select id, title,fileextension from contentdocument where id IN: docIDs];
}

helper

    fetchPreselectedList : function(component) {

    var action = component.get("c.getPreselectedFiles");
    var files = component.get("v.recordId");
    action.setParams({
        files: files
    });
    //alert(files);
    action.setCallback(this, function(response) {
        // Getting the response state
        var state = response.getState();
        var selected = [];
        // Check if response state is success
        if(state === 'SUCCESS') {
            var files = response.getReturnValue();
            files.forEach(function(file) {
                selected.push({Id: file.File_ID__c });
            });  
            //component.set('v.preselectedRow',response.getReturnValue()); 
            component.set('v.preselectedRow', selected);  
            console.log(selected);
        }else {
            console.log('Error');
        }
    });
    $A.enqueueAction(action);

},
// Function to fetch data from server called in initial loading of page
fetchFileList : function(component, event, helper) {
    var self = this;
    // Assign server method to action variable
    var action = component.get("c.getAttachedFiles");
    // Getting the account id from page
    var files = component.get("v.recordId");
    // Setting parameters for server method
    action.setParams({
        files: files
    });

    // Callback function to get the response
    action.setCallback(this, function(response) {
        // Getting the response state
        var state = response.getState();
        // Check if response state is success
        if(state === 'SUCCESS') {
            // Getting the list of contacts from response and storing in js variable
            var contactList = response.getReturnValue();
            // Set the list attribute in component with the value returned by function
            component.set("v.data", response.getReturnValue());
            console.log(response.getReturnValue());
            component.set('v.rawData', response.getReturnValue()); 
            // trying to set the selected rows 
            //component = component.find("fileTable");                         
            // Get preselected files (tried calling within callback too)
            //self.fetchPreselectedList(component, event, helper);
       }
        else {
            // Show an alert if the state is incomplete or error
            alert('Error in getting data');
        }
    });
    // Adding the action variable to the global action queue
    $A.enqueueAction(action);
},

cmp

<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>    
<aura:attribute name="preselectedRow" type="List" />
<aura:attribute name="rawData" type="Object" access="PRIVATE" />
<lightning:card title="Files Attached to record">
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
                             aura:id="fileTable"
                             keyField="Id"
                             data="{! v.data }"
                             columns="{! v.columns }"
                             hideCheckboxColumn="false"
                             onrowselection="{!c.UpdateSelectedRows }"
                             selectedRows="{!v.preselectedRow}" 
                             />
    </div>
</lightning:card>

controller

    // Function called on initial page loading to get contact list from server
getRecords : function(component, event, helper) {
    // Build the columns
    component.set('v.columns', [
        {label: 'Filename', fieldName: 'Title', type: 'text', initialWidth: 300},
        {label: 'Ext', fieldName: 'fileextension', type: 'text' }                
    ]);    
    // Helper function - fetchFileList called for interaction with server
    helper.fetchPreselectedList(component, event, helper);
    helper.fetchFileList(component, event, helper);

Answer 1

The selectedRows attribute should be an Array that simply contains the key values, not objects. That would look like this:

var selected = files.map(file => file.File_ID__c);
// ... any other code here ... //
component.set("v.preselectedRow", selected);

The Array.prototype.map function is typically used in place of:

var selected = [];
files.forEach(function(file) {
    selected.push(file.File_ID__c);
});