CODEWITHSUNDEEP
htmlangularjs
QWERTY
QWERTY

Reputation: 263

Display data to the table in specific td cells position

I have a data and I want them to display in the table as below:

http://s7.postimg.org/yy88qdhhn/seating_Manifest.jpg

How can I display the names of the people next to their seat no? Should I create 2 tables, the one table is for seat no and the other is for passenger's name then merge them using css? But I know there is a solution to display them without using css. Thanks!

This is the code below: 

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  }, ];

  var tdCells = [];
  for (var i = 0; i < $scope.seatArr.length; i++) {
    if (i % 7 == 0) 
      tdCells.push([]);
    var data = $scope.seatArr[i];
    for (var d in $scope.myData) {
      if ($scope.myData[d].seatno == $scope.seatArr[i]) {
        data = $scope.myData[d].name;
        break;
      }
    }
    tdCells[tdCells.length - 1].push(data);
  }
  $scope.rows = tdCells;


});
td {
  width: 10%
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

Upvotes: 0

Views: 100

Answers (1)

Amaranadh Meda
Amaranadh Meda

Reputation: 724

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  } ];
  
  $scope.getName = function(number){
      console.log(number);
      for(var i=0;i<$scope.myData.length;i++){
          if(number == $scope.myData[i].seatno)
              return $scope.myData[i].name;
      }
       return '';
  };
  var tdCells = [];
  var primaryarray=-1;
  for(var i=0;i<$scope.totalSeats;i++){
     if(i%3 ===0){
      ++primaryarray;          
      tdCells[primaryarray] = [];
     }
    
    tdCells[primaryarray][tdCells[primaryarray].length] = i+1 ;        
            tdCells[primaryarray][tdCells[primaryarray].length] = 
        $scope.getName(i+1);                  
  }
  $scope.rows = tdCells;
  console.log($scope.rows);
});
td {
  width: 10%
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

var app = angular.module("myApp", []);
app.controller('check', function($scope) {
  $scope.totalSeats = 20;
  $scope.seatArr = [];
  for (var i = 1; i <= $scope.totalSeats; i++) {
    $scope.seatArr.push(i);
  }

  console.log($scope.seatsArr);

  $scope.myData = [{
    seatno: '1',
    name: 'Melanie',
    ticketnNo: "abc456",
    insuranceNo: 34
  }, {
    seatno: '2',
    name: 'JOsefa',
    ticketnNo: "abc231",
    insuranceNo: 90
  }, {
    seatno: '17',
    name: 'Luna Marie',
    ticketnNo: "abc324",
    insuranceNo: 35
  }, {
    seatno: '5',
    name: 'Jana',
    ticketnNo: "abc221",
    insuranceNo: 91
  }, {
    seatno: '18',
    name: 'Scott Tooker',
    ticketnNo: "abc453",
    insuranceNo: 36
  }, {
    seatno: '6',
    name: 'Malanies Santos',
    ticketnNo: "abc241",
    insuranceNo: 93
  }, {
    seatno: '20',
    name: 'Luna Marie Landiola',
    ticketnNo: "abc322",
    insuranceNo: 39
  }, {
    seatno: '6',
    name: 'Eliza',
    ticketnNo: "abc222",
    insuranceNo: 92
  }, ];

  var tdCells = [];
  for (var i = 0; i < $scope.seatArr.length; i++) {
    if (i % 7 == 0) 
      tdCells.push([]);
    var data = $scope.seatArr[i];
    for (var d in $scope.myData) {
      if ($scope.myData[d].seatno == $scope.seatArr[i]) {
        data = $scope.myData[d].name;
        break;
      }
    }
    tdCells[tdCells.length - 1].push(data);
  }
  $scope.rows = tdCells;


});
td {
  width: 10%
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="check">
  <table border="1" width="100%">
    <colgroup span="7"></colgroup>
    <tbody>
      <tr ng-repeat="tr in rows">
        <td ng-repeat="td in tr">
          {{ td }}
        </td>
      </tr>
    </tbody>
  </table>
  </body>

Upvotes: 1

Related Questions