Generate a 2D matrix to represent a grid

Question

Generate a 2D matrix to represent a grid

I have a list of numbers that I need to convert into a two-dimensional array. For example:

let data=['1','4','2','1','6','9','1','5',]

The desired output would be:

result = [['1','4','2','1'],['6','9','1','5']]

My ultimate goal is to create a dynamic grid-style menu system in Ionic using the following example:

<div class="text-center" ng-init="models = [['12','1','2','3','3'],['4','4','5','6','7']]">
    <div ng-repeat="m in models">
        <span class="control-label1" ng-repeat="movie in m track by $index">
    {{movie}}</span>
        </div>
    </div>

To achieve this, I need to populate my array with unique values like so:

// Function to add a unique value to the array
$scope.addhourinArray = function (value) {

    if (value) {
        if ($scope.hourArray.indexOf(value) == -1) {
            $scope.hourArray.push(value);
        }
    }
};

// Adding values to the two-dimensional array
for (var i = 0; i < data.length; i++) {
    $scope.addhourinArray(hour);
}

javascript arrays angularjs ionic-framework

Answer 1

Answer №1

I'm not entirely sure what you mean by the "Angular Way" in this particular situation, especially since creating a 2 dimensional array from a 1 dimensional one doesn't appear to be an Angular-specific issue.

Additionally, the dynamic nature of the data feeding into the menu is somewhat unclear (given that your example simply retrieves it from an ng-init). Assuming the data is sourced asynchronously, the following assumptions are made:

Typically, asynchronous sources are encapsulated within an Angular service. Any data transformation logic would usually reside within the service, unless the transformation is specific to the controller and the service provides alternate data representations to other parts of the application.
Consider encapsulating your menu into a directive that has its own template and controller.
Avoid using $scope unless necessary. The "Controller As" syntax was introduced in Angular JS 1.1.5 and has been steadily improving since then.

The code snippet below attempts to illustrate these concepts:

<!DOCTYPE html>
<html>
<head>
  <title>angular 1.x directive for movie-menu custom element</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body> 
  <div ng-app="myApp">
    <script type="text/ng-template" id="movie-menu.html">
      <div ng-repeat="m in mmvm.models">
        <span ng-repeat="movie in m track by $index">
          {{movie}}
        </span>
      </div>
    </script>

    <movie-menu></movie-menu> 
  </div>  
  <script type="text/javascript">
    (function () {

      dataServiceFactory.$inject = ['$q']; 
      function dataServiceFactory ($q) {

        function transformData (items) {
          var rowLength = ((items.length % 2) == 0 ? items.length : items.length - 1)/2,
          top = items.slice(0, rowLength), 
          bottom = items.slice(rowLength, rowLength + rowLength); 

          return [top, bottom];
        }

        function fakeData() {      
          var data, transformed, resultP, resolveResult, rejectResult;

          data = ['12','1','2','3','3','4','4','5','6','7','x'];

          transformed = transformData(data);

          resultP = $q(function(resolve, reject) {
            resolveResult = resolve;
            rejectResult = reject;        
          });

          resolveResult(transformed);

          return resultP; 
        }

        return { 
          getData: fakeData 
        }; 

      } 

      MovieMenuCtrl.$inject = ['dataService'];
      function MovieMenuCtrl (dataService) {
        var vm;

        function setModels (result) {
          vm.models = result;
        }

        vm = this;
        dataService.getData().then(setModels);    
      }

      movieMenuDdoFactory.$inject = [];
      function movieMenuDdoFactory () {
        return {
          restrict: 'E',
          scope: {},
          replace: true,
          templateUrl: 'movie-menu.html',
          controller: 'MovieMenuCtrl',
          controllerAs: 'mmvm',
          bindToController: true
        };
      }

      angular
        .module('myApp', [])
        .factory('dataService', dataServiceFactory)
        .controller('MovieMenuCtrl', MovieMenuCtrl)
        .directive('movieMenu', movieMenuDdoFactory);

    })();
  </script>     
</body>
</html>

References:
Chapter 1: Building a simple element directive - JSFiddle
How I've Improved My Angular Apps by Banning ng-controller
Refactoring Angular Apps to Component Style
AngularJS: Developer Guide: Dependency Injection - $inject Property Annotation
AngularJS: API: $q - $q constructor
Array.prototype.slice() - JavaScript | MDN

Answer 2

