Angular ng-repeat not rendering data correctly

Question

I was trying to make a table from json structure but not getting it to render properly.

Output is not shown properly for the first two cells; Partial is empty and it is filling the only last one. Please refer below image

controller.js

.controller('wController', function($scope, $http) {
  console.log('i m in ctrl 3');
  $http({
    method: "GET",
    url: "http://custom.url.ch:3021/routepath",
    headers: {
      'Authorization': 'Basic Ydaeq2FwaQw1='
    }
    // headers : {"Authorization": "Basic " + auth}
  }).then(function(response) {
    console.log("yoyo", JSON.stringify(response));
    $scope.data = response.data;
  }, function(response) {
    console.log("oaapop" + JSON.stringify(response));
  });
});

// index.html

<div class="table-responsive" ng-controller="woController">
    <table class="table table-condensed" border="1">
      <thead>
        <tr>
          <th>Sites</th>
          <th ng-repeat="worstData in data">
            <center>{{$index+1}}</center>
          </th>
          <!-- <th><center>2</center></th> -->
          <!-- <th><center>3</center></th> -->
          <!-- <th><center>4</center></th> -->
          <!-- <th><center>5</center></th> -->
        </tr>
      </thead>
      <!-- <tbody> -->

      <tbody>
        <tr>
          <td> PartialSite</td>
          <td ng-repeat="worstData in data">{{$index}} {{[worstData[0][$index].PartialSite]}}</td>
        </tr>
        <tr>
          <td>FailSite</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
        <tr>
          <td> Jobs mn</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
        <tr>
          <td>Largest Points</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
      </tbody>
    </table>
  </div>

// JSON structure to make table structure

{
  "data": {
    "statusCode": 200,
    "message": "Getting Data",
    "data": [
      [{
        "PartialSite": "LRS",
        "Partial": 2
      }, {
        "PartialSite": "Sooking",
        "Partial": 1
      }, {
        "PartialSite": "Late",
        "Partial": 1
      }],
      [{
        "FailSite": "Sotelia",
        "fail": 2
      }, {
        "FailSite": "Pccor",
        "fail": 1
      }, {
        "FailSite": "PccroHotels",
        "fail": 0
      }],
      [{
        "ExecSite": "Sotelia",
        "time": 240
      }, {
        "ExecSite": "Late",
        "time": 240
      }, {
        "ExecSite": "Pccor",
        "time": 120
      }],
      [{
        "DataSite": "LRS",
        "totalDP": 16
      }, {
        "DataSite": "Sooking",
        "totalDP": 14
      }, {
        "DataSite": "Pccor",
        "totalDP": 12
      }]
    ]
  },
  "status": 200,
  "config": {
    "method": "GET",
    "transformRequest": [null],
    "transformResponse": [null],
    "url": "http://custom.url.ch:3021/routepath",
    "headers": {
      "Authorization": "Basic Ydaeq2FwaQw1=",
      "Accept": "application/json, text/plain, */*"
    }
  },
  "statusText": "OK"
}

can you add this code in jsfiddle?

Ramesh Rajendran
– Ramesh Rajendran

2017-01-06 04:49:02 +00:00
Commented Jan 6, 2017 at 4:49 — Ramesh Rajendran
– Ramesh Rajendran, Commented Jan 6, 2017 at 4:49

ChiefTwoPencils · Accepted Answer · 2017-01-06 06:28:55Z

2

Is this what you are looking for - https://plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview

     <body data-ng-controller="sampleCtrl as ctrl">    
         <table    class="table table-condensed" border ="1" >
             <thead >
                <tr>
                   <th>Sites</th>
                   <th ng-repeat="worstData in ctrl.data"><center>{{$index+1}}</center></th>
                   <!-- <th><center>2</center></th> -->
                   <!-- <th><center>3</center></th> -->
                   <!-- <th><center>4</center></th> -->
                   <!-- <th><center>5</center></th> -->
                </tr>
              </thead>
               <!-- <tbody> -->
                <tbody >
                <tr >
                   <td > PartialSite</td>
                   <td ng-repeat="worstData in ctrl.data[0]">{{$index}} {{worstData.PartialSite}}</td>
                </tr>
                <tr>
                   <td>FailSite</td>
                    <td ng-repeat="worstData in ctrl.data[1]">{{$index}} {{worstData.FailSite}}</td>
                </tr>
                <tr>
                   <td> Jobs mn</td>
                   <td ng-repeat="worstData in ctrl.data[2]">{{$index}} {{worstData.time}}</td>
                </tr>
                <tr>
                   <td>Largest Points</td>
                   <td ng-repeat="worstData in ctrl.data[3]">{{$index}} {{worstData.totalDP}}</td>
                </tr>
             </tbody>
          </table>
      </body>

