Show the second value based on the first one in Angularjs - javascript

I have a list on ng-repeat with names. I want to take this name and pass to url as parameter to take his subjects. What i have done until now is that i can pass the name and get the subjects from another API. But the problem is that the last name replaces all the dropdowns with his values:
<ul ng-repeat="person in persons">
<li ng-init="pass(person.name)">{{person.name}}</li>
<li>
<select>
<option ng-repeat="(key, value) in choices">{{value}}</option>
</select>
</li>
</ul>
Controller.js
$scope.person = {
[
{
"id": 1,
"name": "Mark"
},
{
"id": 2,
"name": "Jakob"
}
]
}
$scope.pass = function(name) {
$scope.name = name;
$http.get('url?name=' + $scope.name, {})
.then(function(response) {
$scope.choices = response.data;
},
function(errResponse) {
console.error('Error while fetching choices');
});
}
Note: There is a get method to pass the person.name at the end of the URL.
How can it be isolated to pass from HTML to controller.
Thanks

Make your controller code like:
$scope.persons = [{
"id": 1,
"name": "Mark"
},
{
"id": 2,
"name": "Jakob"
}
];
$scope.pass = function(person) {
$scope.name = person.name;
$http.get('url?name=' + $scope.name, {}).then(function(response) {
person.choices = response.data;
},
function(errResponse) {
console.error('Error while fetching choices');
});
}
And your html like:
<ul ng-repeat="person in persons">
<li ng-init="pass(person)">{{person.name}}</li>
<li><select>
<option ng-repeat="(key, value) in person.choices">{{value}}</option>
</select></li>
</ul>
Here's a sample fiddle: https://jsfiddle.net/Lt7aP/4019/

Related

ngRepeat iterate with array objects in angularjs

