Having trouble binding JSON data to a mobile list in Adobe Flash builder

Hi, i have been having some problems using JSON data in flash builder lately and I was hoping someone could help me out here.

I have spent the past month working solidly on this issue, so I HAVE been looking around, HAVE been trying out everything I can find or think of. I am simply stuck.

I have been working on a flex mobile application for the Blackberry Playbook tablet with Adobe Flash Builder 4.6. It is a reddit app, designed to give users the main reddit feed, subreddits, search function, hopefully log in stuff etc. Of course I need the aid of the reddit API to access this information, of which the documentation can be found here: https://github.com/reddit/reddit/wiki/API/ The api uses either XML or JSON formatted data.

Now onto my problem- Like mentioned above, i want to display the reddit feed inside the app. I want to be able to use a item renderer to customize the data that is shown within each entry of the list.

One entry would consist of: 1) a thumbnail of the image in the post 2) The title of the post 3) a 'like/dislike' button, but this is unimportant at the moment.

Of course to start out, i placed a spark List component onto the design view. Then i configured a new HTTP data service using the Data/Services panel. I specified http://www.reddit.com/r/all.json for the url. I configured the return type, and the did a Test Operation. Everything connected just fine. All the data came through as normal. I will give you an idea of what the data comes back as so that you may understand my issue later on.

Test Operation Results (json data structure):

• NoName1
  • data
    • after
    • before
    • children
      • [0]
        • data
          • media_embed
          • score
          • id
          • title
          • thumbnail
          • url
          • (etc etc...)
        • kind
      • [1]
        • data
          • media_embed
          • score
          • title
          • thumbnail
          • (etc etc...)
        • kind
      • [2] (array continues)
    • modhash
  • kind

As you can see, to get to the thumnail for example, you would have to go through data.children[].data.thumnail. When I tried to bind this data to the spark List component, I specified the data service to be from the one above. Then I specified the Data provider option to be Children[], as this value is typically set to the array. Now this is where the trouble begins. The final option, Label Field, only gave me one value to choose from: 'kind'. So as you can tell, it wasnt expecting the data to go any further nested. It stops at the two value just within each array item, which would be Data and Kind, though it only offers me Kind. I need to go one level further to access Title and Thumbnail. This is my problem.

Now, I have analyzed the code for the binding, and I have tried altering it to accomodate the further nested value. No success what so ever. The following is the code that the binding generates:

<s:List  

id="myList" width="100%" height="100%" change="myList_changeHandler(event)" 
    creationComplete="myList_creationCompleteHandler(event)"  labelField="kind">
<s:AsyncListViewlist="{TypeUtility.convertToCollectionredditFeedJSONResult.lastResult.data.children)}"/>         
<s:List>

Obviously i would want to have something like along the lines of: "TypeUtility.convertToCollection(redditFeedJSONResult.lastResult.data.children.data" and then set the labelField="title" or "thumbnail".

I certainly hope someone can help me with this. I am out of my mind as to what to do. If you need any further clarification I would be happy to provide it. I tried to explain the situation above as clearly as possible. Thank you so much.

Ted

I have this situation often: get an XML or JSON data from the server, then trying to use it as a dataProvider for a spark.components.List or for a mx.controls.Menu and then they just wouldn't display the data as I want them, because something in the data is different from what they expect. And then they display wrong XML-children or [Object,Object,etc.]

And in such cases I just create an empty ArrayCollection() which serves as dataProvider instead (and can be sorted and/or filtered too). And when data comes from the server, I push() new Objects into it:

[Bindable]
private var _data:ArrayCollection = new ArrayCollection();

public function update(xlist:XMLList):void {
    _data.length = 0;
    for each (var xml:XML in xlist)
        _data.push({label: xml, event: xml.@event});
}

This always works. And if you get your next problem - flickering of the List, then that is solvable by merging data too.

Good luck with your Playbook development, which is a cool piece of hardware :-)