Tips for organizing data in an Angular table with a single row span for a specific property

Question

Tips for organizing data in an Angular table with a single row span for a specific property

Struggling to come up with a suitable title for this query.

The issue at hand: Imagine a table consisting of two columns - one for car brands and the other for car models. The desired layout is as follows:

as depicted in the image

In simpler terms, each brand name should only be displayed once.

The input array provided is in JSON format:

[{"brand":"Audi","model":"A1"}, 
{"brand":"Audi","model":"A2"}, 
{"brand":"Audi","model":"A3"}, 
{"brand":"BMW","model":"3 Series"}, 
{"brand":"BMW","model":"5 Series"}]

Unable to figure out how to achieve this using AngularJS.

javascript angularjs html-table

Answer 1

Answer №1

Check out this solution to showcase the data with the groupBy filter in a creative way.

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.cars = [{
    "brand": "Audi",
    "model": "A1"
  }, {
    "brand": "Audi",
    "model": "A2"
  }, {
    "brand": "Audi",
    "model": "A3"
  }, {
    "brand": "BMW",
    "model": "3 Series"
  }, {
    "brand": "BMW",
    "model": "5 Series"
  }];
 });

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController"> 
  <table>
    <tbody ng-repeat="(key, value) in cars | groupBy: 'brand'">
      <tr>
        <td rowspan="{{value.length}}">{{key}}</td>
        <td>{{value[0].model}}</td>
      </tr>
      <tr ng-repeat="car in value" ng-if="!$first">
        <td>{{car.model}}</td>
      </tr>    
    </tbody>
  </table>
</div>

Answer 2

Check out this solution to showcase the data with the groupBy filter in a creative way.

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.cars = [{
    "brand": "Audi",
    "model": "A1"
  }, {
    "brand": "Audi",
    "model": "A2"
  }, {
    "brand": "Audi",
    "model": "A3"
  }, {
    "brand": "BMW",
    "model": "3 Series"
  }, {
    "brand": "BMW",
    "model": "5 Series"
  }];
 });

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController"> 
  <table>
    <tbody ng-repeat="(key, value) in cars | groupBy: 'brand'">
      <tr>
        <td rowspan="{{value.length}}">{{key}}</td>
        <td>{{value[0].model}}</td>
      </tr>
      <tr ng-repeat="car in value" ng-if="!$first">
        <td>{{car.model}}</td>
      </tr>    
    </tbody>
  </table>
</div>

Answer 3

Answer №2

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.cars = [{
    "brand": "Audi",
    "model": "A1"
  }, {
    "brand": "Audi",
    "model": "A2"
  }, {
    "brand": "Audi",
    "model": "A3"
  }, {
    "brand": "BMW",
    "model": "3 Series"
  }, {
    "brand": "BMW",
    "model": "5 Series"
  }];
 });

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController"> 
  <table>
    <thead>
      <tr>
        <th>Brand</th>
        <th>Model</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key, value) in cars | groupBy: 'brand'">
      <tr>
        <td rowspan="{{value.length}}">{{key}}</td>
        <td>{{value[0].model}}</td>
      </tr>
      <tr ng-repeat="item in value" ng-if="!$first">
        <td>{{item.model}}</td>
      </tr>    
    </tbody>
  </table>
</div>

Answer 4

angular.module('app',['angular.filter'])
  .controller('MainController', function($scope) { 
    $scope.cars = [{
    "brand": "Audi",
    "model": "A1"
  }, {
    "brand": "Audi",
    "model": "A2"
  }, {
    "brand": "Audi",
    "model": "A3"
  }, {
    "brand": "BMW",
    "model": "3 Series"
  }, {
    "brand": "BMW",
    "model": "5 Series"
  }];
 });

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>

<div ng-app="app" ng-controller="MainController"> 
  <table>
    <thead>
      <tr>
        <th>Brand</th>
        <th>Model</th>
      </tr>
    </thead>
    <tbody ng-repeat="(key, value) in cars | groupBy: 'brand'">
      <tr>
        <td rowspan="{{value.length}}">{{key}}</td>
        <td>{{value[0].model}}</td>
      </tr>
      <tr ng-repeat="item in value" ng-if="!$first">
        <td>{{item.model}}</td>
      </tr>    
    </tbody>
  </table>
</div>

Answer 5

