Why do I see [Object object] in my Flex DataGrid?
This questions comes in from a reader, Rin.
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:
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:
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:
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:
Next we have 3 data grids:
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:
The second DataGrid binds to our first ArrayCollection. It shows up data properly, but all data is displayed. Here is the third:
<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.
There are no comments for this entry.
[Add Comment]