ListView - Data structure for renderSectionHeader

[Ehesp]

I'm currently struggling to understand how to get the section headers working. My data structure is like so:

[{
    title: 'Header One',
    data: []
}, {
    title: 'Header Two',
    data: []   
}]

Where data is an array of objects.

    renderSectionHeader(sectionData, sectionID) {
        console.log('Section ID:', sectionID);
        console.log('Section Data:', sectionData);

This just returns s1 and the whole data set. How do I specify/break-up this data?

I've tried looking at the examples, but I'm finding it hard to see what the structure is like.

[sahrens]

I think the problem might be that you're mixing and matching. Can you try either doing an array of arrays, or an object of objects, instead of the array of objects that you have there? Here's the comment from ListViewDataSource:

   * The default extractor expects data of one of the following forms:
   *
   *      { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
   *
   *    or
   *
   *      [ [ <rowData1>, <rowData2>, ... ], ... ]

[sahrens]

If you want to keep your data structured the way it currently is (or if you can't get it working otherwise), you'll need to provide your own sectionIdentities, and rowIdentities arrays when you clone the datasource, and might want to provide your own extractors as well.

[sahrens]

Let me know if this doesn't work for you.

[jasonmerino]

For anyone who runs across this issue with the same question I had it looks like there is another data format the extractor accepts now. Here is the list of accepted formats from the ListViewDataSource.js comments.

   * The default extractor expects data of one of the following forms:
   *
   *      { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
   *
   *    or
   *
   *      { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
   *
   *    or
   *
   *      [ [ <rowData1>, <rowData2>, ... ], ... ]