Skip to content

Instantly share code, notes, and snippets.

@georgesb

georgesb/index.html

Last active May 3, 2020 00:12
Show Gist options
  • Save georgesb/780b77a816b5ce78f654edb734e1cc04 to your computer and use it in GitHub Desktop.
Save georgesb/780b77a816b5ce78f654edb734e1cc04 to your computer and use it in GitHub Desktop.
Download ZIP
Read JSON AngularJS
Raw
index.html
<!DOCTYPE html>
<html>
<title>Solar System</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="script.js"></script>
<style> #moons {text-align:right;}</style>
<body ng-app="myApp" ng-controller="myCtrl" style="font-size:1.5em">
<center>
<h3>Solar System</h3>
<table>
<tr>
<th>Planets</th>
<th>Moons</th>
</tr>
<tr ng-repeat="item in myData">
<td>{{item.planet}}</td>
<td id="moons">{{item.moons}}</td>
</tr>
</table>
</center>
</body>
</html>
Raw
planets.json
{
"planets": [{
"planet": "Mercury",
"moons": 0
}, {
"planet": "Venus",
"moons": 0
}, {
"planet": "Earth",
"moons": 1
}, {
"planet": "Mars",
"moons": 2
}, {
"planet": "Jupiter",
"moons": 79
}, {
"planet": "Saturn",
"moons": 0
}, {
"planet": "Mercury",
"moons": 82
}, {
"planet": "Uranus",
"moons": 27
}, {
"planet": "Neptune",
"moons": 14
}, {
"planet": "Pluto",
"moons": 5
}
]
}
Raw
script.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('planets.json')
.then(function(response) {
$scope.myData = response.data.planets;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment