CODEWITHSUNDEEP
angularjs
user9286969
user9286969

Reputation:

How can i make dynamic ng-repeat using angularjs?

Below I have added my data 

[{
"name":"testapp",
"version":"2.0",
"description":"testapp",
"applicationenvironment":"angularjs"

}]

I want to make ng-repeat but I don't want to hard code any field (name, version, description, applicationenvironment)
How can I achieve this?

MY expectation :

IN TABLE it should come like this

enter image description here

Upvotes: 0

Views: 80

Answers (4)

Harshith Rai
Harshith Rai

Reputation: 3066

You need to loop twice: Once through each the entire array of objects to access each object, and then inside each object to access individual key-value pairs.

I have posted the code below:

angular.module('app', [])
.controller('Controller1', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

<div ng-app="app" ng-controller="Controller1 as c1">
    <table>

    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>

    <tr ng-repeat="c in c1.data">
       <table>
         <tr ng-repeat="(key, value) in c">
         <td> {{ key }} </td>
         <td> {{ value }} </td>
         </tr>
       </table>
    </tr>
    </table>
</div>

Upvotes: -1

Espen
Espen

Reputation: 2576

Now since your data source is an array, you need to do two nested ng-repeats

let app = angular.module("table",[]);
    app.controller("tableCtrl", ["$scope", function($scope){

    $scope.data = [{
    "name":"testapp",
    "version":"2.0",
    "description":"testapp",
    "applicationenvironment":"angularjs"
    },
    {
    "name":"testapp 2",
    "version":"2.1",
    "description":"testapp 2",
    "applicationenvironment":"angularjs"
    }];
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="table" ng-controller="tableCtrl">
    <table ng-repeat="row in data">
     <tr><td>Key</td><td>Value</td></tr>
     <tr ng-repeat="(key,value) in row">
       <td>{{key}}</td><td>{{value}}</td>
     </tr>
    </table>
    </div>

Now if you do this, your data structure should yield the wanted result

Upvotes: 0

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

Your array should be an object. So your structure simplifies quite a lot. Just extract key and values from your object and loop over it for each row. Then display key and values in separate columns per row:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.table = [{
    "name": "testapp",
    "version": "2.0",
    "description": "testapp",
    "applicationenvironment": "angularjs"
  }]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table>

      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>

      <tr ng-repeat="(key, value) in table[0]">
        <td>{{key}}</td>
        <td>{{value}}</td>
      </tr>

    </table>
  </div>
</body>
</html>

Upvotes: 1

Luiz Carlos
Luiz Carlos

Reputation: 246

Although I don't recommend you to have this strucuture, you can do something like this:

angular.module('app', [])
.controller('appController', function () {
    this.data = {
        "name":"testapp",
        "version":"2.0",
        "description":"testapp",
        "applicationenvironment":"angularjs"
    };
});

And your HTML would be something like this:

<div ng-app="app" ng-controller="appController as vm">
    <ul>
         <li ng-repeat="(key, value) in vm.data"> {{ key }} : {{ value }}</li>
    </ul>
</div>

If you still need to have the data inside an array as you've wrote in the question, you would have to iterate over both the array and the object.

Upvotes: 1

Related Questions