I'm trying to figure out on how to iterate the array using ngrepeat
If I have a array of data like below
{
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
}
In Controller, I have these code snippets.
app.controller('mainController', function($scope, $http) {
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
catch(function onError(response) {
console.log(response);
});
});
And, I wanted to iterate the array and display the three name in list.
<ul class="nav">
<li ng-repeat="obj.peoples track by $index">
{{obj.name}}
</li>
</ul>
But, I cannot able to get the names, any idea on this?
FYI - I'm using Angular 1.6.5 version here.
Plunkr Code here
You need to fix your HTML code.
Instead of ng-repeat="obj.peoples track by $index" it should be ng-repeat="obj in peoples.People track by $index"
See below demo.
angular.module('app', [])
.controller('mainController', function($scope, $http) {
// mocked, equivalente to `$scope.peoples = response.data`
$scope.peoples = {
"People": [{
"name": "Andrew Amernante",
"rating": 3,
},
{
"name": "Frank Wang",
"rating": 5,
},
{
"name": "Chang Wang",
"rating": 5,
}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainController'>
<ul class="nav">
<li ng-repeat="obj in peoples.People track by $index">
{{obj.name}}
</li>
</ul>
</div>
it is peoples in your script.js and you are using obj in html
$http.get('people.json').
then(function onSuccess(response) {
console.log(response);
$scope.peoples = response.data;
}).
change your html to the below code,
<li class="active" ng-repeat="item in peoples.People">
{{item.name}}<span class="glyphicon glyphicon-play"></span>
</li>
Two things, in javscript
$scope.peoples = response.data.People;
and in ng-repeat it should be
ng-repeat="people in peoples track by $index"

Hide Empty Filtered ng-repeat

I am looking to hide a category if it it empty. My current solution is not working:
HTML:
<ul>
<li data-ng-repeat="items in shop | unique : 'cat' | orderBy: 'cat'">
<h2>{{items.cat}}</h2>
<ul>
<li ng-repeat="items in shop | filter:{cat: items.cat} | filter:query"
<h3>{{items.name}}</h3>
</li>
</ul>
</li>
</ul>
My Filter "unique" looks like so:
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
JSON:
{
"businesses" : {
"-KQ1ggyrnYGYL1084Htz" : {
"name" : "business name",
"cat" : "food",
},
}
I assume that I could do something with ng-if and/or ng-hide/show but none of the combos I have done work.
You can use the ngIf directive or the ngShow/ngHide directives.
How you use them depends on your JSON.
Heres an example of the ngIf with some basic data:
(function() {
angular.module('MyApp', []);
})();
(function() {
angular.module('MyApp').controller('MyController', MyController);
MyController.$inject = ['$scope'];
function MyController($scope) {
$scope.shop = [{
name: "test 1",
cat: "cat 1"
}, {
name: "test 2",
cat: "cat 3"
}, {
name: "test 3",
cat: ""
}, {
name: "test 4",
cat: "cat 4"
}];
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="MyApp">
<div data-ng-controller="MyController">
<ul>
<li data-ng-repeat="items in shop | orderBy: 'cat'" ng-if="items.cat">
<h2>{{items.cat}}</h2>
<ul>
<li ng-repeat="items in shop | filter:{cat: items.cat}">
<h3>{{items.name}}</h3>
</li>
</ul>
</li>
</ul>
</div>
</div>

How to get back an array of objects which have a particular value using filters in AngularJS?

var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.

AngularJS ng-repeat for dynamic child json array

I'm having a dynamic JSON, which contains the list of name, it also contains the children names as a subset. How can I show it in the HTML UI using angularJS ng-repeat
The Sample Dynamic JSON is
$scope.family = [
{
"name":"Siva",
"child":[
{
"name":"Suriya"
},
{
"name":"Karthick"
}
]
},
{
"name":"Kumar",
"child":[
{
"name":"Rajini"
},
{
"name":"Kamal"
},
{
"name":"Ajith"
}
]
},
{
"name":"Samer"
},
{
"name":"Mahesh"
}
];
<div ng-repeat="members in family">
<!-- How to Show it in the UI -->
</div>
Note: The JSON is generated based on Request. The Child array is
Optional and it may contain the length 'n'
You can better your answer by adding an ng-if directive, as the child is optional. Of course, it won't make any impact to you app, but it is a good way to code.
Plus, instead of adding ng-repeat on ul, it should be in li. It makes no sense in looping the ul for a single list.
Please refer the sample here.
HTML:
<div ng-app="app" ng-controller="test">
<ul ng-repeat="member in family">
<li>
{{member.name}}
<span ng-if="member.child.length > 0">
<ul>
<li ng-repeat="c in member.child">{{c.name}}</li>
</ul>
</span>
</li>
</ul>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.family = [
{
"name": "Siva",
"child": [
{
"name": "Suriya"
},
{
"name": "Karthick"
}
]
},
{
"name": "Kumar",
"child": [
{
"name": "Rajini"
},
{
"name": "Kamal"
},
{
"name": "Ajith"
}
]
},
{
"name": "Samer"
},
{
"name": "Mahesh"
}
];
});
The Corrected answer
<ul ng-repeat="member in family">
<li>{{member.name}}
<ul>
<li ng-bind="c.name" ng-repeat="c in member.child"></li>
</ul>
</li>
</ul>

Insert dynamically a JSON items using Angular JS and Ionic

I have been struggling on how to insert JSON items into a dynamic list :
I have a json file which look like :
[
{
"id":"34",
"City":"New York",
"Country":"USA"
},
{
"id":"22",
"City":"Las vegas",
"Country":"USA"
},
{
"id":"44",
"City":"Paris",
"Country":"France"
},
{
"id":"45",
"City":"Lyon",
"Country":"France"
}
]
I want to show it like that :
Here is my code :
<div ng-controller="customersCtrl">
<div class="list">
<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}
</div>
<a class="item" href="#" ng-repeat="ci in cities" ng-if="c.Country == ci.Country"> {{ ci.City }} </a>
</div>
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get('data.json')
.then(function(result){
$scope.cities = result.data;
});
});
it's showing like that :
The easiest way to do this is pre-process the data to show the inherent structure of your data. Then you can use nested repeaters.
angular.module('cityModule', []).
controller('CityController', ['$scope',
function($scope) {
var rawData = [{
"id": "34",
"City": "New York",
"Country": "USA"
}, {
"id": "22",
"City": "Las vegas",
"Country": "USA"
}, {
"id": "44",
"City": "Paris",
"Country": "France"
}, {
"id": "45",
"City": "Lyon",
"Country": "France"
}];
$scope.citiesByCountry = {};
for (var i = 0; i < rawData.length; i++) {
var city = rawData[i];
if ($scope.citiesByCountry[city.Country] == undefined) {
$scope.citiesByCountry[city.Country] = {};
$scope.citiesByCountry[city.Country].name = city.Country;
$scope.citiesByCountry[city.Country].cities = [];
}
$scope.citiesByCountry[city.Country].cities.push(city);
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="cityModule">
<div ng-controller="CityController">
<div ng-repeat="(countryName, country) in citiesByCountry">
<h1>{{country.name}}</h1>
<div ng-repeat="city in country.cities">
{{city.City}}
</div>
</div>
</div>
</body>
This is due to the first loop, there are 4 items in the list and there is not any logic to stop the list from repeating on countries which have already been written.
Issue
<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}
Create a filter to loop over unique Countries (this may involve creating a new list of unique countries).
Unique Filter
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
<div ng-repeat="c in cities | unique: 'Country'"></div>

Categories