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)}}
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 have some json data related to timzone below i need to bind particular nested value into dropdown, in using angularjs, in timezone array its coming as string format i need to bind those into dropdown.
timezone.json --
{
"countries": {
"US": {
"id": "US",
"name": "United States",
"timezones": [
"America/New_York",
"America/Detroit",
]
},
"CA": {
"id": "CA",
"name": "Canada",
"timezones": [
"America/St_Johns",
"America/Halifax",
]
},
"IN": {
"id": "IN",
"name": "India",
"timezones": [
"Asia/Kolkata"
]
},
}
}
Script--
$http({
method: "GET",
url: 'timezon.json'
}).then(function mySuccess(response) {
$scope.timeZones = response.data;
}, function myError(response) {
$scope.timeZones = response.statusText;
});
HTML Content
<select class="form-control">
<option value="0">--Select Time Zones></option>
</select>
You can use the following to iterate through your object keys and populate your select.
<select class="form-control">
<option value="0">--Select Time Zones></option>
<option ng-repeat="(key, value) in data.countries" value="value.id">{{value.timezones.toString()}}</option>
</select>
Demo
First off manipulate data and then populate select
HTML
<div ng-app="app" ng-controller="Ctrl" ng-init="getTimeZones">
<h1>{{selectedTimezone}}</h1>
<select ng-model="selectedTimezone" ng-options="item for item in timezones">
</select>
</div>
JS
var app = angular.module("app", []);
app.controller('Ctrl', function($scope, $filter) {
$scope.timezones = []
$scope.data = {
"countries": {
"US": {
"id": "US",
"name": "United States",
"timezones": [
"America/New_York",
"America/Detroit",
]
},
"CA": {
"id": "CA",
"name": "Canada",
"timezones": [
"America/St_Johns",
"America/Halifax",
]
},
"IN": {
"id": "IN",
"name": "India",
"timezones": [
"Asia/Kolkata"
]
},
}
}
$scope.getTimeZones = setTimeout(function(){
// http request here after success
for (var key in $scope.data.countries) {
var timezones = $scope.data.countries[key].timezones;
timezones.unshift($scope.data.countries[key].name);
Array.prototype.push.apply($scope.timezones, timezones);
// For ES6
// $scope.timezones.push(...timezones)
}
}, 1000);
});
Demo
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>
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.
Here is my JSON file:
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
This is the angularjs code:
$scope.countryType = [
{ type: 'India', data:$scope.India, displayName:'India' },
{ type: 'China', data:$scope.China, displayName:'China'},
{ type: 'Ethiopia', data:$scope.Ethiopia, displayName:'Ethiopia'},
{ type: 'Cuba', data:$scope.Cuba, displayName:'Cuba'}
];
This angularjs code is fine for me but I don't know how to access name and rank from this data of countryType and I also want to filter it according to country.
For HTML page I am using this code :
<select ng-model="country.city" ng-options="country as country.type for country in countryType | orderBy: 'type'">
<option value=""> - Select a Country - </option>
</select>
<ul ng-repeat = "city in countryType | filter : country.city.data.cities.country ">
<li ng-repeat="details in city.data.cities">
<span> {{details.name}} </span>
<span> {{details.rank}}</span>
</li>
</ul>
Shall I have to use different code in html for accessing the data?
All the data is coming but I am not able to filter it.
So, basically you have two level of Arrays in your data structure. And that is why you need to do loop inside the country loop to access the cities.
A bit of change in your data structure, And here in an example for your reference:
HTML:
<div class="container">
<div ng-controller="FormController as formCtrl">
<table>
<tbody ng-repeat="country in formCtrl.contryType">
<tr>
<th colspan="2">{{country.country}}</th>
</tr>
<tr ng-repeat="city in country.cities">
<td>{{city.name}}</td>
<td>{{city.rank}}</td>
</tr>
</tbody>
</table>
</div>
</div>
JavaScript:
var app = angular.module("myApp", []);
app.controller("FormController", function () {
var ctrl = this;
ctrl.contryType = [{
"country" : "India",
"cities" : [{
"name" : "Bangalore",
"rank" : "40"
}, {
"name" : "Mumbai",
"rank" : "32"
}, {
"name" : "Kolkata",
"rank" : "54"
}, {
"name" : "Chennai",
"rank" : "42"
}
]
}, {
"country" : "China",
"cities" : [{
"name" : "Guangzhou",
"rank" : "111"
}, {
"name" : "Fuzhou",
"rank" : "21"
}, {
"name" : "Beijing",
"rank" : "90"
}, {
"name" : "Baotou",
"rank" : "23"
}
]
}
];
});
angular.bootstrap(document, ['myApp']);
Working Fiddle: http://jsfiddle.net/ashishanexpert/zvcx5z38/5/
You can not access object property by value as in $scope.India. You should be using a function to retrieve the cities of the given country.
$scope.getCityList = function(country)
{
var index = arrayObjectIndexOf($scope.countries, country, ["country"]);
return $scope.countries[index].cities;
}
function arrayObjectIndexOf(myArray, searchTerm, property) {
for(var i = 0, len = myArray.length; i < len; i++) {
var value = myArray[i];
for(var j=0; j<property.length; j++)
{
value = value[property[j]];
}
if (value === searchTerm) return i;
}
return -1;
}
So finally, the Angular JS code gets :
$scope.countryType = [
{ type: 'India', data:$scope.getCityList("India"), displayName:'India' },
{ type: 'China', data:$scope.getCityList("China"), displayName:'China'},
{ type: 'Ethiopia', data:$scope.getCityList("Ethiopia"), displayName:'Ethiopia'},
{ type: 'Cuba', data:$scope.getCityList("Cuba"), displayName:'Cuba'}
];
You can loop through the list JSON and store it in an array:
$scope.countryType = [];
angular.forEach(json.countries, function(data){
$scope.countryType.push({type: data.country, data: data});
});
Demo
Well you are accessing your data in a wrong way! Without changing your JS code you can use the following code, which just access the data objects slightly different (but right) way than you did:
<ul ng-repeat = "country in countryType">
<li ng-repeat="details in country.data.cities">
<span> {{details.name}} </span>
<span> {{details.rank}}</span>
</li>
</ul>
And everything should work.