Accordion does not work with data that is not hard coded

[Lightk3ira]

Make sure to check the demo app(s) for sample usage

Checked samples.

Make sure to check the existing issues in this repository

Checked issues.

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter. The demo app uses a hard coded array of items. The demo works in my project. When I switch the array to mine that uses an api call to return data it does not work. I have tried both async and non async. Working only for hard-coded data makes this plugin unusable.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device? Both

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 5.4.0

• Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project)

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) "tns-ios": { "version": "5.1.1" }, "tns-android": { "version": "5.4.0" }

• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here) "nativescript-accordion": "^6.0.0-beta.2",

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it. Step 1: Copy demo code. Step 2: Use data from api call Step 3: Nothing is shown or clicking on an accordian makes the app crash (this is the issue)

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

<Accordion height="100%" [items]="myItemsArrayFromApi" allowMultiple="false" [selectedIndexes]="selectedIndexes">

    <ng-template` let-i="index" let-item="item" acTemplateKey="title">
        <StackLayout  height="200" backgroundColor="white">
           <Label backgroundColor="green" [text]="title"></Label>
	 </StackLayout>
    </ng-template>

    <ng-template let-i="index" let-item="item" acTemplateKey="content">
        <StackLayout  height="200">
	   <Label backgroundColor="green" [text]="content"></Label>
        </StackLayout>
    </ng-template>
</Accordion>

[Lightk3ira]

Update of stack trace: Shows up but crashing on tap

JS: ERROR TypeError: Cannot read property 'length' of undefined JS: ERROR CONTEXT { JS: "view": { JS: "def": { JS: "nodeFlags": 370591745, JS: "rootNodeFlags": 33554433, JS: "nodeMatchedQueries": 2, JS: "flags": 0, JS: "nodes": [ JS: { JS: "nodeIndex": 0, JS: "parent": null, JS: "renderParent": null, JS: "bindingIndex": 0, JS: "outputIndex": 0, JS: "checkIndex": 0, JS: "flags": 33554433, JS: "childFlags": 337037313, JS: "directChildFlags": 1492993, JS: "childMatchedQueries": 2, JS: "matchedQueries": {}, JS: "matchedQueryIds": 0, JS: "references": {}, JS: "ngContentIndex": null, JS: "childCount": 7, JS: "bindings": [ JS: { JS: "flags": 8, JS: "ns": "", JS: "name": "selectedIndexes", JS: "nonMinifiedName": "selectedIndexes", JS: "securityContext": 0 JS: } JS: ], JS: "bindingFlags": 8, JS: "outputs": [], JS: "element": { JS: "ns": "", JS: "name": "Accordion", JS: ... System.err: com.tns.NativeScriptException: System.err: Calling js method getChildrenCount failed System.err: System.err: TypeError: Cannot read property 'length' of undefined System.err: File: "file:///data/data/com.panibus.mobile/files/app/vendor.js, line: 140886, column: 76 System.err: System.err: StackTrace: System.err: Frame: function:'push.../node_modules/nativescript-accordion/accordion.js.AccordionListAdapter.getChildrenCount', file:'file:///data/data/com.panibus.mobile/files/app/vendor.js', line: 140886, column: 77 System.err: System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1083) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1070) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1050) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1042) System.err: at com.tns.gen.android.widget.BaseExpandableListAdapter_vendor_140620_28_AccordionListAdapter.getChildrenCount(BaseExpandableListAdapter_vendor_140620_28_AccordionListAdapter.java:24) System.err: at android.widget.ExpandableListConnector.refreshExpGroupMetadataList(ExpandableListConnector.java:563) System.err: at android.widget.ExpandableListConnector.expandGroup(ExpandableListConnector.java:688) System.err: at android.widget.ExpandableListView.handleItemClick(ExpandableListView.java:693) System.err: at android.widget.ExpandableListView.performItemClick(ExpandableListView.java:653) System.err: at android.widget.AbsListView$PerformClick.run(AbsListView.java:4094) System.err: at android.widget.AbsListView$10.run(AbsListView.java:6582) System.err: at android.os.Handler.handleCallback(Handler.java:789) System.err: at android.os.Handler.dispatchMessage(Handler.java:98) System.err: at android.os.Looper.loop(Looper.java:164) System.err: at android.app.ActivityThread.main(ActivityThread.java:6944) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

[Lightk3ira]

I believe I found the issue it seems to be with 'childItems' and it defaults to 'items'. I am not sure why this is required at all. I have an array like this:

[ {name: Joe, age 24, bannerImage: 'http://...' }, {name: Dan, age 43, bannerImage: 'http://...' } ]

I believe this should be fine as I am just looping an array of objects. I do not see any docs specific on this property or how to ignore it.

[arnasdev]

I was able to overcome this issue by nesting my array,

   public vehicles: Vehicle[] =
    [
        {id: null, registration: "1234", manufacturer: "Audi", cpc: "", insurance: "01", license: "", model: "", nct: "", service: "", tax: ""},
    ];

    public items = [
        {
           blah: this.vehicles,
        }
    ]