How to show fetched data horizontally instead of Vertically using angular js

Question

I need to generate the reports.I am using the Angularjs and PHP.
Expected Output:

Spec_ID     Bot_Name                              Color                Colorno                   Screen

AN/SN/18  750ML POCO PESCA ROTATION 1   Light Buff  Dark Buff Red P1345C P135C P warm red  150-31 150-31 150-31

Actual Output:

AG/SN/18  750ML POCO PESCA ROTATION 1   Light Buff  P1345C    150-31
AG/SN/18  750ML POCO PESCA ROTATION 1   Dark Buff   P135C     150-31
AG/SN/18  750ML POCO PESCA ROTATION 1    Red       P Warm Red   150-31

HTML:

<table>
  <thead>
      <tr>
          <th>Spec_ID</th>
          <th>name</th>
          <th>lastname</th>
          <th>Rollno</th>
          <th>Color</th>
          <th>Color No</th>
          <th>Mesh</th>                         
  </thead>
  <tbody>
      <tr ng-repeat="user in users">
          <td>{{user.Spec_Id}}</td>
          <td>{{user.Name}}</td>
          <td>{{user.lastname}}</td>
          <td>{{user.Rollno}}</td>
          <td>{{user.color}}</td>
          <td>{{user.colorno}}</td>
          <td>{{user.Mesh}}</td>
      </tr>
  </tbody>
</table>

SCRIPT

var request=$http({
  method: "post",
  url:"stock.json",
  data: {
    master: $scope.cust
  }

});
request.success(function(response){ 
  $scope.users = response;
  //ajax request to fetch data into $scope.data
});

stock.json:

Array
(
    [0] => Array
        (
            [0] => AG/SN/18
            [Spec_Id] => AG/SN/18
            [1] => 750ML POCO PESCA ROTATION 1
            [Bot_Name] => 750ML POCO PESCA ROTATION 1
            [2] => Light Buff
            [color] => Light Buff
            [3] => P1345C
            [colorno] => P1345C
            [4] => 150-31
            [screen] => 150-31
        )

    [1] => Array
        (
            [0] => AG/SN/18
            [Spec_Id] => AG/SN/18
            [1] => 750ML POCO PESCA ROTATION 1
            [Bot_Name] => 750ML POCO PESCA ROTATION 1
            [2] => Dark Buff
            [color] => Dark Buff
            [3] => P135C
            [colorno] => P135C
            [4] => 150-31
            [screen] => 150-31
        )

    [2] => Array
        (
            [0] => AG/SN/18
            [Spec_Id] => AG/SN/18
            [1] => 750ML POCO PESCA ROTATION 1
            [Bot_Name] => 750ML POCO PESCA ROTATION 1
            [2] => Red
            [color] => Red
            [3] => P Warm Red
            [colorno] => P Warm Red
            [4] => 150-31
            [screen] => 150-31
        )

)

Instead of showing the data vertically, it should be show the data horizontally. Please suggest me.Thanks in advance.

@hadiJZ.Thanks a lot, but that didnt worked for me. color,colorno and screen are three different columns of table. — user007
– user007, Commented Mar 27, 2016 at 9:38
Do you mean that you want to group the items by color for example? — Mosh Feu
– Mosh Feu, Commented Mar 27, 2016 at 9:47
@MoshFeu.Yes. Like this for eg..{{x.color}}. So,that They will show the data for that Spec_Id. — user007
– user007, Commented Mar 27, 2016 at 9:54

Michael · Accepted Answer · 2016-03-29 11:32:52Z

I would prepare the data for display in the controller and add it to a new array.

angular.module('app', [])
.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.data = [{
    'Spec_Id': 'AG/SN/18',
    'Bot_Name': '750ML POCO PESCA ROTATION 1',
    'color': 'Light Buff',
    'colorno': 'P1345C',
    'screen': '150-31'
  }, {
    'Spec_Id': 'AG/SN/18',
    'Bot_Name': '750ML POCO PESCA ROTATION 1',
    'color': 'Dark Buff',
    'colorno': 'P135C',
    'screen': '150-31'
  }, {
    'Spec_Id': 'AG/SN/18',
    'Bot_Name': '750ML POCO PESCA ROTATION 1',
    'color': 'Red',
    'colorno': 'P Warm Red',
    'screen': '150-31'
  }]
  var cleanData = function(){
    console.log("calling clean data");
    $scope.cleanData = [];
    var id = '';
    $scope.data = $filter('orderBy')($scope.data, 'Spec_Id', false);
    var cleanDataIndex = 0;
    for(var i = 0; i < $scope.data.length; i++){
      var obj = $scope.data[i];
      if(id !== obj.Spec_Id){
        id = obj.Spec_Id;
        obj.colorList = obj.color;
        obj.colornoList = obj.colorno;
        obj.screenList = obj.screen;
        $scope.cleanData.push(obj);
      }else{
        var newObj = $scope.cleanData[cleanDataIndex];
        newObj.colorList += ","+obj.color;
        newObj.colornoList += ","+obj.colorno;
        newObj.screenList += ","+obj.screen;
      }
    }
  }
  cleanData();
}]);

To display I would use the following.

<html ng-app='app' ng-controller='mainController'>
<body>
  <div class="container">
    <div class="jumbotron">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Spec Id</th>
            <th>Bot Name</th>
            <th>Color</th>
            <th>Color No</th>
            <th>Screen</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in cleanData">
            <td>{{row.Spec_Id}}</td>
            <td>{{row.Bot_Name}}</td>
            <td>{{row.colorList}}</td>
            <td>{{row.colornoList}}</td>
            <td>{{row.screenList}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

Collectives™ on Stack Overflow

How to show fetched data horizontally instead of Vertically using angular js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related