String Split function is not working in the Lightning JS contoller

Question

I am getting array of string from component's attribute to lightning controller, now I want to split that string to comma separated values and want to assign that to another component variable but split function is not working in js controller, the below error I am getting:

Action failed: c:ContactCardInfo$controller$doInit [Cannot read property 'split' of undefined]`

controller.js

({
    doInit: function(component, event, helper) {
        console.log('FieldApiNames '+component.get('v.FieldApiName'));
        var fieldString = component.get('v.FieldApiName');
        var array = [];
        array = fieldString.split(',');
        component.set('v.conFields', array);
        helper.getContactRecordId(component);
    }

})

Component:

<aura:component implements="force:appHostable,force:hasSObjectName,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ContactInfoController">

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<aura:attribute name="contactLookup" type="string"/>
<aura:attribute name="HeaderLabel" type="string"/>
<aura:attribute name="FieldApiName" type="string"/>

<aura:attribute name="contactRecordId" type="id" />
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="sobjecttype" type="String" default="{!v.sObjectName}"/>
<aura:attribute name="conFields" type="string[]"/>

<aura:attribute name="HeaderTitle" type="Aura.Component[]">
    <h2>
        <b>{!v.HeaderLabel}</b>
    </h2>
</aura:attribute>

<lightning:card iconName="standard:contact" title="{!v.HeaderTitle}" />
<lightning:recordForm aura:id="recordViewForm"
                      objectApiName="Contact"
                      columns="2"
                      recordId="{!v.contactRecordId}"
                      fields= "{!v.conFields}"
                      mode="View" />

Design

<design:component label="Contact Object Configuration">
<design:attribute name="HeaderLabel" label="Header Label" />
<design:attribute name="contactLookup" label="Contact Field API Name" description="API Name of the Contact Object"/>
<design:attribute name="FieldApiName" label="Field API Name" />

Answer 1

As I can see from the code in markup the <aura:attribute name="FieldApiName" type="string"/> , you haven't specified the default value of attribute 'FieldApiName'. Thus its undefined. So in your Javascript var fieldString = component.get('v.FieldApiName'); is null/undefined . You cannot call split method on null/undefined.

Pass the FieldApiName from the App Builder or lightning Application you are using.

or in your markup default it to

<aura:attribute name="FieldApiName" type="string" default="Id"/>

Answer 2

I solved my problem by configuring FieldAPIName design attribute as Name,Email instead of 'Name','Email'. We cannot have the ' character in the string.