Displaying data in expandable/collapsible UITableView from JSON (objective-c)

Question

I've a requirement of displaying data from web service in an expandable table view up to 2 levels. While this is possible with static data, I am unable to find a way to make this work with data retrieved from backend. An example of this in Postman is shown below:

One Level UITableView Data in Postman

The above is for first-level expansion only. Here, "Accountants" is the main category and "jj tags", "Certified Public" & "General Services" are the sub categories that would be visible after expansion (once the user taps on the cell named "Accountants"). Likewise, several categories need to be displayed and may or may not contain a further expansion of second level.

As for the web service, I've the option of fetching data in 2 ways:

• Getting both the main and sub categories in a single API (as shown in above screenshot).
• Getting the main and sub categories in separate APIs.

So far I've tried implementing the main categories in titleForHeaderInSection & first-level sub-categories in cellForRowAtIndexPath

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return [[subCatArray objectAtIndex:section] count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ceLL" forIndexPath:indexPath];
    cell.textLabel.text = [[subCatArray objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
    return cell;
}

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

    return [catArray count];
}

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{

    for (int i=0; i<[catArray count]; i++) {
        if(section == i){
            return NSLocalizedString([catArray objectAtIndex:i], nil);
        }
    }
    return nil;
}

But how do I go about the second-level and making these collapsible/expandable?

Answer 1

Before starting I would like to call the cells which expands as primary cells and the expanded cells(i.e the sub category cells) as secondary cells.

As you have started implementing, make the primary cell as the header. But without giving the subCatArray count for that particular section in the "numberOfRowsInSection" method, you need to modify the array whose count you are planning to return in the "numberOfRowsInSection" method. That array should be such that it should contain the details of only the visible rows i.e, it should have zero elements initially and on tapping say "Accountants" modify the array with details of elements like "jj tags", "Certified Public" & "General Services" and on again tapping the "Accountants" cell make the array empty. To detect tap on the section header you can place a button with frame equal to the frame of "viewForHeader" and pass the section index as button tag or you can use tap gestures. Make sure to reload the table on the selector which is called when tapping the section.

Instead of using table view sections you can simply use rows to show both primary and secondary cells but change the array that you use to populate the cells accordingly.