Response code :
In this response eid is repeated, but I want to dispaly only once.
{"response": [
{
"sid": 1,
"eid": "AA",
"ename": "AA11"
},{
"sid": 2,
"eid": "AA",
"ename": "AA11"
}
],
"status": "success"
}
You could use the unique filter from AngularUI
<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
DEMO
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.data = {"response": [
{
"sid": 1,
"eid": "AA",
"ename": "AA11"
},{
"sid": 2,
"eid": "AA",
"ename": "AA11"
}
],
"status": "success"
};
});
</script>
</body>
</html>
There is no magic way. This task should primarily be completed before the response lands the client (on server).
What you can do is make a function which handles the response the way you prefer.
e.g.
//Removes duplicates of eid property
function getUniqueValues(input) {
var output = [];
function existsInOutput(element) {
return output.map(function(val) {
return val.eid
}).includes(element.eid)
};
angular.forEach(input,function(val, key) {
if (!existsInOutput(val)) {
output.push(val);
}
})
return output;
}
Related
I'm iterating over an array of objects and would like them sorted alphabetically by the 'ecuName' property. I don't understand why 'HVAC' is rendering before 'ABC'.
"ecuInfoList": [
{
"id": 4,
"ecuName": "ACC"
},
{
"id": 6,
"ecuName": "HVAC"
},
{
"id": 5,
"ecuName": "ABG"
}
]
Edit
Forgot to add the template code.
<div ng-repeat="ecu in config.ecuInfoList | orderBy:'ecuName' track by $index"><strong>{{ ecu.ecuName }}</strong>...
You might now access the array with ng-repeat properly. Check the working DEMO
DEMO
var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.data = { "ecuInfoList": [
{
"id": 4,
"ecuName": "ACC"
},
{
"id": 6,
"ecuName": "HVAC"
},
{
"id": 5,
"ecuName": "ABG"
}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="mydata in data.ecuInfoList | orderBy:'ecuName'">
{{mydata.ecuName}}
</div>
</body>
I have an Array and this array contains some Id's.
I would like to filter my result according to Id's.
For Example please see the below code snippet.
How can I show the records which 'StatusId' located in the 'ids' array?
According to my example, I want to list only:
AAA
BBB
CCC
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('ctrl', function ($scope) {
$scope.ids = [{
"id": 1
}, {
"id": 2
}, {
"id": 3
}]
$scope.records = [
{
"Name": "AAA",
"StatusId": 1
},
{
"Name": "BBB",
"StatusId": 1
},
{
"Name": "CCC",
"StatusId": 2
},
{
"Name": "DDD",
"StatusId": 4
},
{
"Name": "EEE",
"StatusId": 4
},
]
});
</script>
<body>
<div id="idctrl" ng-app="myApp" ng-controller="ctrl">
<ul>
<li ng-repeat="x in records">
{{ x.Name }}
</li>
</ul>
</div>
</body>
</html>
You can use the javascript 'filter' function:
records = $scope.records.filter((record) => {
return record.StatusId === 1
});
This will return a new array that only contains records with a StatusId of 1. You can these use this updated array to display your desired records.
I have a list of name's and id's. I have displayed it with ng-repeat property. I want to show the corresponding id's along with the name in 1 second on its click.
$scope.showFn = function() {
$scope.showPopup = true;
$timeout(function(){
console.log("timeout");
$scope.showPopup = false;
}, 1000);
};
I have created a plunker https://plnkr.co/edit/kvkgwp60Bxq2MrHrr5Rr?p=preview
Now showing all the id's in a single click. Please help. Thanks.
Try with below in HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="main">
<ul>
<li ng-repeat="item in items">
{{item.name}}
<span ng-show="showPopup && item.id == shownId">{{item.id}}</span>
</li>
</ul>
</body>
</html>
Controller will be like below:
var app = angular.module('app', [])
.controller('main', function($scope, $timeout) {
$scope.items = [{
"name": "one",
"id": "1"
}, {
"name": "two",
"id": "2"
}, {
"name": "three",
"id": "3"
}, {
"name": "four",
"id": "4"
}, {
"name": "five",
"id": "5"
}, {
"name": "six",
"id": "6"
}, {
"name": "seven",
"id": "7"
}]
$scope.showFn = function(Item) {
$scope.shownId = Item;
$scope.showPopup = true;
$timeout(function() {
console.log("timeout");
$scope.showPopup = false;
}, 1000);
};
});
I would like to update document in a JSON Collection using AngularJS
My JSON Collection:
$Scope.employee = {
"staff" :
[
{
"id" : 1,
"Name" : "John",
"email" : "john#abc.com"
},
{
"id" : 2,
"Name" : "Watson",
"email" : "watson#abc.com"
},
{
"id" : 3,
"Name" : "jack",
"email" : "jack#abc.com"
},
{
"id" : 4,
"Name" : "Jim",
"email" : "jim#abc.com"
},
{
"id" : 5,
"Name" : "Rose",
"email" : "rose#abc.com"
}
]
};
Now I need to update the document where Id = 2 to
$Scope.updateEmployee = {
"id" : 2,
"Name": "Emma",
"email": "emma#abc.com"
};
Kindly assist me how to replace a particular document and I would like to update the email of id = 5 to hr#abc.com
You can do this,
$scope.update = function(){
$scope.employee.staff.forEach(function (item) {
if (item.id == 2 ) {
item.Name = "Emma";
item.email ="emma#abc.com";
};
});
}
DEMO
$scope.updateItem = function(item) {
for (var i = 0; i < $cope.employee.staff.length; i++) {
if (item.id === $scope.employee.staff[i].id) {
$scope.employee.staff[i] = item;
break;
}
}
}
Now if you want to update $Scope.employee with id 5, just do :
$scope.updateItem({
id: 5,
Name: 'bill',
email: 'test#test.fr'
});
You can do it using underscore.js
Plunker
Basically, you should refrain from traversing your entire list because this can cause some performance related issues. What underscore.js will do is that it will return as soon as it finds an acceptable element, and doesn't traverse the entire list.
Read the official documentation here
find_.find(list, predicate, [context]) Alias: detect
Looks through each value in the list, returning the first one that passes a
truth test (predicate), or undefined if no value passes the test. The
function returns as soon as it finds an acceptable element, and
doesn't traverse the entire list.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.employee = {
"staff": [{
"id": 1,
"Name": "John",
"email": "john#abc.com"
}, {
"id": 2,
"Name": "Watson",
"email": "watson#abc.com"
}, {
"id": 3,
"Name": "jack",
"email": "jack#abc.com"
}, {
"id": 4,
"Name": "Jim",
"email": "jim#abc.com"
}, {
"id": 5,
"Name": "Rose",
"email": "rose#abc.com"
}]
};
$scope.update = function() {
var index = _.findIndex($scope.employee.staff, function(o) {
return o.id == 2;
})
$scope.employee.staff[index].Name = "Emma";
$scope.employee.staff[index].email = "emma#abc.com";
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('
<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="emp in employee.staff ">
<div>{{emp.id}} {{emp.Name}}</div>
</div>
<button ng-click="update()">
Update
</button>
</body>
</html>
I'm trying to populate a Select getting data from a webapi using ng-options.
Basically, my webapi returns the following JSON:
{
"items":[
{
"name":"X",
"id":1
},
{
"name":"Y",
"id":2
}
]
}
And I Need to generate options in a select displaying the name property, but with the id as value.
The problem is that I can't display my options using ng-options. Here's what I'm trying:
<html ng-app='app'>
<head>
<title>angular</title>
</head>
<body ng-controller='DemoCtrl'>
<select ng-model="selectedTestAccount" ng-options="option.name for option in testAccounts">
<option value="">Select Account</option>
</select>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script>
angular.module('app', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];
$http({
method: 'GET',
url: '/api/values',
data: {}
}).success(function (result) {
console.log(result);
$scope.testAccounts = JSON.parse(result.items);
});
});
</script>
</body>
</html>
I hope this helps you
angular.module("app", []);
angular.module("app").controller("ctrl", function($scope) {
$scope.testAccounts = [];
var youJson = [
{ "items": [{ "name": "X", "id": "your value for X" }, { "name": "Y", "id": "your value for Y" }] },
{ "items": [{ "name": "A", "id": "your value for A" }, { "name": "B", "id": "your value for B" }] }
];
angular.forEach(youJson, function(items) {
angular.forEach(items.items, function(item) {
$scope.testAccounts.push(item);
});
});
console.log($scope.testAccounts);
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<select ng-model="mySelect" ng-options="item.id as item.name for item in testAccounts"></select>
{{mySelect}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</body>
</html>