Check out our new training course on AngularJS for Flex Developers

Why do I see [Object object] in my Flex DataGrid?

This questions comes in from a reader, Rin.


I'm pretty adept in ColdFusion, and have recently picked up a passion for Flex. I've been able to successfully use the remote objects and write my own classes (w00t)... However, I came across something last night that has me stumped.

I have a datagrid in Flex. getPodcasts fires off to my CFC, and I saw all of my data (w00t!)... Excellent, I thought to myself. However, there was one problem. My Primary key 'ID' was showing up on the grid.

I started looking around on the web, and someone wrote that I could bind my {podCastRO.getPodcasts.lastResult} to an array. Awesome, right? So I went to add the following into my code: And, of course, I changed the datagrid to reflect the following: When I tried to run the code, it compiled (as it should), but I got a variety of weird items in my dataGrid... Instead of my items, I received [Object object] ... Okay, no big deal (or so I thought), as I went into debug mode and noticed that Flex was getting my variables in that ac ArrayCollection... So what I'm wondering now is how do I get the dataGrid to display items from that arrayCollection (seeing [object Object] isn't very helpful for my users, LoL)?

I truncated his question a bit for for brevity.

So, what's going on here. Flex triggers a getPodcast method call on a remote object. The Remote Object returns some data. The results of that data is bound to a DataGrid. Rin told me that this displays things perfectly:


<mx:DataGrid x="10" y="109" width="428" id="dg"
dataProvider="{podCastRO.getPodcasts.lastResult}"
click="this.currentState='updateState'; dgChangeHandler()" />

Except that an ID column is displayed that he doesn't want displayed. So, he took the results and bound them to an ArrayCollection, like this:


<mx:ArrayCollection id="ac"
source="{ArrayUtil.toArray(podCastRO.getPodcasts.lastResult)}"/>

Using that ArrayCollection as the dataProvider to the DataGrid he started seeing the [Object object]. Where does this come from?

The data that CF is sending back to the Flash Player is probably an array of Object. The objects are of Object type. The [Object object] is a result of the toString method on Flex's generic object.

One way to avoid this is to specify the DataGridColumn tag for each column and use the dataField property on each column. That way, you'll get object.dataField instead of object.toString().

Here is an example demonstrating the issues.

First define the Array Collection:


<mx:Script><![CDATA[

import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;
            
[Bindable] public var ac : ArrayCollection = new ArrayCollection([
{id: 1, name: "Jeffry Houser", phone:"123-456-789", email:"x@x.com"}
]);
            
]]>
</mx:Script>    

I'm hard coding for the sake of the example, but there is no reason this can't be the results of some remote Method call.

Bind it to an ArrayCollection using the same MXML syntax that Rin originally used:


<mx:ArrayCollection id="ac2" source="{ArrayUtil.toArray(ac)}"/>

Next we have 3 data grids:


<mx:DataGrid id="dg1" width="100%" height="100%" dataProvider="{ac2}" />

The first binds to the AC2, and we see a lot of [Object object] in place of strings. Interestingly, this displays properties on the ArrayCollection, such as filter function, not fields of objects which make up array elements.

This is the second one:


<mx:DataGrid id="dg2" width="100%" height="100%" dataProvider="{ac}" />

The second DataGrid binds to our first ArrayCollection. It shows up data properly, but all data is displayed. Here is the third:


<mx:DataGrid id="dg3" width="100%" height="100%" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>

The third, and final, dataProvider shows the correct results, with each column tied to a field we want to display in the ArrayCollection.

So, don't forget if you have questions feel free to ask. I love answering questions.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
zu's Gravatar what about an array collection of fields and objects? Like person.id is a number, and person.property is an object, say that it contains a string in person.property.message. If i type dataField="id" I get the correct id, but dataField="property.message" is empty...
# Posted By zu | 5/4/09 6:47 PM
Jeffry Houser's Gravatar Hi Zu,

In my example I am using an ArrayCollection of objects. I'm just using generic objects as opposed to typed objects with your own class.

Are you saying that your dataProvider is an ARrayCollection that consists of some simple values (fields) and some complex values (objects)? That would be odd, and I'm not sure how you'd handle it.

If you have objects that have complex objects embedded in them, I'm also not sure how you'd handle it. I would have tried the approach you specified "object.complexproperty.otherproperty"

It appears that DataGridColumn does not support a dataFunction. I wonder why.
# Posted By Jeffry Houser | 5/7/09 12:39 PM
Nits's Gravatar I am finding it difficult to get rid of [object Object] in my combobox. I have used a itemRenderer to populate this
comboBox in a dataGrid. The datagrid is populated with an ArrayCollection. This array collection has a list of Strings
which has to be populated in the combobox. Can you please suggest what can I do to get rid of [object Object].
# Posted By Nits | 7/3/09 5:56 AM
Jeffry Houser's Gravatar Nits,


If you're using an itemRenderer, usually that renderer will deal with displaying / setting the values. Have you tested your renderer outside of your DataGrid?

Is your problem in the drop down of the ComboBox? Or in the TextInput?

Honestly, I'm not sure where to point you without seeing your code.
# Posted By Jeffry Houser | 7/3/09 10:27 AM
Jamie's Gravatar This seems like somewhat of an associated problem, so I thought I would give it a bash by posting here!

I am dynamically populating a ComboBox with an HTTPservice calling an XML file. This all works dandy through the Flash Build 4 interface. Below is the ComboBox code:



<s:ComboBox id="cbSockOptions" change="cbSockOptions_changeHandler(event)"
selectedIndex="1"
enabled="true"
creationComplete="cbSockOptions_creationCompleteHandler(event)"
labelField="Symbol">
<s:AsyncListView list="{TypeUtility.convertToCollection(Operation1Result2.lastResult.Company)}"/>
</s:ComboBox>

As stated, above is my code which populates the ComboBox. I would like to retrieve the seleted value from the ComboBox, but when I do I get the following output (e.g. when presented in a Label):



[object Company_Type]



I am currently using the following code to retrieve the value of the ComboBox





cbSockOptions.selectedItem;



All the reading I have done on the subject says that I must specify a 'labelField' in my ComboBox, which I do. However, I am still seeing the [object Company_Type] as an output, instead of the real value.



help!
# Posted By Jamie | 4/21/10 9:58 AM
Steve's Gravatar my combo was populated by an array (locations) so I had to do this
var = locations[drpSchoolLocation.selectedIndex]. LOCATION_CODE.value
Had to dig into the array itself, could not get the value from the combo box
# Posted By Steve | 3/21/12 3:47 PM
Manu's Gravatar In mx datagrid(flex) if no data is there in perticular cell, show datatip is showing as [object Object]... How to fix it?
# Posted By Manu | 8/13/12 6:13 AM
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.

pure garcinia cambogia

payday loans

seo services

seo services