Leverage information stored in an array within the HandsonTable Angular directive

Question

Leverage information stored in an array within the HandsonTable Angular directive

Some of my columns in a HandsoneTable created using Angular directives are not rendering when I try to use an array as the data source with common array notation (name[0]). I'm unsure if this is supposed to work like this or if I am doing something wrong.

The data source looks like this:

$scope.data = [
    {
        'name': ['Bob', 'Bobson'],
        'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2bf9daebcb0adb1b8f3beb2b0">[email protected]</a>'
    },
    {
        'name': ['John', 'Johnson'],
        'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3852575056784b595548545d165b5755">[email protected]</a>'
    }
];

Here is my template setup:

<div ng-app="Test">
    <div ng-controller="tableCtrl">
        <hot-table datarows="data">
            <hot-column data="name[0]"></hot-column>
            <hot-column data="name[1]"></hot-column>
            <hot-column data="email"></hot-column>
        </hot-table>
     </div>
</div>

You can view a simple example here: https://jsfiddle.net/9qzo3wnv/4/

javascript angularjs handsontable

Answer 1

Answer №1

It is technically not feasible to utilize array notation (name[0]) on the data attribute. However, there are several alternative methods you can employ to achieve the same result:

Approach 1

Transform your data into an object instead.

Example: https://jsfiddle.net/4yuv1vyu/

$scope.data = [
  {
    'name': {0:'Bob',1:'Bobson'},
    'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fef3d1e2f0fce1fdf4bff2fefc">[email protected]</a>'
  },
  {
    'name': {0:'John',1: 'Johnson'},
    'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7ada8afa987b4a6aab7aba2e9a4a8aa">[email protected]</a>'
  }
];

Approach 2

Convert the array into an object using a controller function:

Example: https://jsfiddle.net/vypahad6/

Details:

$scope.toObject = function(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

for (var d in $scope.data) {
  $scope.data[d].name = $scope.toObject($scope.data[d].name);
}

Approach 3

Take advantage of handsontable's custom cell renderer capabilities:

Example: https://jsfiddle.net/sbkwcfr5/

Details:

View:
<hot-column data="name" renderer="customRendererName"></hot-column>

Controller:
$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) {
  var html = Handsontable.helper.stringify(value[0]);
  td.innerHTML = html;
  return td;
  return value[0];
}

Answer 2

It is technically not feasible to utilize array notation (name[0]) on the data attribute. However, there are several alternative methods you can employ to achieve the same result:

Approach 1

Transform your data into an object instead.

Example: https://jsfiddle.net/4yuv1vyu/

$scope.data = [
  {
    'name': {0:'Bob',1:'Bobson'},
    'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fef3d1e2f0fce1fdf4bff2fefc">[email protected]</a>'
  },
  {
    'name': {0:'John',1: 'Johnson'},
    'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7ada8afa987b4a6aab7aba2e9a4a8aa">[email protected]</a>'
  }
];

Approach 2

Convert the array into an object using a controller function:

Example: https://jsfiddle.net/vypahad6/

Details:

$scope.toObject = function(arr) {
  var rv = {};
  for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
  return rv;
}

for (var d in $scope.data) {
  $scope.data[d].name = $scope.toObject($scope.data[d].name);
}

Approach 3

Take advantage of handsontable's custom cell renderer capabilities:

Example: https://jsfiddle.net/sbkwcfr5/

Details:

View:
<hot-column data="name" renderer="customRendererName"></hot-column>

Controller:
$scope.customRendererName = function(instance, td, row, col, prop, value, cellProperties) {
  var html = Handsontable.helper.stringify(value[0]);
  td.innerHTML = html;
  return td;
  return value[0];
}

Leverage information stored in an array within the HandsonTable Angular directive

Answer №1

Similar questions

Launch both client and server simultaneously with a single command by utilizing Vue-cli and Webpack

Using JavaScript, transform a client's date/time string into a JSON-compatible date/time string

Exploring the power of Ionic and AngularJS in making secure HTTPS Post Requests

Issue encountered: Next.js version 14, Tesseract.js Error: Module not found .../.next/worker-script/node/index.js'

Unable to establish connection with Raspberry Pi Node Server on different devices

I would like for this message to appear periodically following the initial execution

What are the steps to troubleshoot and fix the Internal Server Error on Next.Js?

Is ASP.NET capable of displaying an expandable grid view?

exciting command: templateUrl

Build a new shop using a section of data from a JSON database

Setting up a new folder in the internal storage within a React Native Expo environment

The browser has blocked access to XMLHttpRequest from a specific origin due to the absence of the 'Access-Control-Allow-Origin' header in the requested resource

Angular Translate Directive Unleashes the Power of XSS Vulnerabilities

Accessing a Child Component Function in Material UI

Is it possible to include numbers and commas in JQuery Validation?

What could be causing my redux-observable to not be triggered as expected?

The SVG format quickly displays new and larger datasets on line charts without any transition effects

Differentiating between mouseenter and tap events: What's the key?

Changing the size on click using Jquery

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while