edited Jan 6, 2017 at 6:28

ChiefTwoPencils

14k8 gold badges55 silver badges80 bronze badges

answered Jan 6, 2017 at 4:57

Developer

6,4703 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

raj Over a year ago

yes and thank you for making it more clear to others

Developer Over a year ago

@Creator - Glad I helped...if you feel this answered your question, then probably you want to mark this as answer

raj Over a year ago

1) I have seen your code carefully, I am using $scope in controller and it is not giving results . Can you make controller by using $scope variable. 2) The 4th column is added at the end I don't know why it is happening ? We are very close please help

Developer Over a year ago

@Creator - check the updated plunk to use $scope - plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview. The 4rth column is according to your logic. What exactly do you like to see?

Developer Over a year ago

@Creator - I think I got what you are looking for; check the updated code - plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview

|

raj · Accepted Answer · 2017-01-06 06:24:56Z

Answer is already got by some contributor named @Developer. I am just sharing the right code with you to fix this type of problem.

//index.html

 <table    class="table table-condensed" border ="1" >
                 <thead >
                    <tr>
                       <th>Sites</th>
                       <th ng-repeat="worstData in getHeaders(data[0].length) track by $index"><center>{{$index+1}}</center></th>
                       <!-- <th><center>2</center></th> -->
                       <!-- <th><center>3</center></th> -->
                       <!-- <th><center>4</center></th> -->
                       <!-- <th><center>5</center></th> -->
                    </tr>
                  </thead>
                   <!-- <tbody> -->

                    <tbody >
                    <tr >
                       <td > PartialSite</td>

                       <td ng-repeat="worstData in data[0]">{{$index}} {{worstData.PartialSite}}</td>


                    </tr>
                    <tr>
                       <td>FailSite</td>
                        <td ng-repeat="worstData in data[1]">{{$index}} {{worstData.FailSite}}</td>
                    </tr>
                    <tr>
                       <td> Jobs mn</td>
                       <td ng-repeat="worstData in data[2]">{{$index}} {{worstData.time}}</td>
                    </tr>
                    <tr>
                       <td>Largest Points</td>
                       <td ng-repeat="worstData in data[3]">{{$index}} {{worstData.totalDP}}</td>
                    </tr>


                 </tbody>
              </table>

//script.js

angular.module("app", [])
  .controller("sampleCtrl", function($scope) {

    //var _this = this;
    $scope.data = [
      [{
        "PartialSite": "LRS",
        "Partial": 2
      }, {
        "PartialSite": "Sooking",
        "Partial": 1
      }, {
        "PartialSite": "Late",
        "Partial": 1
      }],
      [{
        "FailSite": "Sotelia",
        "fail": 2
      }, {
        "FailSite": "Pccor",
        "fail": 1
      }, {
        "FailSite": "PccroHotels",
        "fail": 0
      }],
      [{
        "ExecSite": "Sotelia",
        "time": 240
      }, {
        "ExecSite": "Late",
        "time": 240
      }, {
        "ExecSite": "Pccor",
        "time": 120
      }],
      [{
        "DataSite": "LRS",
        "totalDP": 16
      }, {
        "DataSite": "Sooking",
        "totalDP": 14
      }, {
        "DataSite": "Pccor",
        "totalDP": 12
      }]
    ];

    $scope.getHeaders = function(index) {
      return new Array(index);
    };

  });

Collectives™ on Stack Overflow

Angular ng-repeat not rendering data correctly

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related