I'm not entirely sure what you mean by the "Angular Way" in this particular situation, especially since creating a 2 dimensional array from a 1 dimensional one doesn't appear to be an Angular-specific issue.

Additionally, the dynamic nature of the data feeding into the menu is somewhat unclear (given that your example simply retrieves it from an ng-init). Assuming the data is sourced asynchronously, the following assumptions are made:

Typically, asynchronous sources are encapsulated within an Angular service. Any data transformation logic would usually reside within the service, unless the transformation is specific to the controller and the service provides alternate data representations to other parts of the application.
Consider encapsulating your menu into a directive that has its own template and controller.
Avoid using $scope unless necessary. The "Controller As" syntax was introduced in Angular JS 1.1.5 and has been steadily improving since then.

The code snippet below attempts to illustrate these concepts:

<!DOCTYPE html>
<html>
<head>
  <title>angular 1.x directive for movie-menu custom element</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body> 
  <div ng-app="myApp">
    <script type="text/ng-template" id="movie-menu.html">
      <div ng-repeat="m in mmvm.models">
        <span ng-repeat="movie in m track by $index">
          {{movie}}
        </span>
      </div>
    </script>

    <movie-menu></movie-menu> 
  </div>  
  <script type="text/javascript">
    (function () {

      dataServiceFactory.$inject = ['$q']; 
      function dataServiceFactory ($q) {

        function transformData (items) {
          var rowLength = ((items.length % 2) == 0 ? items.length : items.length - 1)/2,
          top = items.slice(0, rowLength), 
          bottom = items.slice(rowLength, rowLength + rowLength); 

          return [top, bottom];
        }

        function fakeData() {      
          var data, transformed, resultP, resolveResult, rejectResult;

          data = ['12','1','2','3','3','4','4','5','6','7','x'];

          transformed = transformData(data);

          resultP = $q(function(resolve, reject) {
            resolveResult = resolve;
            rejectResult = reject;        
          });

          resolveResult(transformed);

          return resultP; 
        }

        return { 
          getData: fakeData 
        }; 

      } 

      MovieMenuCtrl.$inject = ['dataService'];
      function MovieMenuCtrl (dataService) {
        var vm;

        function setModels (result) {
          vm.models = result;
        }

        vm = this;
        dataService.getData().then(setModels);    
      }

      movieMenuDdoFactory.$inject = [];
      function movieMenuDdoFactory () {
        return {
          restrict: 'E',
          scope: {},
          replace: true,
          templateUrl: 'movie-menu.html',
          controller: 'MovieMenuCtrl',
          controllerAs: 'mmvm',
          bindToController: true
        };
      }

      angular
        .module('myApp', [])
        .factory('dataService', dataServiceFactory)
        .controller('MovieMenuCtrl', MovieMenuCtrl)
        .directive('movieMenu', movieMenuDdoFactory);

    })();
  </script>     
</body>
</html>

References:
Chapter 1: Building a simple element directive - JSFiddle
How I've Improved My Angular Apps by Banning ng-controller
Refactoring Angular Apps to Component Style
AngularJS: Developer Guide: Dependency Injection - $inject Property Annotation
AngularJS: API: $q - $q constructor
Array.prototype.slice() - JavaScript | MDN

Generate a 2D matrix to represent a grid

Answer №1

Similar questions

Tips on saving every query outcome in a separate array and delivering it back to the controller upon completion

Trouble with Swiper carousel loading new slides

The aoColumns functionality in datatables seems to be malfunctioning

The function in which the "useStyles" React Hook is invoked is not a valid React function component or a defined custom React Hook function

React: Remember to always retain the initial four characters when making changes

JS function to reverse a string

When do Angular.js memory leaks become a cause for concern?

Importing multiple modules in Typescript is a common practice

Utilizing libraries in JavaScript

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

Can I assign a custom form id before manually triggering submission using AJAX?

Is there a way to update a variable in a controller using AJAX?

Scraping multiple websites using NodeJS

Django Crispy Forms do not support JavaScript functionality

Tips for displaying an edit action icon when hovering over specific text

Utilizing Jquery for precise element placement and retrieving its position details

Having trouble removing just one element from an array in Redux. Any suggestions on how to make it work properly?

Creating a seamless navigation experience with Next.js: Implementing per-page layouts for efficient 2-link navigation on a single screen

AngularJS - Displaying the initial content in the <ui-view> container

Display an array in a table based on a specific condition using PHP