handling arrays in ng-repeat - angularjs

I have a table and I need to display values in table from my JSON response. But I am unable to fetch the datas inside array.somewhere I am missing something.
JSON:
var jobs = [
{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},
{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}
]
HTML:
<tr ng-repeat ="item in jobs">
<td>{{item.jobs.title}}</td>
<td>{{item.jobs.description}}</td>
</tr>

You need to use $scope:
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Hope it helps =)

There are two issues,
(i)You need to use $scope variable
(ii)You need to access item.title not item.jobs.title inside ng-repeat
You should access item
<tr ng-repeat="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
DEMO

The jobs array needs to be in $scope.
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>

Keep these things in mind while playing with ng-repeat :
You have to use $scope.jobs object instead of var jobs as an array declaration in the controller which you are going to pass in ng-repeat for binding.
When you are going to iterate the array inside ng-repeat="item in jobs" no need to use again jobs to access the property of the objects(item) of an array(jobs).
Working Demo :
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.jobs = [
{
"id":1,
"title":"Need comedian",
"company":"AMS",
"description":"Need comedian"
},
{
"id":2,
"title":"Need Actor",
"company":"ERS",
"description":"Actor for Romantic Movie"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
</table>
</div>

Related

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
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>

How i can bind json data in html table using angular js?

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>

Why isn't ng-repeat working here?

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.

AngularJS non-ascii property name support

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/

ng-repeat value is not visible inside nested tag

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>

Resources