0

I'm trying to dynamically insert data into a component. I'm not sure if I'm using component.set correctly?

Here's what I have

afterRender: function (component, helper) {
    this.superAfterRender();

    var cmp = component;

    helper.load('data.json', function(xhr) {    
        var result = JSON.parse(xhr.responseText);

        var container = cmp.get("v.container1");

        for(var i=0; i < result.length; i++) {

            container.push('<div><a href=' + result[i].link + ' target="_blank">&mdash; ' + result[i].title + '</a>' + result[i].excerpt + '</div>');

        }

        cmp.set("v.container1", container);
    });
}

Markup for my component is :

</p>


<div class="container">  
    <div class="slds-grid slds-wrap">
        <div class="slds-size_2-of-3 blog-feed">                
            <div class="box">{!v.container1}</div>
        </div>
        <div class="slds-size_1-of-3 featured">
            <div class="box">{!v.container2}</div>
        </div>
        <div class="slds-size_1-of-2 item-list">
            <div class="box">{!v.container3}</div>
        </div>
        <div class="slds-size_1-of-2 item-list">
            <div class="box">{!v.container4}</div>
        </div>
    </div>
</div>

Pranay Jaiswal
  • 35,996
  • 16
  • 75
  • 134
Nevin Laughlin
  • 1
  • 1
  • 2
    what do you mean, not working? imagine calling x service provider and saying my x is not working. Mind helping us help you by providing the exact behavior, what it is you expect, any debugging info (if you dont know how to debug, you might want to start learning) you might want to check How do I debug my lightning component take some time to visit [ask] and take the [tour] in order to get familiar with the forum. Thank you – glls Nov 21 '17 at 20:01
  • Please provide more details. What issue you are facing exactly. – Arpit Sethi Nov 21 '17 at 20:33
  • You would be better to create a c:ResultDiv component and assign it a result object and let it render it's data via standard lightning binding. That way you can just add a bunch of c:ResultDiv components in the usual dynamic comonent way. – Caspar Harmer Nov 21 '17 at 20:34
  • I'm very new to lightning and I'm learning how the framework works. So, what I thought would happen is in the component area {!v.container1} the result from my request would be inserted there kinda link innerHTML = "" works. When I log the container after I pushed the data I have 3 key value pairs with the last 2 being the data is requested. – Nevin Laughlin Nov 21 '17 at 20:47

1 Answers1

1

Aura.Component components must be SecureComponent objects, not arbitrary HTML. You could theoretically get away with using aura:unescapedHtml, but it's not really a good idea.

As a matter of principle, you could probably change your code like this:

helper.load('data.json', function(xhr) {    
    var result = JSON.parse(xhr.responseText);

    var container = [];
    result.forEach(function(v) {
        container.push(["aura:unescapedHtml",{value:`<div><a href="${v.link}" target="_blank">&mdash; ${v.title}</a>${v.excerpt}</div>`}]);
    });               
    $A.createComponents(container, function(components) {
        cmp.set("v.container1", components);
    );
});

Do this only if you trust the source of your data. Otherwise, you might want to write a real component, as mentioned in the comments. You don't actually need to do this in the afterRender area, you can put this directly into your helper/controller. Typically afterRender is used for directly manipulating the DOM, meaning using document.createElement and whatnot, which you should avoid doing unless you need to.

sfdcfox
  • 489,769
  • 21
  • 458
  • 806