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
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>
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.
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
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>
Here is my json data. How I can bind this data in HTML table using angular.js?
[{"keycolumn1":1,"originkey1":1,"datafield1":1},
{"keycolumn1":2,"originkey1":2,"datafield1":2},
{"keycolumn1":3,"originkey1":3,"datafield1":3},
{"keycolumn1":4,"originkey1":4,"datafield1":4},
{"keycolumn1":5,"originkey1":5,"datafield1":5},
{"keycolumn1":11,"originkey1":11,"datafield1":11},
{"keycolumn1":12,"originkey1":12,"datafield1":12},
{"keycolumn1":13,"originkey1":13,"datafield1":13},
{"keycolumn1":14,"originkey1":14,"datafield1":14},
{"keycolumn1":15,"originkey1":15,"datafield1":15}]
There are many ways to display the json data in angular,
you can bind your json as
ng-repeat
<tr ng-repeat="values in data">
nested ng-repeat depending on the json format
ng-repeat with 'track by' while dealing with index values
<tr ng-repeat="item in rows">
<td>{{item.project}}({{item.task}})</td>
<td ng-repeat="values in item.hour track by $index">
<input type="number" ng-model="item.hour[$index]"/>
</td>
</tr>
ng-repeat with key value pairs
<tr ng-repeat="(key, value) in data">
<td> {{key}} </td> <td> {{ value }} </td>
</tr>
In your case, best option is to use basic ng-repeat as
<tr ng-repeat="values in data">
<td>{{values.keycolumn1}}</td>
<td>{{values.originkey1}}</td>
<td>{{values.datafield1}}</td>
</tr>
Just try like this,
var appReminder = angular.module('testApp', []);
appReminder.factory('testFactory', function ($http) {
return {}
});
appReminder.controller('testController', function PostController($scope, testFactory, $timeout)
{
$scope.result_function = function ()
{
$scope.respose = [
{"keycolumn1":1,"originkey1":1,"datafield1":1},
{"keycolumn1":2,"originkey1":2,"datafield1":2},
{"keycolumn1":3,"originkey1":3,"datafield1":3},
{"keycolumn1":4,"originkey1":4,"datafield1":4},
{"keycolumn1":5,"originkey1":5,"datafield1":5},
{"keycolumn1":11,"originkey1":11,"datafield1":11},
{"keycolumn1":12,"originkey1":12,"datafield1":12},
{"keycolumn1":13,"originkey1":13,"datafield1":13},
{"keycolumn1":14,"originkey1":14,"datafield1":14},
{"keycolumn1":15,"originkey1":15,"datafield1":15}];
;}
$scope.result_function();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" data-ng-controller="testController">
<table border="1">
<tr>
<th>Keycolumn</th>
<th>Originkey</th>
<th>Datafield</th>
<tr>
<tr ng-repeat="item in respose">
<td>{{item.keycolumn1}}</td>
<td>{{item.originkey1}}</td>
<td>{{item.datafield1}}</td>
</tr>
</table>
</div>
Do you mean to display the json content in a html table?
$scope.json = [
{"keycolumn1":1,"originkey1":1,"datafield1":1},
{"keycolumn1":2,"originkey1":2,"datafield1":2},
{"keycolumn1":3,"originkey1":3,"datafield1":3},
{"keycolumn1":4,"originkey1":4,"datafield1":4},
{"keycolumn1":5,"originkey1":5,"datafield1":5},
{"keycolumn1":11,"originkey1":11,"datafield1":11},
{"keycolumn1":12,"originkey1":12,"datafield1":12},
{"keycolumn1":13,"originkey1":13,"datafield1":13},
{"keycolumn1":14,"originkey1":14,"datafield1":14},
{"keycolumn1":15,"originkey1":15,"datafield1":15}];
in html you can use ng-repeat
<table>
<tr ng-repeat="r in json">
<td>{{r.keycolumn1}}</td>
<td>{{r.originkey1}}</td>
<td>{{r.datafield1}}</td>
</tr>
</table>
Store this in a json file (data.json). Use $http to get this data as a response and store it in a $scope variable.
For Example:
$http.get("data.json").then(function(response) {
$scope.data = response.data;
});
you need to assign your json to a scope variable like below
$scope.data="your data";
now using this data you can loop in table by using ng-repeat
here is a sample plunker with your data
Simple using ng-repeat by having your json Data in your controller
<table>
<tr ng-repeat="r in jsonData">
<td>{{r.keycolumn1}}</td>
<td>{{r.originkey1}}</td>
<td>{{r.datafield1}}</td>
</tr>
</table>
Also you can have it in your Json file like this
{
"data":[
{
"keycolumn1":1,
"originkey1":1,
"datafield1":1
},
{
"keycolumn1":2,
"originkey1":2,
"datafield1":2
},
{
"keycolumn1":3,
"originkey1":3,
"datafield1":3
},
{
"keycolumn1":4,
"originkey1":4,
"datafield1":4
},
{
"keycolumn1":5,
"originkey1":5,
"datafield1":5
},
{
"keycolumn1":11,
"originkey1":11,
"datafield1":11
},
{
"keycolumn1":12,
"originkey1":12,
"datafield1":12
},
{
"keycolumn1":13,
"originkey1":13,
"datafield1":13
},
{
"keycolumn1":14,
"originkey1":14,
"datafield1":14
},
{
"keycolumn1":15,
"originkey1":15,
"datafield1":15
}
]
}
and use it in your controller like this
$http.get('jsonData.json').success(function(data) {
$scope.jsonFileData = data.data;
});
and I have made a working LIVE PLUNK which contains both examples
First you need to associate controller with view then you can access variables of controller in view.
<div ng-controller="controllername as vm">
<table>
<tr ng-repeat="anyvariable in vm.json">
<td>{{anyvariable.keycolumn1}}</td>
<td>{{anyvariable.originkey1}}</td>
<td>{{anyvariable.datafield1}}</td>
</tr>
</table>
</div>
I have an array within my scope called checkedInChildren. The array contains just string values. I want a table to repeat for each string in the checkedInChildren array. Here is what I have so far:
<div ng-app="MyApp" ng-controller="myCtrl">
<div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="child in checkedInChildren">
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my controller:
app.controller("myCtrl", function($scope, $http) {
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function(childName) {
$scope.checkedInChildren.push(childName);
}
});
No rows show no matter what names I add to that array. I omitted some code in the controller and some of the HTML, but I am debugging and clearly seeing values in the array. Any ideas?
You have to add {{child}} to bind each item to the view.
<tr ng-repeat="child in checkedInChildren">
<td>
{{child}}
</td>
</tr>
on your HTML you're referencing a different controller, put the proper name
<div ng-app="MyApp" ng-controller="checkInCtrl">...</div>
Demo
Working Plnkr
It is not displaying test because there is no item in your checkedInChildren array.
From Angular Doc:
The ngRepeat directive instantiates a template once per item from a
collection.
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function (childName) {
$scope.checkedInChildren.push(childName);
}
$scope.addChildToCheckedIn('John');
You did not call addChildToCheckedIn method, that is why checkedInChildren array is empty.
hope that solve your problem.
Did you call the addChildToCheckedIn function? Try this. Hope this helps.
I don't know how to use non-ascii property name in AngularJS. I could print a value by using a['property_name'] instead of a.property_name, but I couldn't use the same way in 'orderBy'. If I click on 'name', sorting would happen, but if I click on '가격_price', nothing would happen and an error would show up in the console. How could I sort a table which has non-ascii name?
(There are Korean Characters in the code, but I think it makes sense.)
http://jsfiddle.net/k9h32mh9/
<div ng-app>
<div ng-controller="ListCtrl">
<table>
<tr>
<th><a ng-click="predicate='name'; reverse=false">name</a></th>
<th><a ng-click="predicate='가격_price'; reverse=false">가격(price)</a></th>
</tr>
<tr ng-repeat="item in items | orderBy:predicate:reverse">
<td>{{item.name}}</td>
<td>{{item['가격_price']}}</td>
</tr>
</table>
</div>
</div>
<script>
function ListCtrl($scope, $http) {
$scope.predicate = '-name';
$scope.items = [{name: "a", 가격_price:"1000"},
{name: "b", 가격_price:"2000"},
{name: "c", 가격_price:"1500"}];
}
</script>
While this is an issue with Angular, as per https://github.com/angular/angular.js/issues/2174, it can be worked around by specifying your own predicate function on the scope in order to access the property to sort by:
$scope.predicateProperty = 'name';
$scope.predicate = function(a) {
return a[$scope.predicateProperty];
};
And the HTML can be almost identical, just setting predicateProperty to the property name that you want to sort by (I've also removed references to "reverse" as it slightly complicates the issue)
<table>
<tr>
<th><a ng-click="predicateProperty='name';">name</a></th>
<th><a ng-click="predicateProperty='가격_price';">가격(price)</a></th>
</tr>
<tr ng-repeat="item in items | orderBy:predicate">
<td>{{item.name}}</td>
<td>{{item['가격_price']}}</td>
</tr>
</table>
You can see this working at http://jsfiddle.net/k9h32mh9/5/
I am new to angularjs and trying to work with ng-repeat but somehow ng-repeat's key/value is not visible if I am trying to print it in nested tags
working:
<div>
<table>
<tr ng-repeat="prop in array">
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
And below code is not working:-
<div ng-repeat="prop in array">
<table>
<tr>
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
Updated:
var $app = angular.module('apps', ['ngSanitize']);
$app.controller('cntr', ['$scope', function($scope) {
$scope.guestList = [{
dob: '12/12/12'
}];
}]);
For html to show properly in angular js you have to 'sanitize' it, using the $sce provider from AngularJS. Read here: https://docs.angularjs.org/api/ng/service/$sce
In principle, before you bind your variable to html output, you have to sanitize it like this:
$scope.guest.sanitizedInput = $sce.trustAsHtml($scope.guest.res_addr1);
and html:
<td class="table-column-value res-addr1-value"><span ng-bind-html="guest.sanitizedInput"></span>