How to enter vertical values in Tables in HTML via AngularJS? - angularjs

Question

For the starters, I would like to have something like this,
Array 1 Array 2 Array 3 Array 4
Arr1val1 Arr2val1 Arr3val1 Arr4val1
Arr1val2 Arr2val2 Arr3val2 Arr4val2
Arr1val3 Arr3val3 Arr4val3
Arr1val4 Arr4val4
Arr4val5
I have already solved the issue in the crudest way possible,a solution that won't scale to other data types and if number of variable increase to lets say 10 columns it will fail in the most glorious way which makes me cringe and ask for suggestions of improvement.
My naive approach is here in a fiddle.
As the code is simple I would like to explain what I did.
Step 1 : Calculate the highest number of elements in all arrays and the array from which it is coming.
Step 2 : Make the number of elements in all array same as the number of elements in the highest number of element possible by filling in blanks.
Step 3 : Iterate over one in the HTML and print all.
Would like to know what can be done to make this solution better and more scalable?

Answer 1

Instead of finding max length of arrays, push all the values to the specific array.
Draw a table inside the td. So here the data are drawn vertically.
Using this scenario, you can add any number of data to any array, since
this is generating vertically.
Please see the working code
https://jsfiddle.net/yaxmjpkp/7/
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
//Test case 1
$scope.arr1 = ["Arr1val1", "Arr1val2", "Arr1val3", "Arr1val4"];
$scope.arr2 = ["Arr2val1", "Arr2val2"];
$scope.arr3 = ["Arr3val1", "Arr3val2", "Arr3val3"];
$scope.arr4 = ["Arr4val1", "Arr4val2", "Arr4val3", "Arr4val4", "Arr4val5","Arrayval6"];
$scope.tableValues=[];
$scope.tableValues.push($scope.arr1);
$scope.tableValues.push($scope.arr2);
$scope.tableValues.push($scope.arr3);
$scope.tableValues.push($scope.arr4);
debugger
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<table>
<thead>
<td>
Header 1
</td>
<td>
Header 2
</td>
<td>
Header 3
</td>
<td>
Header 4
</td>
</thead>
<tbody>
<tr>
<td ng-repeat="val in tableValues" valign = "top">
<table>
<tr ng-repeat="val2 in val">
<td>{{val2}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

As far as I know you don't need to do the first two steps. As javascript is loosely typed language and so is angular (although its not a language but its built over JS). So when you access some value like
<tr ng-repeat="val in arr1 track by $index">
<td>{{arr1[$index]}}</td>
<td>{{arr2[$index]}}</td>
<td>{{arr3[$index]}}</td>
<td>{{arr4[$index]}}</td>
</tr>
Angular won't find any element on that index (Because of the unequal size of that array). So you won't have any issue regarding the access of the value on that particular index. And an empty <td> will be added in that place.

Answer 3

Btw, you can store array elements in associative array and you can check max length in a more generic way.
$scope.arrs = {
arr1: ["Arr1val1", "Arr1val2", "Arr1val3", "Arr1val4"],
arr2: ["Arr2val1", "Arr2val2"],
arr3: ["Arr3val1", "Arr3val2", "Arr3val3"],
arr4: ["Arr4val1", "Arr4val2", "Arr4val3", "Arr4val4", "Arr4val5"]
};
var maxLength = 0;
for(var arrKey in $scope.arrs){
maxLength = Math.max($scope.arrs[arrKey].length, maxLength);
});
Here is complete solution: https://plnkr.co/edit/p6EcXeiRKHY2wQA3xCi4?p=preview