Trouble with component.set not working [closed]

Question

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>

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