I've been working on fetching data from a Json API and displaying it on user event. However, I'm facing an issue where the div disappears whenever I apply the ng-repeat property to it. Despite searching through various tutorials and documentation, I haven't been able to find a solution. Please assist me. Thank you.
My HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="icon" type="image/png" href="images/logo.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Football News</title>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<!--AngularJs CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="Css/home.css">
</head>
<body>
<div class="container" ng-controller="homeController as home" ng-init="home.loadAllMatches()">
<div class="mainContent">
<div class="header">
<span>Primier League</span>
</div>
<div class="content">
<div class="matchList" ng-repeat="round in home.rounds">
<div class="matchListContent" ng-repeat=" match in round.matches">
<span>{{ match.name }}</span>
</div>
</div>
</div>
</div>
</div>
<script src="angular/Controller/mainController.js"></script>
</body>
</html>
My JS:
var footballApp = angular.module('myApp', []);
footballApp.controller('homeController',['$http', function($http){
var self = this;
this.matches = [];
console.log(this.matches);
this.baseUrl = "https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json";
this.loadAllMatches = function(){
$http({
method: 'GET',
url: self.baseUrl
}).then(function successCallback(response){
self.matches = response.data.rounds;
console.log(self.matches);
}, function errorCallback(response) {
alert("Some error ocurred. Check Console");
console.log(response);
});
}
}]);``
You can view the JSON API by clicking on this Link: EPL