Creating a table using Ng-repeat in AngularJS: A Step-by-Step Guide

Question

Creating a table using Ng-repeat in AngularJS: A Step-by-Step Guide

I'm trying to figure out how to create the table below using ng-repeat. Unfortunately, I don't have permission to modify the json structure so I need to work with it as is.

Here's my json:

$scope.carCollection = {
    'Toyota': [
        {
            'model': 'Corolla',
            'price': '20.000,00',
            'tag': ['a', 'b']
        },{
            'name': 'Hilux',
            'price': '31.000,00',
            'tag': ['b', 'c']
        }
    ],
    'Honda': [
        {
            'model': 'Civic',
            'price': '18.000,00',
            'tag': ['c']
        }
    ]
};

And here's the HTML table format I want to achieve:

<table>
    <tr>
        <td>Producer</td>
        <td>Model</td>
        <td>Price</td>
        <td>Tags</td>
    </tr>
    <tr>
        <td>Toyota</td>
        <td>Corolla</td>
        <td>20.000,00</td>
        <td>a b</td>
    </tr>
    <tr>
        <td>Toyota</td>
        <td>Hilux</td>
        <td>31.000,00</td>
        <td>b c</td>
    </tr>
    <tr>
        <td>Honda</td>
        <td>Civic</td>
        <td>18.000,00</td>
        <td>c</td>
    </tr>
</table>

Any help would be greatly appreciated! Thanks!!!

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

Check out the ng-repeat documentation here:

https://docs.angularjs.org/api/ng/directive/ngRepeat

$scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];

<div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

Answer 2

Check out the ng-repeat documentation here:

https://docs.angularjs.org/api/ng/directive/ngRepeat

$scope.friends =
          [{name:'John', phone:'555-1212', age:10},
           {name:'Mary', phone:'555-9876', age:19},
           {name:'Mike', phone:'555-4321', age:21},
           {name:'Adam', phone:'555-5678', age:35},
           {name:'Julie', phone:'555-8765', age:29}];

<div ng-controller="ExampleController">
  <table class="friend">
    <tr>
      <th>Name</th>
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    <tr ng-repeat="friend in friends">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

Answer 3

Answer №2

Before displaying your data in the view, you have the option to format it in your controller. The example below demonstrates the use of one-time bindings represented by ::.

One-time binding prevents the expression from being recalculated once it stabilizes, thereby enhancing page loading speed by reducing the number of watchers.

Controller

(function(){

function Controller($scope) {

  $scope.carCollection = {
      'Toyota': [
          {
              'model': 'Corolla',
              'price': '20.000,00',
              'tag': ['a', 'b']
          },{
              'model': 'Hilux',
              'price': '31.000,00',
              'tag': ['b', 'c']
          }
      ],
      'Honda': [
          {
              'model': 'Civic',
              'price': '18.000,00',
              'tag': ['c']
          }
      ]
  };

  //Function to format data
  function format(data){
    //Return a flatten array
    return [].concat.apply([], Object.keys(data).map(function(key){
      //Map our data object
      return data[key].map(function(elm){
        //Add brand property with the current key
        elm.brand = key;
        //Join tag array value  
        elm.tag = elm.tag.join(' ');
        return elm;
      });
    }));
  }

  //Call format function
  $scope.carCollection = format($scope.carCollection);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

In the end, you will have a flat array that can be easily iterated over.

HTML

<body ng-app='app' ng-controller='ctrl'>

  <table>
    <tr>
        <td>Producer</td>
        <td>Model</td>
        <td>Price</td>
        <td>Tags</td>
    </tr>
    <tr ng-repeat="item in ::carCollection">
      <td>{{::item.brand}}</td>
      <td>{{::item.model}}</td>
      <td>{{::item.price}}</td>
      <td>{{::item.tag}}</td>
    </tr>
  </table>

</body>

Visit the Working Plunker to see this code in action.

Answer 4

Before displaying your data in the view, you have the option to format it in your controller. The example below demonstrates the use of one-time bindings represented by ::.

One-time binding prevents the expression from being recalculated once it stabilizes, thereby enhancing page loading speed by reducing the number of watchers.

Controller

(function(){

function Controller($scope) {

  $scope.carCollection = {
      'Toyota': [
          {
              'model': 'Corolla',
              'price': '20.000,00',
              'tag': ['a', 'b']
          },{
              'model': 'Hilux',
              'price': '31.000,00',
              'tag': ['b', 'c']
          }
      ],
      'Honda': [
          {
              'model': 'Civic',
              'price': '18.000,00',
              'tag': ['c']
          }
      ]
  };

  //Function to format data
  function format(data){
    //Return a flatten array
    return [].concat.apply([], Object.keys(data).map(function(key){
      //Map our data object
      return data[key].map(function(elm){
        //Add brand property with the current key
        elm.brand = key;
        //Join tag array value  
        elm.tag = elm.tag.join(' ');
        return elm;
      });
    }));
  }

  //Call format function
  $scope.carCollection = format($scope.carCollection);

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

In the end, you will have a flat array that can be easily iterated over.

HTML

<body ng-app='app' ng-controller='ctrl'>

  <table>
    <tr>
        <td>Producer</td>
        <td>Model</td>
        <td>Price</td>
        <td>Tags</td>
    </tr>
    <tr ng-repeat="item in ::carCollection">
      <td>{{::item.brand}}</td>
      <td>{{::item.model}}</td>
      <td>{{::item.price}}</td>
      <td>{{::item.tag}}</td>
    </tr>
  </table>

</body>

Visit the Working Plunker to see this code in action.

Creating a table using Ng-repeat in AngularJS: A Step-by-Step Guide

Answer №1

Answer №2

Similar questions

AngularJS service functionality fails to execute in straightforward app

issue with accessing instant state modification via useEffect

What causes the React Query cache to be cleared upon page reload?

JavaScript's Ajax request seems to be stagnant and inactive

Creating a clickable button within an image container using Bootstrap 5

I am encountering challenges with React.js implemented in Typescript

What is the best way to set an array as the value for a state variable?

Using Cucumber for testing javascript-loaded content can be incredibly powerful and effective in ensuring the functionality

What is the best way to utilize an Angular service method from a controller?

Organizing information in local storage using an array and converting it to a string

Obtaining events from the calendar in Ionic's AngularJS UI based on the selected month

Is there a way to make JavaScript function properly with PHP-generated content?

The Google Maps API has been successfully initialized, however, it is experiencing difficulties being displayed on the webpage

Utilizing the map function to modify the attributes of objects within an array

Restricting the number of lines within a paragraph in Angular 2

Dealing with asynchronous requests in server-side node applications

Is it possible to invoke this JavaScript function like this?

Utilizing NodeJS to initiate an http request and interact with a hyperlink

The function named updateContact is not defined, even though it has been declared

A guide to implementing v-for with intervals in Quasar carousel components