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 :

<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>

4
  • 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 How to Ask and take the tour in order to get familiar with the forum. Thank you
    – glls
    Commented Nov 21, 2017 at 20:01
  • Please provide more details. What issue you are facing exactly. Commented Nov 21, 2017 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. Commented Nov 21, 2017 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. Commented Nov 21, 2017 at 20:47

1 Answer 1

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.

Not the answer you're looking for? Browse other questions tagged .