Using Element API to output Super Table fields

Question

I am building a feed using Element API. I am currently looping through Matrix blocks to get various data (based on the help from this post). One of the matrix blocks contains a Super Table field, with various fields inside of that. Here is the relevant section of my Element API config file.

'transformer' => function(Entry $entry) {
  $contentBlocksArray = [];

     foreach ($entry->contentBlocks as $block){
       switch($block->type->handle) {

         case 'introText':
           $contentBlocksArray[] = [
             'introText' => [
               'body' => $block->body,
             ]
            ];
            break;

          case 'twoColumnText':
             $contentBlocksArray[] = [
               'twoColumnText' => [
                  'columnTextBlocks' => [
                      'icon' => $block->icon,
                      'text' => $block->text
                  ]
                ]
              ];
              break;

The first case in this switch works as expected. 'introText' is the Matrix box and 'body' is a plaintext field inside that block. The second case is where I'm having trouble. 'twoColumnText' is the Matrix block and 'columnTextBlocks' is a Super Table field with two plaintext fields. The api returns a response, but both 'icon' and 'text' = null.

I have also tried calling some of the functions as demonstrated in Super Tables docs here but no luck. I am by no means a php / laravel / etc developer, so I might be missing something that would be obvious to such a developer.

I suspect it's something similar to retrieving images where I have to loop through the Super Table fields, but I don't know what that syntax would look like.

Answer 1

Here is a solution I found. Define an empty array, then loop over it, providing whatever keys you want to return from the Super Table fields. Simply by looping over $block->columnTextBlocks (the handle of my Super Table field), Element API returns the information for the fields within the Super Table.

 case 'twoColumnText':

    $SuperTableRows = [];

    foreach ($block->columnTextBlocks as $row){
        $SuperTableRows[] = [
            'fieldHandle1' => $row->fieldHandle1,
            'fieldHandle2' => $row->fieldHandle2,
            'fieldHandle3' => $row->fieldHandle3
        ];
    }

    $contentBlocksArray[] = [
        'twoColumnText' => [
            'columnTextBlocks' => $SuperTableRows,
        ]
    ];

break;

If you need additional information about the Super Table fields, such as Placeholder text, field id's, etc. you can add a generic call to the Super Table field like so (using the same names as my previous code example):

$contentBlocksArray[] = [
    'twoColumnText' => [
        'generic' => $block->columnTextBlocks,
        'columnTextBlocks' => $SuperTableRows,
    ]
];

Now in Element API, the "generic" object includes a customFields array for each field within the Super Table. This only becomes available when you loop over the Super Table field, otherwise it would be null.

Here are some pictures of what the data from Element API looks like.

Here is a simplified version:

'transformer' => function(Entry $entry) {
   $SuperTableRows = [];

   foreach ($entry->superTableFieldHandle as $row){
     $SuperTableRows[] = [
       'fieldHandle1' => $row->fieldHandle1,
       'fieldHandle2' => $row->fieldHandle2
     ];
   }


   return [
     'SuperTableRows' => $SuperTableRows
   ];
 },