Lightning Components - Rows not added to the table

Question

I want to display a table where user can input some values. On click of add button I want new row to be generated in ui. But its not happening. Unsure what's missing. Please guide me.

Component:

<aura:component access="global" controller="CreateTargetRecord">
<aura:attribute name="newTargetRecord" type="Target__c" default="{'sobjectType':'Target__c','Name':'','Source__c ':'','Function__c ':'','Place__c ':''}"/>
<aura:attribute name="targetlist" type="Target__c[]"/>  
<div>
           <input type="button" id="addbutton" value="Add" press="{!c.addrow}"/>
        <table>
            <tr>
                <th>Target Name</th>
                <th>Source</th>
                <th>Function</th>
                <th>Place</th>
            </tr>
         <aura:iteration items="{!v.targetlist}" var="wrap">
            <tr>
                <td><input size="25" type="text" value="{!wrap.Name}"/></td>
                <td><input size="25" type="text" value="{!wrap.Source__c}"/></td>
                <td><input size="25" type="text" value="{!wrap.Function__c}"/></td>
                <td><input size="25" type="text" value="{!wrap.Place__c}"/></td>
            </tr>
        </aura:iteration>
        </table>
        </div> 
</aura:component>

Controller:

({
 addrow : function(component, event, helper)
        {
            console.log( 'hi');
            var tlist = component.get("v.targetlist");
            tlist.push(component.get("v.newTargetRecord"));
            component.set("v.targetlist", tlist);

            var action = component.get("c.TargetRec");
            action.setCallback(this, function(a) {
            console.log("returned: %o", a.getReturnValue());
            component.set("v.newTargetRecord", a.getReturnValue());
        });

        $A.enqueueAction(action);
        }
)}

Class:

public class CreateTargetRecord {
 @AuraEnabled
    public static Target__c TargetRec() {
        return (Target__c)Target__c.sObjectType.newSObject(null, true);
    }
}

Answer 1

Looks like your controller is backwards. You're adding the new target record and THEN you're making the callout. try this instead

({
 addrow : function(component, event, helper)
        {
            console.log( 'hi');

            var action = component.get("c.TargetRec");
            action.setCallback(this, function(a) {
                console.log("returned: %o", a.getReturnValue());
                component.set("v.newTargetRecord", a.getReturnValue());

                var tlist = component.get("v.targetlist");
                tlist.push(component.get("v.newTargetRecord")); 
                // you could even replace the line above with
                //tlist.push(a.getReturnValue()); 
                component.set("v.targetlist", tlist);
            });

            $A.enqueueAction(action);
        }
)}