Search code examples
phpangularjsjsonp

JSONP & Angular Adding Extra Empty data


Everything is working fine however i'm getting an extra 5 lines of empty data when there is no other data:

Example:

Sat, Apr 25 2015 Madison Square Garden, New York, New York, USA
Wladimir Klitschko 63 vs Bryant Jennings 19
vs
vs
vs
vs
vs
Sat, May 09 2015 Minute Maid Park, Houston, Texas, USA
James Kirkland 32 vs Saul Alvarez 44
vs
vs
vs
vs
vs

My JS:

function WidgetCtrl($scope, $http) {
$scope.items = [];
$http.jsonp("http:/domain.com/schedule?callback=JSON_CALLBACK").success(function(data) 
{
    $scope.items = data;
}).error(function(data, status, headers, config) {
    $scope.status = status;
});
}

index.html

<div id="widget-content" ng-controller="WidgetCtrl">      
<div ng-repeat="item in items">
{{item.searchdate}} {{item.event_place}}
<div class="widget-list">
<div ng-repeat="name in item">
{{name.boxer1_name}} {{name.boxer1_w}} vs {{name.boxer2_name}}                {{name.boxer2_w}}
</div>         
</div>
</div>
</div>

JSON:

[  
  {  
    "event_id":"1821",
    "searchdate":"Sat, Apr 25 2015",
    "event_place":"Madison Square Garden, New York, New York, USA",
    "networks":"TV: HBO Boxing",
    "time":"Time: 9pm Et",
    "0":{  
      "match_id":"5068",
      "match_name":"Heavyweight",
      "mainevent":"main",
      "body":"",
      "boxer1_id":"7",
      "boxer1_name":"Wladimir Klitschko",
      "boxer1_w":"63",
      "boxer1_l":"3",
      "boxer1_d":"0",
      "boxer1_ko":"53",
      "boxer2_id":"2780",
      "boxer2_name":"Bryant Jennings",
      "boxer2_w":"19",
      "boxer2_l":"0",
      "boxer2_d":"0",
      "boxer2_ko":"10"
    }
  },
  {  
    "event_id":"1853",
    "searchdate":"Sat, May 09 2015",
    "event_place":"Minute Maid Park, Houston, Texas, USA",
    "networks":"TV: HBO",
    "time":"Time: 9pm ET",
    "0":{  
      "match_id":"5127",
      "match_name":"super welterweight",
      "mainevent":"main",
      "body":"",
      "boxer1_id":"233",
      "boxer1_name":"James Kirkland",
      "boxer1_w":"32",
      "boxer1_l":"1",
      "boxer1_d":"0",
      "boxer1_ko":"28",
      "boxer2_id":"1336",
      "boxer2_name":"Saul Alvarez",
      "boxer2_w":"44",
      "boxer2_l":"1",
      "boxer2_d":"1",
      "boxer2_ko":"31"
    }
  }
]

Solution

  • I believe the problem is "name in item" in your second ng-repeat. It is simply going through the 6 pieces of data (event_id, searchdate, etc.) and the only one that it find boxer data in is the item called "0". Based on your data you should use

          <ng-repeat="name in item.0">
    

    because your boxer data is contained in item.o not in item.