I am trying to add new column dynamically in the table. I have below object which is returned in response from web service api. How can I display dynamic columns where myArray object is getting appended with many other fields (new columns)
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
I have tried looking into the example provided in some of the answers in google. In my below JSFIDDLE, I am getting only the key name but not the values. How can I achieve both key and value using ng-repeat where the key names are dynamic.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArray[0].contacts">
<td ng-repeat="(key, val) in row.contact">{{ val }}</td>
</tr>
</table>
Related
hi i am new to angularjs and i have been trying to do a table but for some reason it dose not work for me
and even the example from w3schoos dose not work for me but it works on their site
here is a link to their code : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple
and this is the error i get when i run it on vs on a page named index.html :index.html:10: function "x" not defined
and this is my code
<!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="customersCtrl">
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ prodcut.Price }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
</body>
</html>
and the error : panic: template: index.html:10: function "product" not defined
i send to it a json file that looks like this :
{
"products": [
{
"id": 1,
"title": "שוקו",
"Price": "20",
"Quantity": 10
},
{
"id": 2,
"title": "חלב",
"Price": "30",
"Quantity": 20
},
{
"id": 3,
"title": "מילקי",
"Price": "40",
"Quantity": 30
},
{
"id": 4,
"title": "קפה",
"Price": "50",
"Quantity": 60
},
{
"id": 5,
"title": "שוקולד",
"Price": "40",
"Quantity": 50
},
{
"id": 6,
"title": "קולה",
"Price": "40",
"Quantity": 50
},
{
"id": 7,
"title": "טרופית",
"Price": "5",
"Quantity": 100
}
],
"title": "מוצרים"
}
replace
product.Price
with
products.Price
The issue is with your async api call. The products are undefined in the beginning and html template is trying to access it before its get updated by api call response.
Initialise the products array with empty array
Change your code here
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.products = []; // added this
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
here is the codepen link i create for you. Please note i am using a dummy api call for demo.
if you want to try with simple object then remove api call and assign the object you want. like this
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.products = [
{
"id": 1,
"title": "שוקו",
"Price": "20",
"Quantity": 10
},
{
"id": 2,
"title": "חלב",
"Price": "30",
"Quantity": 20
},
{
"id": 3,
"title": "מילקי",
"Price": "40",
"Quantity": 30
},
{
"id": 4,
"title": "קפה",
"Price": "50",
"Quantity": 60
},
{
"id": 5,
"title": "שוקולד",
"Price": "40",
"Quantity": 50
},
{
"id": 6,
"title": "קולה",
"Price": "40",
"Quantity": 50
},
{
"id": 7,
"title": "טרופית",
"Price": "5",
"Quantity": 100
}
]
});
</script>
also correct the typo
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ product.Price }}</td> // it was prodcut.
</tr>
</table>
The reason why the product is undefined is because you are not casting out the value or the data that you are getting back into an array or a JSON format for ng-repeat to read.
change the following:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
To the following
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response)
{
$scope.products = response.products;});
//log the input data in console to see if you actually are receiving data.
console.log(response);
});
</script>
And then you can call the defined values in your table like you did before:
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ prodcut.Price }}</td>
</tr>
</table>
I want to output two tables, each sourcing information from two separate arrays within the same JSON source, but for some reason my code doesn't work.
JSON Message:
{
"Policies": [
{
"name": "A",
"id": "1",
"score": "0"
}
],
"Services": [
{
"name": "B",
"id": "2",
"score": "0"
}
]
}
HTML Code:
<table id="policies-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
<table id="services-table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Score</th>
</tr>
</thead>
</table>
JavaScript Code:
var the_url = "www.example.com"
var columnsDef = [
{ data : "name" },
{ data : "id" },
{ data : "score" }
];
$(document).ready(function() {
$('#policies-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Policies"
},
columns : columnsDef
}),
$('#services-table').DataTable({
ajax : {
url : the_url,
dataSrc: "Services"
},
columns : columnsDef
})
});
You are not iterating through your JSON variable. As prabodhprakash suggested, writing "Policies" and "Services" won't help either.
I suggest you to take a look at this fiddle
You can initialize multiple datatables with the same syntax that you use for initializing a single one:
var json = {
"Policies": [{
"name": "A",
"id": "1",
"score": "0"
}],
"Services": [{
"name": "B",
"id": "2",
"score": "0"
}]
}
var policyTable = $("#policies-table").DataTable({
"data" : (json.Policies),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
var serviceTable = $("#services-table").DataTable({
"data" :(json.Services),
"columns": [
{ "data": "name" },
{ "data": "id" },
{ "data": "score" }]
});
I have 2 linked JSON object array .
Example :
Country :
[{
"countryCode":"IN",
"countryName":"India",
"currencyCode":"INR"
},
{
"countryCode":"US",
"countryName":"United States",
"currencyCode":"USD"
}]
Currency :
[{
"code":"INR",
"name":"Indian Rupee",
"locale":"kok_IN",
"display":1
}, {
"code":"USD",
"name":"US Dollar",
"locale":"en_US_POSIX",
"display":1
}]
The above two json obejcts are linked with a code .
I'm trying display the Currencyname from the currency object by linking the currencycode .
I am displaying like bellow :
<tr ng-repeat="country in countries | filter : query | orderBy : 'name'">
<td>{{ country.countryName }}</td>
<td>{{ }}</td> <!-- Currency name here -->
</tr>
How do I display the currency name here ?
Works for me with function getCurrencyByCountry:
angular.module("App", []).controller("AppController", function($scope) {
$scope.countries = [{
"countryCode": "IN",
"countryName": "India",
"currencyCode": "INR"
}, {
"countryCode": "US",
"countryName": "United States",
"currencyCode": "USD"
}];
$scope.currency = [{
"code": "INR",
"name": "Indian Rupee",
"locale": "kok_IN",
"display": 1
}, {
"code": "USD",
"name": "US Dollar",
"locale": "en_US_POSIX",
"display": 1
}];
$scope.getCurrencyByCountry = function(country){
var currency = "";
angular.forEach($scope.currency, function(value, key) {
if(country.currencyCode == value.code){
currency = value.name;
return false;
}
});
return currency;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="App" ng-controller="AppController">
<tr ng-repeat="country in countries |orderBy : 'name'">
<td>{{country.countryName}}</td>
<td>{{getCurrencyByCountry(country)}}</td>
<!-- Currency name here -->
</tr>
<table>
I would implement in a controller function
$scope.currencies = [{
"code": "INR",
"name": "Indian Rupee",
"locale": "kok_IN",
"display": 1
}, {
"code": "USD",
"name": "US Dollar",
"locale": "en_US_POSIX",
"display": 1
}];
$scope.getCurrency(code) {
return $scope.currencies.find(c => c.code === code).name;
}
(Let me know if you need this in ES5 instead)
Then you can use
{{getCurrency(country.code)}}
I am trying to convert data present in an HTML table into JSON link. I'm getting undefined values in object.
HTML code:
<table colspan="2" border="1">
<tr>
<th>Source</th>
<th>Destination</th
</tr>
<tr ng-repeat="col in MapCol">
<td>
<select ng-model="col.value" ng-init="col.value=MainData.headers[$index].header">
<option ng-selected="{{head.header == col.value}}" ng-repeat="head in MainData.headers">{{head.header}}
</option>
</select>
</td>
<td>{{col.ColName}}</td>
</tr>
</table>
<br/>
<button ng-click="map();">Map</button>
Controller code:
var app = angular.module("ShrTest", []);
app.controller("Test1", function ($scope) {
$scope.MainData = { "name": "1-06082015185338.txt", "headers": [{ "header": "Name" }, { "header": "Age" }, { "header": "Address" }], "records": [{ "Name": "Paul", "Age": "23", "Address": "1115 W Franklin" }, { "Name": "Bessy the Cow", "Age": "5", "Address": "Big Farm Way" }, { "Name": "Zeke", "Age": "45", "Address": "W Main St" }] };
$scope.MapCol = [{ "ColName": "Col1" }, { "ColName": "Col2" }, { "ColName": "Col3" }];
$scope.map=function(){
$scope.fields=[{"source":$scope.value,"destination":$scope.ColName}];
console.log(" $scope.fields..", $scope.fields);
}
});
JS
$scope.map=function(){
$scope.fields = [];
for(i in $scope.MapCol){
var obj = $scope.MapCol[i]; $scope.fields.push({"source":obj.value,"destination":obj.ColName})
}
console.log($scope.fields);
}
Here is Modified fiddle:
Demo Here
I hope this will help you.
I have created an application in angularjs with ngTable, The application is working fine but sorting is not working. My json structured is nested, but values are coming correctly with the table
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
html
<div ng-controller="IndexCtrl">
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in peoples">
<tr ng-repeat="people in peop">
<td sortable="'id'" data-title="'Id'">{{people.id}}</td>
<td sortable="'desig'" data-title="'Desig'">{{people.desig}}</td>
<td sortable="'name'" data-title="'Name'">{{people.name}}</td>
<td sortable="'place'" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
</div>
script
var app = angular.module('app', ['ngTable']);
app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
$scope.peoples = {
"ime123": [{"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD"
}],
"ime148": [{"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK"
},
{
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE"
}]
};
$scope.mytable = new ngTableParams({
sorting: {
name: 'desc'
}
}, {
getData: function($defer, params) {
$scope.peoples = $filter('orderBy')( $scope.peoples, params.orderBy());
$defer.resolve( $scope.peoples);
}
});
});
The way you work with nested array in ngtable is not suitable ,in your case you can make array one dim again and allow directive to groupping
html
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in $groups">
<tr ng-repeat="people in peop.data">
<td sortable="id" data-title="'Id'">{{people.id}}</td>
<td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
<td sortable="name" data-title="'Name'">{{people.name}}</td>
<td sortable="place" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
contoller
$scope.mytable = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'desc'
}
}, {
total: peoples.length,
groupBy:'group',
getData: function ($defer, params) {
peoples = $filter('orderBy')(peoples, params.orderBy());
$defer.resolve(peoples);
}
});
data
var peoples = [{
"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD",
"group": "ime123" //for grouping
}, {
"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK",
"group": "ime148" //for grouping
}, {
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE",
"group": "ime148" //for grouping
}];
here almost working jsfiddle.
default desc not working yet (ver 0.3.1)