Answer №3

To group the data, you can use the following method.

var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope){
var values = [{"brand":"Audi","model":"A1"}, 
{"brand":"Audi","model":"A2"}, 
{"brand":"Audi","model":"A3"}, 
{"brand":"BMW","model":"3 Series"}, 
{"brand":"BMW","model":"5 Series"}];

var datass = {};
for (var i = 0; i < values.length; i++) {
  var brandName = values[i].brand;
  if (!datass[brandName]) {
    datass[brandName] = [];
  }
  datass[brandName].push(values[i].model);
}
var mynewArray = [];
for (var brandName in datass) {
  mynewArray.push({brand: brandName, model: datass[brandName]});
}
$scope.newData = mynewArray;

//console.log(mynewArray);

// --or--
var group_to_values = values.reduce(function(obj,item){
    obj[item.brand] = obj[item.brand] || [];
    obj[item.brand].push(item.model);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function(key){
    return {brand: key, model: group_to_values[key]};
});
//$scope.newData = groups;
//console.log(group_to_values);
//console.log(groups);

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>th,td,tr{border:1px solid}</style>
<body ng-app="exApp" ng-controller="ctrl">
<table>
<tr><th>car</th><th>model</th></tr>
<tr ng-repeat="new in newData">
<td>{{new.brand}}</td>
<td>
<table>
<tr ng-repeat="(key, value) in new.model track by $index"><td>{{value}}</td></tr></table>
</td>
</tr>
</table>
</body>

Answer 6

To group the data, you can use the following method.

var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope){
var values = [{"brand":"Audi","model":"A1"}, 
{"brand":"Audi","model":"A2"}, 
{"brand":"Audi","model":"A3"}, 
{"brand":"BMW","model":"3 Series"}, 
{"brand":"BMW","model":"5 Series"}];

var datass = {};
for (var i = 0; i < values.length; i++) {
  var brandName = values[i].brand;
  if (!datass[brandName]) {
    datass[brandName] = [];
  }
  datass[brandName].push(values[i].model);
}
var mynewArray = [];
for (var brandName in datass) {
  mynewArray.push({brand: brandName, model: datass[brandName]});
}
$scope.newData = mynewArray;

//console.log(mynewArray);

// --or--
var group_to_values = values.reduce(function(obj,item){
    obj[item.brand] = obj[item.brand] || [];
    obj[item.brand].push(item.model);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function(key){
    return {brand: key, model: group_to_values[key]};
});
//$scope.newData = groups;
//console.log(group_to_values);
//console.log(groups);

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>th,td,tr{border:1px solid}</style>
<body ng-app="exApp" ng-controller="ctrl">
<table>
<tr><th>car</th><th>model</th></tr>
<tr ng-repeat="new in newData">
<td>{{new.brand}}</td>
<td>
<table>
<tr ng-repeat="(key, value) in new.model track by $index"><td>{{value}}</td></tr></table>
</td>
</tr>
</table>
</body>

Tips for organizing data in an Angular table with a single row span for a specific property

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve the /api/auth/me resource serverside using the NextJS AppRouter?

Transferring information through Ajax to PHP

Determine the frequency of occurrences in an array where two elements are less than or equal to a specified sum - Using JavaScript

Ways to determine the presence of a value in an array

A step-by-step guide to implementing bubble sort for sorting a 2D array in JavaScript

Is it possible to set up a server with 'app' as the designated request handler?

Automate the detection of a connected device via USB on a NodeJS server

Difficulty in finding and retrieving array indexes that match a specific character pattern

Prevent the user from being redirected to the login page again after they have already logged in, even if they attempt to go back using the browser's back button

Executing a keystroke in Selenium Webdriver using JavaScript

using a comparison array as a parameter for the filter method in JavaScript

Utilize React JS to dynamically render JSON array of images onto a JSX page in React

The ng-repeat directive doesn't render any content on the page

Neglecting to Execute Success Function After Retrieving Data from PageMethods Using Multiple Parameters in C#

Showcasing a graphical representation with the help of Highcharts

dispatch email display Twitter Bootstrap notification utilizing Ajax

What is the best way to clear a MongoDB objectId field, set it to null, or ultimately remove it from a

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

Conceal the "Load More" button on the filter tabs, with the exception of the "

angular $stateprovider malfunctioning and causing unexpected behavior