Rendering table by using angularjs

Question

I have a json array like below

[
{"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Barcelona (VS) Manchester City","score":"4-0"},
{"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Bayern Munchen (VS) PSV Eindhoven","score":"4-1"},
{"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Feyenoord (VS) Zorya Luhansk","score":"1-0"},
{"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Manchester United (VS) Fenerbahce","score":"4-1"},
{"league_id":"1980","league_name":"England - Premier League","event_name":"Liverpool (VS) Manchester United","score":"0-0"},
{"league_id":"1980","league_name":"England - Premier League","event_name":"Bournemouth AFC (VS) Tottenham Hotspur","score":"0-0"}
]

I want to render this json as table like below by using angularjs ng-repeat

<table>
	<tr>
		<th>Event</th>
		<th>Score</th>
	</tr>
	<tr>
		<td colspan="2">UEFA - Champions League</td>
	</tr>
	<tr>
		<td>Barcelona (VS) Manchester City</td>
		<td>4-0</td>
	</tr>
	<tr>
		<td>Bayern Munchen (VS) PSV Eindhoven</td>
		<td>4-1</td>
	</tr>
	<tr>
		<td colspan="2">UEFA - Europa League</td>
	</tr>
	<tr>
		<td>Feyenoord (VS) Zorya Luhansk</td>
		<td>1-0</td>
	</tr>
	<tr>
		<td>Manchester United (VS) Fenerbahce</td>
		<td>4-1</td>
	</tr>
	<tr>
		<td colspan="2">England - Premier League</td>
	</tr>
	<tr>
		<td>Liverpool (VS) Manchester United</td>
		<td>0-0</td>
	</tr>
	<tr>
		<td>Bournemouth AFC (VS) Tottenham Hotspur</td>
		<td>0-0</td>
	</tr>
</table>

Sreekanth · Accepted Answer · 2016-10-23 06:35:17Z

You could simply do this.

var app = angular.module("sampleApp", []);

app.controller("sampleController", [
  "$scope",
  function($scope) {
    var data = [{
      "league_id": "2627",
      "league_name": "UEFA - Champions League",
      "event_name": "Barcelona (VS) Manchester City",
      "score": "4-0"
    }, {
      "league_id": "2627",
      "league_name": "UEFA - Champions League",
      "event_name": "Bayern Munchen (VS) PSV Eindhoven",
      "score": "4-1"
    }, {
      "league_id": "2630",
      "league_name": "UEFA - Europa League",
      "event_name": "Feyenoord (VS) Zorya Luhansk",
      "score": "1-0"
    }, {
      "league_id": "2630",
      "league_name": "UEFA - Europa League",
      "event_name": "Manchester United (VS) Fenerbahce",
      "score": "4-1"
    }, {
      "league_id": "1980",
      "league_name": "England - Premier League",
      "event_name": "Liverpool (VS) Manchester United",
      "score": "0-0"
    }, {
      "league_id": "1980",
      "league_name": "England - Premier League",
      "event_name": "Bournemouth AFC (VS) Tottenham Hotspur",
      "score": "0-0"
    }];

    var leagues = {};
    data.forEach(function(obj) {
      var leagueName = obj.league_name;
      if (leagues[leagueName] === undefined) {
        leagues[leagueName] = [];
      }
      leagues[leagueName].push(obj);
    });

    $scope.leagues = leagues;
  }
]);

th {
  text-align: left;
}
table,
td,
th {
  border: 1px solid #adadad;
}
td[colspan] {
  background: #676767;
  color: white;
}
td:nth-child(2) {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table>
      <thead>
        <tr>
          <th>Event</th>
          <th>Score</th>
        </tr>
      </thead>
      <tbody ng-repeat="(key, value) in leagues">
        <tr>
          <td colspan="2">
            {{key}}
          </td>
        </tr>
        <tr ng-repeat="rowData in value">
          <td>{{rowData.event_name}}
          </td>

          <td>{{rowData.score}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Spencer Wieczorek · Accepted Answer · 2016-10-23 06:15:47Z

0

One way to do this is to simply show the league name on every other item in ng-repeat by restricting shown items with ng-if:

Note: Another way to do this without relaying on the order of the array items is to filter the array itself and have only "league_name" as a unique array item and add the events as arrays instead instead.

var app = angular.module('app',[])

.controller('myController', ['$scope', function($scope){
  $scope.array = [
  {"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Barcelona (VS) Manchester City","score":"4-0"},
  {"league_id":"2627","league_name":"UEFA - Champions League","event_name":"Bayern Munchen (VS) PSV Eindhoven","score":"4-1"},
  {"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Feyenoord (VS) Zorya Luhansk","score":"1-0"},
  {"league_id":"2630","league_name":"UEFA - Europa League","event_name":"Manchester United (VS) Fenerbahce","score":"4-1"},
  {"league_id":"1980","league_name":"England - Premier League","event_name":"Liverpool (VS) Manchester United","score":"0-0"},
  {"league_id":"1980","league_name":"England - Premier League","event_name":"Bournemouth AFC (VS) Tottenham Hotspur","score":"0-0"}
  ];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="myController">
    <table ng-repeat="item in array">
      <tr ng-if="$index == 0"> <!-- Headers only on first iteration -->
        <th>Event</th>
        <th>Score</th>
      </tr>
      <tr ng-if="$index % 2 == 0"> <!-- League name only on every other iteration-->
        <td colspan="2">{{item.league_name}}</td>
      </tr>
      <tr>
        <td>{{item.event_name}}</td>
        <td>{{item.score}}</td>
      </tr>
    </table>
  </div>
</body>

edited Oct 23, 2016 at 6:15

answered Oct 23, 2016 at 6:01

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

4 Comments

Mike Over a year ago

Hi, First two leagues are repeated in table bro.

Mike Over a year ago

If it have more than two events, i will be wrong bro.

Mike Over a year ago

If it have more than two events, it will be wrong bro.

Spencer Wieczorek Over a year ago

What do you mean? This is the exact same output that you wanted. If the output in your question is wrong then you need to edit it to clearify.

Collectives™ on Stack Overflow

Rendering table by using angularjs

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related