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

Using Node to upload various large JSON files into mongoDB

Transferring an Array from PHP to Javascript

Tips for making a React/Socket.IO app accessible from external sources

Effective Pagination in Rails 5: Retrieving Total Entries with will_paginate and Active Model Serializers

URLRouterProvider's otherwise state reloads due to empty state parameters of the parent

Styling Challenges with CSS/AngularJS Accordion in Footer

What is the best way to test a try/catch block within a useEffect hook?

Click handler that transmits data to a server using ajax

Troubleshooting: Responsive attribute settings causing ng-click in AngularJS slick carousel to malfunction

strange occurrences with the angularjs directive when enclosed

I'm attempting to create a text toggle button for displaying more or less content

Reposition div when clicked

Including additional data to a page after each iteration in order to display the current progress

"Utilizing Node.js and Express to return JSONP data based on

Struggling to navigate the world of JavaScript and find the sum of odd numbers?

The process of uploading a file is interrupted by an AJAX Timeout

Unnecessary PHP code will run on its own in JavaScript

Toggle between resizing a set of boxes and fading in/out their images

Incorporate unique color variables from the tailwind.config.js file

I designed a dropdown menu with a searchable <mat-select> feature, where selecting an item is automatic when a space bar is pressed in the search box