Show html table in drupal 8 block

0
votes

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

2
drupaldrupal-8drupal-modulesdrupal-views

2 Answers

1
votes

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

1
votes

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 %}