In this challenge I have to use securefilter library and securely encode the date. I have made the changes as follows-
<aura:component controller="LTNG_Creatures_Controller" access="global" implements="force:appHostable">
<aura:attribute name="creatures" type="string"/>
<ltng:require scripts="{!$Resource.securefilters}" /> <!-- CHANGE 1 HERE-->
<div class="slds-row slds-align--absolute-center">
<div class="slds-panel slds-size--4-of-6 ">
<ui:outputText value="Click the button to get all Creatures" /><BR />
<ui:button label="Get All Creatures" press="{!c.getAllCreaturesAction}"/><BR />
<BR />
<aura:unescapedHTML value="{!v.creatures}" />
</div>
</div>
</aura:component>
And my controller class is-
({
getAllCreaturesAction : function(component, event, helper) {
var getAccountsAction = component.get("c.getAllCreatures");
getAccountsAction.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var results = response.getReturnValue();
// Let's create a beautiful table with results:
var outputT = "<table class=\"slds-table slds-table--bordered slds-table--cell-buffer \">";
outputT += "<thead><tr class=\"slds-text-title--caps\">";
outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Id\">Id</div></th>";
outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Name\">Name</div></th>";
outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Description\">Description</div></th>";
outputT += "<th scope=\"col\"><div class=\"slds-truncate\" title=\"Region\">Region</div></th>";
outputT += "</tr></thead><tbody>";
for (var i=0;i<results.length;i++) {
outputT += "<tr><th scope=\"row\" data-label=\"Id\"><div class=\"slds-truncate\" title=\"Id\">" + results[i].Id + "</div></th>";
outputT += "<td data-label=\"Name\"><div class=\"slds-truncate\" title=\"Name\">" + results[i].Name + "</div></td>";
outputT += "<td data-label=\"Name\"><div class=\"slds-truncate\" title=\"Description\">" + results[i].Description__c + "</div></td>";
outputT += "<td data-label=\"Company\"><div class=\"slds-truncate\" title=\"Region\">" + results[i].Creature_Region__r.Name + "</div></td></tr>";
}
outputT += "</tbody></table>";
outputT = secureFilters.html(outputT); // CHANGE 2 HERE
component.set("v.creatures", outputT);
}
});
$A.enqueueAction(getAccountsAction);
}
})
However it is giving me error that -
Challenge Not yet complete... here's what's wrong: The 'LTNG_SecureFilters_Challenge' controller does not appear to be using the secureFilters resource properly.
As per my understanding this is right. what might be causing this error? any help?
LTNG_SecureFilters_Challenge