Show html table in drupal 8 block - drupal

Question

i have created a module in Drupal 8 for showing third party API data in a block
here is some data returned from that API
{"ObjectId":43,"ObjectName":"MEGA MELA","ObjectTitle":"Event Created by API","ObjectDescription":"NEW EVENT BY API","ObjectLabel":"","ObjectTypeId":33,"MaxFieldsExpected":5,"ObjectValueType":null,"ObjectControlType":"","IsDeleted":true,"CreatedDate":"2019-05-22T07:56:03.767","CreatedBy":null,"EditedDate":null,"EditedBy":null,"DeletedDate":null},{"ObjectId":44,"ObjectName":"Event x11","ObjectTitle":"Event Created by API","ObjectDescription":"NEW EVENT BY API","ObjectLabel":"","ObjectTypeId":33,"MaxFieldsExpected":5,"ObjectValueType":null,"ObjectControlType":"","IsDeleted":true,"CreatedDate":"2019-05-23T00:33:50.7","CreatedBy":null,"EditedDate":null,"EditedBy":null,"DeletedDate":null}]}
i have created a custom module to show some of this data in a block
this is my module directory hierarchy , module directory name is apihtml
-apihtml
-src
-Plugin
-Block
-rest.php
-apihtml.info.yml
as you can see there are just two files
apihtml.info.yml and rest.php
here is apihtml.info.yml content
name: Third Party Api Data with html
type: module
description: 'This is for showing rest data in ui with html'
package: Custom
version: 8.x
core: 8.x
dependencies:
- node
- block
and here is rest.php content
<?php
/**
* #file
*/
namespace Drupal\apihtml\Plugin\Block;
use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Component\Serialization\Json;
/**
* Creates a 'Foobar' Block
* #Block(
* id = "AntShow with html formatting",
* admin_label = #Translation("Ant Show & HTML"),
* )
*/
class rest extends BlockBase {
public function build() {
/** #var \GuzzleHttp\Client $client */
$client = \Drupal::service('http_client_factory')->fromOptions([
'base_uri' => 'http://myApiPath',
]);
$response = $client->get('objects/events');
$dec = Json::decode($response->getBody());
$items = [];
foreach ($dec as $d) {
foreach ($d as $ins) {
$items[] = $ins['ObjectName'] ;
}
}
return [
'#theme' => 'item_list',
'#items' => $items,
];
}
}
here by using array Key ObjecName i am able to show object name in block
here is the block OutPut
MEGA MELA
Event x11
but i want something more
i want to show this API returned data in the tabular form means the array key should be the header of the data value data will be in rows
like this
ObjectId | ObjectName | ObjectTitle | ObjectDescription | ObjectLabel | ObjectTypeId | MaxFieldsExpected | ObjectValueType | ObjectControlType | IsDeleted | CreatedDate | CreatedBy | EditedDate | EditedBy
43 | MEGA MELA | Event Created by API | NEW EVENT BY API | ..............................................................................
in this Drupal block all the data displayed has to be returned in build function in rest.php file
this is the code which shows data returned by api in tabular format
foreach ($dec as $d) {
?>
<table>
<?php foreach ($d as $ins) { ?>
<tr>
<?php
foreach ($ins as $key=>$value) {
echo "<td><h3>".$key."</h3></td>";
} ?>
</tr>
<tr>
<?php
foreach ($ins as $key=>$value) {
echo "<td><h3>".$value."</h3></td>";
} ?>
</tr><?php
} ?>
</table> <?php
}
But i am not getting how can i put this code in build function of rest.php to show tabular data in the block

Answer 1

Use custom Template:
1. change you return :
return [
'#theme' => 'item_list',
'#items' => $items,
];
return [
'#theme' => 'my_custom_template',
'#content' => $items,
];
in your apihtml.module us hook_theme
function apihtml_theme() {
return array(
'my_custom_template' =>[
'variables' => [
'content' => []
]
]);
}
and create a custom twig: templates/my-custom-template.html.twig
{% for data in content %}
...
{% endfor %}

Answer 2

You can create custom Twig template and display all your data as you want. You can read more about it here.