How to display an array of objects on the html page when using angularjs?

Question

I have a json file which i will be fetching using $http service. The sample json is added. I am saving the json to angularjs scope variable. How to display the dat in html.

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>English Premier League</title> </head> <body ng-controller="mainController"> <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand" href="index.html">Premier League</a> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Page Header --> <!-- Set your background image for this header on the line below. --> <header class="intro-header" style="background-image: url('img/soccer-bg.jpg')"> </header> <div ng-repeat="blog in array"> <ul class "nav nav-pills"> <li><a href ng-click ="tab"={{$index+1}}>{{blog.matches}}</a></li> </ul> </div> </body> </html>

JSON file->

{"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}

IN the output whole array is displaying.Below is the app.js file

app.js

var myApp = angular.module('blogApp', []); myApp.controller('mainController',['$http','$scope',function($http,$scope) { $http.get('https://xxxxx.json').success(function(data){ $scope.array=data; console.log(data); console.log($scope.array); }); }]);

Please put some effort into making your question legible. See the help center for formatting help, and How to Ask for how to ask a good question. — Heretic Monkey, CommentedMar 3, 2018 at 17:28

Nishanth · Accepted Answer · 2018-03-03 18:11:47Z

This is how you need to be displaying in html page.

Instead of getting the json over http request i have hardcoded the value and made the following example.

Hope it helps

<!DOCTYPE html> <html> <head> <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <script> (function() { angular.module("blogApp", []).controller('mainController', ['$http', '$scope', function($http, $scope) { $scope.array = {"name":"English Premier League 2015/16","rounds":[{"name":"Play-Off um 1 Premierleague-Platz:","matches":[{"date":"2015-08-08","team1":{"key":"manutd","name":"Manchester United","code":"MUN"},"team2":{"key":"tottenham","name":"Tottenham Hotspur","code":"TOT"},"score1":1,"score2":0},{"date":"2015-08-08","team1":{"key":"bournemouth","name":"Bournemouth","code":"BOU"},"team2":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"score1":0,"score2":1}]},{"name":"Matchday 2","matches":[{"date":"2015-08-14","team1":{"key":"astonvilla","name":"Aston Villa","code":"AVL"},"team2":{"key":"manutd","name":"Manchester United","code":"MUN"},"score1":0,"score2":1},{"date":"2015-08-15","team1":{"key":"southampton","name":"Southampton","code":"SOU"},"team2":{"key":"everton","name":"Everton","code":"EVE"},"score1":0,"score2":3}]}]}; }]); }()); </script> <style></style> </head> <body ng-app="blogApp"> <div ng-controller="mainController"> <div> <h1>Test: {{array.name}}</h1> <div ng-repeat="round in array.rounds"> <h3>Round: {{round.name}}</h3> <table class="table"> <tr> <th>Date</th> <th>Team 1</th> <th>Team 2</th> <th>Score 1</th> <th>Score 2</th> </tr> <tr ng-repeat="match in round.matches"> <td>{{ match.date | date}}</td> <td>{{ match.team1.name }}</td> <td>{{ match.team2.name }}</td> <td>{{ match.score1 }}</td> <td>{{ match.score2 }}</td> </tr> </table> </div> </div> </div> </body> </html>

That worked I made it work using $http request. Thank you ... Thanks for your help..!!!! — Roger Santiago, CommentedMar 3, 2018 at 18:16
Please vote or accept my answer. Link to help you vote or accept — Nishanth, CommentedMar 3, 2018 at 18:25

Collectives™ on Stack Overflow

How to display an array of objects on the html page when using angularjs?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related