+ Start a Discussion
Rajkumar CV 12Rajkumar CV 12 

Value is undefined in the Browser console

Below is my component
<aura:component controller="CSVController">
  <aura:handler name="init" value="{!this}" action="{!c.loadContactList}" />
  <aura:attribute name="listofContacts" type="Contact[]" />
  <div class="slds-m-around--xx-large">
    <button
      class="slds-button slds-button_brand"
      onclick="{!c.csvFileDownloader}"
    >
      Download as CSV
    </button>
    <br /><br />
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
      <thead>
        <tr class="slds-text-title--caps">
          <th class="slds-is-sortable slds-text-title--caps" scope="col">
            <span class="slds-truncate" title="Name">First Name</span>
          </th>

          <th class="slds-is-sortable slds-text-title--caps" scope="col">
            <span class="slds-truncate" title="Last Name">Last Name</span>
          </th>

          <th class="slds-is-sortable slds-text-title--caps" scope="col">
            <span class="slds-truncate" title="Department">Department</span>
          </th>

          <th scope="col">
            <div class="slds-truncate" title="MobilePhone">Mobile Phone</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <aura:iteration items="{!v.listofContacts}" var="con">
          <tr>
            <th scope="row">
              <div class="slds-truncate" title="{!con.FirstName}">
                {!con.FirstName}
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate">
                {!con.LastName}
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate">
                {!con.Department}
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate">
                {!con.MobilePhone}
              </div>
            </th>
          </tr>
        </aura:iteration>
      </tbody>
    </table>
  </div>
</aura:component>
Below is my controller 
({
  loadContactList: function (component, event, helper) {
    helper.onLoad(component, event);
  },

  csvFileDownloader: function (component, event, helper) {
    console.log("Inside the controller method");
    var getContacts = component.get("v.listofContacts");
    console.log("controller " + getContacts);
    console.log(getContacts);

    var csvStringresult = helper.convertArrayofObjectstoCSV(
      component,
      getContacts
    );
    if (csvStringresult == null) {
      return null;
    }
    var anchorElement = document.createElement("a");
    anchorElement.href =
      "data:text/csv;charset=utf-8," + encodeURI(csvStringresult);
    anchorElement.target = "_self";
    anchorElement.download = "ExportData.csv";
    document.body.appendChild(anchorElement);
    anchorElement.click();
  }
});

Below is my helper
({
  onLoad: function (component, event) {
    var action = component.get("c.getContacts");
    action.setCallback(this, (response) => {
      var state = response.getState();
      if (state === "SUCCESS") {
        component.set("v.listofContacts", response.getReturnValue());
        var testing = component.get("v.listofContacts");
        console.log("raj" + testing);
      }
    });
    $A.enqueueAction(action);
  },

  convertArrayofObjectstoCSV: function (component, getContacts) {
    console.log("inside helper method");
    console.log(!getContacts.length);
    if (getContacts == null || !getContacts.length) {
      return null;
    }

    var columndivider = ",";
    var rowdivider = "\n";
    var keys = ["FirstName", "LastName", "Department", "MobileNumber"];
    var csvStringResult = " ";
    console.log(csvStringResult);
    csvStringResult += keys.join(columndivider);
    console.log(csvStringResult);
    csvStringResult += rowdivider;
    console.log(csvStringResult);

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

      for (var skey in keys) {
        console.log("skey " + skey);
        var newkey = keys[skey];
        console.log("newkey" + newkey);
        if (counter > 0) {
          csvStringResult += columndivider;
          console.log("1" + csvStringResult);
        }
        csvStringResult += '"' + getContacts[i][skey] + '"';
        console.log("2" + csvStringResult);
        counter++;
      }
      csvStringResult += rowdivider;
      console.log("3" + csvStringResult);
    }
    return csvStringResult;
  }
});

When i down​load the excel or view the console logs​​​​​​ i am getting undefined in the values field. Please let me know what may be the reason?

Thanks in advance.
ShirishaShirisha (Salesforce Developers) 
Hi Rajkumar,

Greetings!

Unfortunately,it is very difficult to debug code from our end.However,you can debug the lightning components using the lightning inspector easily.The below document and video will guide you on the same.

https://www.youtube.com/watch?v=YgL0UNVoqQ8

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/debug_intro.htm

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Warm Regards,
Shirisha Pathuri