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>
Related
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>
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>
I have data in my json it will be dynamic and I want to display the data in a table with two columns. I am trying but only the first two records are repeating. I don't see all the records in the table.. Any help?
http://plnkr.co/edit/Hnb7hkjA16XDbzRT8VAt?p=preview
This is my json : var data = '{
"output":{
"service-status":[
{
"service":"db",
"service-name":"Mongo DB"
},
{
"service":"license",
"service-name":"Smart License"
},
{
"service":"BRM",
"service-name":"Billing"
},
{
"service":"subscription",
"service-name":"subscription"
}
]
}
}';
my html code:
<table border="1px" width="100%" ng-repeat="data in serviceData" ng-if="$index % 2 == 0">
<tr>
<td>{{serviceData[index]["service-name"]}}</td>
</tr>
</table>
i want to display something like this
Mongo Db Smart License
Billing subscription
Transform your data in the controller:
var serviceDataView = function() {
var res = [];
for (var i = 0; i < $scope.serviceData.length; i+=2){
res.push({
col1: $scope.serviceData[i]['service-name'],
col2: $scope.serviceData[i+1] ? $scope.serviceData[i+1]['service-name'] : null
});
}
return res;
};
$scope.structuredData = serviceDataView();
So that it can be easily used in the view:
<table border="1px" width="100%">
<tr ng-repeat="data in structuredData">
<td>{{data.col1}}</td>
<td>{{data.col2}}</td>
</tr>
</table>
Plunker.
The iterator that uses ng-repeat is $index.
Others Iterator: https://docs.angularjs.org/api/ng/directive/ngRepeat
Replace your table for:
<table border="1px" width="100%" ng-repeat="data in serviceData">
<tr>
<td>{{serviceData[$index]["service"]}}</td>
<td>{{serviceData[$index]["service-name"]}}</td>
</tr>
</table>
As per my review, $index is not required at all for this issue. You can use filter for table ngRepeat.check this [link]http://plnkr.co/edit/Hnb7hkjA16XDbzRT8VAt?p=preview
html code here:
<table border="1px" width="100%" ng-repeat="data in serviceData |limitTo:2 ">
<tr>
<td>{{data["service-name"]}}</td>
<td>{{data.service}}</td>
</tr>
I am trying to access a the data in a json object using angular but i finding it difficult to this at the moment and hopefully you can help me here.
so i have a function in my controller like this:
var vm = this;
vm.getData = getData;
vm.data = [];
function getData() {
var promise = appService.getAll(vm.query);
promise.then(function(response) {
vm.data = response.data,
console.log(vm.data);
},
function(error) {
$log.error("an error here", error);
});
}
and my view goes something like this:
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
Everything works .. i retrieve my json object as required .. but its just accessing them is where i am having in issue as the above context in my view is not dispplayed ..
so in my example above i am trying to acess a json with the heaser of "sectionName" and displaying it in my view.
here is a visual of of the json object in my console ...
Thank you for your time
If results is the data you need to display, then you should adjust your markup to be this:
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
You are looping over the object itself. Instead, you have to loop over the results array inside the object.
<div>
<table class="table">
<tr >
<th> Department</th>
</tr >
<tr ng-repeat="n in vm.data.results">
<td>{{n.sectionName}} </td>
</tr>
</table>
</div>
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>