I have the following json example:
posts: [
{
title: Post Title,
- cat: [
- {
name: "Category Name",
}
],
I am able to get the title in Angular using {{post.title}}
However when I try to get {{post.cat.name}} its not working and its returning "0"
That's because cat is an array. You should handle it like that.
{{posts.cat[0].name}} if you want the first element in that array.
Usually for arrays you'll use ng-repeat though:
<span ng-repeat="cat in posts.cat">{{cat.name}}</span>
try this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.posts=[
{
title: "Post Title",
cat: [
{
name: "Category Name",
}
]
},
{
title: "Post Title2",
cat: [
{
name: "Category Name2",
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr ng-repeat="p in posts" >
<td >{{p.title}}</td>
<td >{{p.cat[0].name}}</td>
</tr>
</table>
</div>
cat is an array, so to get the name of the first object in that array, you would have to use:
{{post.cat[0].name}}
Related
I have been searching for hours how I can translate the values of an object array with the module ngx-translate,
Here is an extract of my code but I don’t know how to implement the json file
Template HTML :
<div class="sort-header-container">
<table matSort class="mat-sort">
<tr *ngFor="let item of items" class="row">
<td class="row">{{item.critere}}</td>
<td>{{item.res}}</td>
</tr>
</table>
</div>
The object array in the service :
items: any[] = [
{ critere: "Code-modèle", res: "Mizuno Shadow 4" },
{ critere: "Code Libellé", res: "KR32" },
{ critere: "Stock", res: 10 },
{ critere: "Prix TTC", res: "Bleu" },
{ critere: "Couleur", res: 42 },
{ critere: "Matière", res: 125 },
{ critere: "Zone", res: 100 },
];
I need to translate only the critere column
Thank you
You need to use the TranslatePipe from ngx-translate.
<div class="sort-header-container">
<table matSort class="mat-sort">
<tr *ngFor="let item of items" class="row">
<td class="row">{{item.critere | translate}}</td>
<td>{{item.res}}</td>
</tr>
</table>
</div>
Make sure your critere field have the corresponding translations in the json translation files
example for en english translation:
{
"Prix TTC": "Price",
"Couleur": "Color",
}
As taken from the example in ngx-translate github
You can use the translate pipe in your code, like this:
<td class="row">{{ item.critere | translate }}</td>
For this to work, your critere would need to be keys in your language file, for example:
{
'Stock': 'Stock english translation',
'Couleur': 'Is this color?'
}
Thank you very much for your answers
Finally here's what I did :
<tr *ngFor="let item_translate of ('PRODUCT.PRODUCT' | translate); let i = index " class="row"
[ngStyle]="item_translate.critere == 'Stock' && stock<0 ?{color:'red'}:{color:'#474646'}">
<td class="row">{{item_translate.critere}}</td>
<td>{{items[i].res}}</td>
</tr>
In my json example fr :
"PRODUCT": {
"PRODUCT": [
{
"critere": "Code-modèle"
},
{
"critere": "Code Libellé"
},
{
"critere": "Stock"
},
{
"critere": "Prix TTC"
},
{
"critere": "Couleur"
},
{
"critere": "Matière"
},
{
"critere": "Zone"
}
]
}
currently I have this JSON object:
{
"hospitalId" : "0002",
"name" : "test form",
"procedureId" : "0002-testform",
"steps" : [
{
"title" : "Brand",
"value" : [
"jonson",
"smith",
"braun"
]
},
{
"title" : "Procedure type",
"value" : [
"total",
"unicompartimental"
]
}
]
}
And I need to display it on a multiselect, like this:
<strong>Brand</strong>
<ul>braun</ul>
<ul>jonson</ul>
<ul>smith</ul>
<strong>Procedure type</strong>
<ul>total</ul>
<ul>unicompartimental</ul>
They need to be ordered by steps.title and by steps.value, the thing is: I can't figure out how to display them correctly with a <select ng-options> tag, this is what I've tried:
<select multiple ng-model="step" ng-options="step[0].value group by step.title for step in loadedSteps.steps " ></select>
Gives me: Brand undefined
<select multiple ng-model="step" ng-options="step.value group by step.title for step in loadedSteps.steps | orderBy:['value']"></select>
Gives me: Brand [jonson, smith, braun]
Also I've tried with a nested <option> but it doesn't have ordering...
Any help would be very appreciated, thanks in advance
Here is the answer you are looking for.
You should use two ng-repeat, first for displaying title and other for displaying values inside the title.
The first ng-repeat starts with the title and ends with the values in that title.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names =
{
"hospitalId": "0002",
"name": "test form",
"procedureId": "0002-testform",
"steps": [{
"title": "Brand",
"value": [
"jonson",
"smith",
"braun"
]
}, {
"title": "Procedure type",
"value": [
"total",
"unicompartimental"
]
}]
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div >
<label>{{step.title}}</label>
<select>
<option ng-repeat-start="step in names.steps | orderBy:'title'" ng-bind="step.title"></option>
<option ng-repeat-end ng-repeat="opt in step.value | orderBy:'step.value':true" ng-bind="' - ' + opt"></option>
</select>
</div>
</div>
</body>
</html>
Please run this snippet
HEre is a plunker
I have an array
lists = [{"id":"1234"},{"id":"5423"},{"id":"65342"}]
And array with contents:
contents = [{"id":"1","listId":"1234"},{"id":"2","listId":"5423"}]
How can I filter ng-repeat for "contents" inside ng-repeat for "lists" and filter "contents" by content.listID equal list.id?
You should probably be doing this mapping in the controller rather than in the view, but the below example will show you how to do it.
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.lists = [{
"id": "1234"
}, {
"id": "5423"
}, {
"id": "65342"
}]
vm.contents = [{
"id": "1",
"listId": "1234"
}, {
"id": "2",
"listId": "5423"
}]
}
ExampleController.$inject = [];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController as vm">
<div ng-repeat="item in vm.lists">
<p ng-repeat="content in vm.contents | filter:{ listId: item.id }">Content ID: {{content.id}} Lists ID: {{item.id}}</p>
</div>
</body>
</html>
ng-repeat="e in contents | filter: {listId: lists.id}"
You will have to parent id to child array and child array will be filtered for that parent id. plnk for similar example.
Regards.
If I have a dataset that contains an array of objects, with each object having an array inside of them, how can I sort the subarrays by their properties? For example, here is some sample music data, it has 2 albums with tracks within them:
albums: [
{
type: "album",
name: "Brothers",
tracks: [
{
type: "track",
name: "Everlasting Light"
},
{
type: "track",
name: "Next Girl"
},
{
type: "track",
name: "Tighten Up"
}
]
},
{
type: "album",
name: "Listen",
tracks: [
{
type: "track",
name: "Around Town"
},
{
type: "track",
name: "Forgive & Forget"
}
]
}
]
The result would look like this:
- Around Town
- Everlasting Light
- Forgive & Forget
- Next Girl
- Tighten Up
Is there any way I can use an ng-repeat to create an alphabetically sorted list of music tracks?
I'd imagine it working something like below, but I tried with no success.
<p ng-repeat="track in albums.tracks">{{track.name}}</p>
Since you need only the tracks of albums, you should merge all the tracks in a single array and then just sort it alphabetically. Here's is a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.albums = [
{
"type":"album",
"name":"Brothers",
"tracks":[
{
"type":"track",
"name":"Everlasting Light"
},
{
"type":"track",
"name":"Next Girl"
},
{
"type":"track",
"name":"Tighten Up"
}
]
},
{
"type":"album",
"name":"Listen",
"tracks":[
{
"type":"track",
"name":"Around Town"
},
{
"type":"track",
"name":"Forgive & Forget"
}
]
}
];
$scope.tracks = [];
angular.forEach($scope.albums, function(value) {
$scope.tracks = $scope.tracks.concat(value.tracks);
});
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="track in tracks | orderBy:'name'">
<span ng-bind="track.name"></span>
</div>
</body>
</html>
You can use the orderby filter to sort your list based on a property. The angular website has more info on this https://docs.angularjs.org/api/ng/filter/orderBy
Here is a plunker that might help, https://plnkr.co/edit/goxNA9PvBeFL0hyWp9hR?p=preview
You can use the filter directly in your html to sort by a property.
<div ng-repeat="album in albums">
<h2>{{album.name}}</h2>
<div ng-repeat="track in album.tracks | orderBy:'name'">
{{track.name}}
</div>
</div>
I am trying to filter my data which I am getting from a HTTP GET endpoint by an array of values
filters = ['Full Time', 'LinkedIn', ...]
The general structure of the response I am getting back is an array of objects where each object can look like this:
{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [
{
"name": "Google"
},
{
"name": "LinkedIn"
}
],
"university": [
{
"name": "UC Berkeley",
"degrees": [ {"name": "Computer Engineering"}]
}
}
}
}
So if I filter by ["Google", "Full Time"], the above object should be included.
Is there a built in filter to handle this?
I am having trouble writing the custom filter to handle such a heavily nested object.
Any ideas on how to implement this?
You can use built in filter like this jsfiddle
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.data = [{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Google"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}, {
"preferences": {
"jobType": {
"type": "Remote"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Yandex"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>Jobs</h3>
<input ng-model="filterModelJobType" placeholder="filter jobType">
<input ng-model="filterModelJob" placeholder="filter job">
<table class="table table-striped table-bordered">
<tbody>
<tr ng-repeat="x in data|filter:{profile: {additionalinfo:{organization:{name:filterModelJob}}},preferences: {jobType:{type:filterModelJobType}}}">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.preferences.jobType.type }}</td>
<td class="text-left">
<div ng-repeat="org in x.profile.additionalinfo.organization">
<hr> {{org.name}}
</div>
</td>
</tr>
</tbody>
</table>
</body>
In the latest version of AngularJS
If there is nested object then
var foo = $filter('filter')($scope.welcome, {
additionalinfo: { name: 'google' }
});
Reference: GitHub issue