+ Start a Discussion
Siddharth ManiSiddharth Mani 

Unable to get value of String from Component to JS Controller

I have a custom object ToDoObj which has no fields ( I am using only the Name field from it) and I am trying to create a ToDo list type of functionality with this Object. Below is my code for Component and Controller:
 
<aura:component controller="ToDoController">
    <aura:attribute name="list" type="ToDoObj__c[]" />
    <aura:attribute name="listItem" type="ToDoObj__c" />
    <aura:handler name="init" action="{!c.myAction}" value="{!this}" />

   <div class="container">
    <form class="form-for-list">
      <div class="if-field-is-req">
        <div class="only-one-inputfield">
          <ui:inputText aura:id="todoitemfield" label="Enter ToDo Item  "
                        class="to-do-item"
                        labelClass="to-do-item__label"
                        value="{!v.listItem.Name}"/>
         </div>
       </div>
      </form>
    </div>
      <ui:button label="Add To List" 
                       class="add-to-list"
                       labelClass="label"
                       press="{!c.createToDo}"/>
<div class="msg">
              <div id="list" class="row">
                 <aura:iteration items="{!v.list}" var="item">
                     <ui:inputCheckbox value="" /><ui:outputText value="{!item.Name}"/>
                  </aura:iteration>
              </div>
          </div> 
</aura:component>
Controller:
({
 myAction : function(component, event, helper) {
    var action = component.get("c.getToDos");
    action.setCallback(this, function(data) {
    component.set("v.list", data.getReturnValue());
});
$A.enqueueAction(action);
 },

createToDo : function(component, event, helper) {
 var todoItemField = component.find("todoitemfield");
   console.log('field is'+todoItemField);
 var todoItem = todoItemField.get("v.value");   
    console.log('item is '+todoItem);
    if(!todoItem || 0 === todoItem.length){
        todoItem.set("v.errors", [{message:"Enter a value!"}]);
    }
    else {
    todoItem.set("v.errors", null);
    var listItem = component.get("v.listItem");
    createtodo(component, listItem);
}
},
createtodo: function(component, listItem) {
this.upserttodo(component, listItem, function(a) {
    var list = component.get("v.list");
    list.push(a.getReturnValue());
    component.set("v.list", list);
    this.updateTotal(component);
  });
},
})
I tried to debug the same using console.log but I am getting null value for todoItem while todoItemField is being updated correctly in the variable (as far as I know - it comes as some value which is in some other format and doesnt show the actual fieldName or something). Can anyone tell me where I am going wrong in this!

 
Best Answer chosen by Siddharth Mani
Siddharth ManiSiddharth Mani
Hello James,
Thanks for the reply. The below addition to the attribute code solved the issue. Now i am able to get the value of todoItem correctly:
<aura:attribute name="listItem" type="ToDoObj__c" default="{ sobjectType: 'ToDoObj__c', Name: '' }"/>
Not sure why this works though as the only addition is the introduction of a default value to the attribute tag!
 

All Answers

James LoghryJames Loghry

I would just use component.get("v.listItem.Name"); if you could, since that variable is already part of the component.  Otherwise, the find syntax looks good to me.  Go through and make sure the variables are all the same case (upper vs. lower case) because sometimes that can be a deal breaker.  Also, I would rename the createtodomethods so that they're distinct to avoid any confusion there. Lastly, I would add debugger statements in your controller and open the developer console in chrome to work out any issues you may still have.

Siddharth ManiSiddharth Mani
Hello James,
Thanks for the reply. The below addition to the attribute code solved the issue. Now i am able to get the value of todoItem correctly:
<aura:attribute name="listItem" type="ToDoObj__c" default="{ sobjectType: 'ToDoObj__c', Name: '' }"/>
Not sure why this works though as the only addition is the introduction of a default value to the attribute tag!
 
This was selected as the best answer