I am iterating through an array of person objects using ng-repeat Say the array looks like this:
[{
"display_name": "John Smith",
"status": "part-time",
"bio": "I am a person. I do people stuff.",
}, {
"display_name": "Jane Doe",
"status": "full-time",
"bio": "I am yet another person.",
}, ...]
Meanwhile, I have another number_list object that looks like this (note the uppercase):
{
"JOHN SMITH": 12,
"JANE DOE": 34,
...
}
In the HTML, I am able to interpolate from each person object like so:
<p>
Person Name: {{ person.display_name }}
Person Bio: {{ person.bio }}
...
</p>
But I'd also like to interpolate from the second object, accessing the value where the key matches the person object I'm on, like so:
<p>
...
Person Number: {{ number_list['{{ person.display_name | uppercase }}'] }}
</p>
I am using the EMCAScript Bracket notation rather than the dot notation to specify the key, because of the spaces in the key names of number_list (e.g."JOHN SMITH") but I get nothing out of that interpolation.
I have confirmed that if I type in a name e.g. {{ number_list['JOHN SMITH'] }} that I am able to interpolate the value -- 12 in this example. This means the issue doesn't have to do with scope or anything like that as far as I can tell.
Nested interpolation with double curly braces ({{ }}) is not supported by the AngularJS framework. If you want to run more complex code, you should make it a controller method and call the method from your view.
<p ng-repeat="person in persons">
...
̶P̶e̶r̶s̶o̶n̶ ̶N̶u̶m̶b̶e̶r̶:̶ ̶{̶{̶ ̶n̶u̶m̶b̶e̶r̶_̶l̶i̶s̶t̶[̶'̶{̶{̶ ̶p̶e̶r̶s̶o̶n̶.̶d̶i̶s̶p̶l̶a̶y̶_̶n̶a̶m̶e̶ ̶|̶ ̶u̶p̶p̶e̶r̶c̶a̶s̶e̶ ̶}̶}̶'̶]̶ ̶}̶}̶
Person Number: {{ ::personNumber(person.display_name) }}
</p>
$scope.personNumber = function(name) {
return $scope.number_list[name.toUpperCase()];
};
You can also use filter to personNumber for an object:
app.controller("ctrl", function($scope){
$scope.persons = [...];
$scope.number_list = [...];
})
app.filter("personNumber", function(){
return function(array, name){
return array[name.toUpperCase()];
}
})
<p ng-repeat="person in persons">
...
Person Number: {{person.display_name | personNumber: number_list}}
</p>
Related
I might be getting the wrong end of the stick, but I am trying to pluralise a value with i18next package but also add in a static variable name:
Here is the json:
{
"likes": {
"pluralise_zero": "~~{{name}}~~ **liked** your post",
"pluralise_one": "~~{{name}}~~ and {{count}} other **liked** your post",
"pluralise_other": "~~{{name}}~~ and {{count}} others **liked** your post"
}
}
And I am calling it like so:
t('likes.pluralise', name, count)
The like count should be pluralised, but the {{name}} should not be. What I'm finding is that when I run this code, {{name}} is also pluralised like which looks something like:
{
count: 4
name0: "persons name"
name1: "another name"
name2: "someone else"
}
Is there a way to achieve what I need?
I'm fetching a list that I'm trying to loop through that has an object inside. I'm using vue and the array looks like this:
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]
My problem is accessing the different ones inside the additionalData.
This is how far I've come:
<div
v-for="(company, idx) in companies"
:key="idx"
>
<p class="font-weight-bold text-h6"> {{ company.name }} </p>
<p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
</div>
This doesn't work and I've tried a loop inside the loop aswell. When I only print out {{ company.additionalData }} I get the whole object. Can it have something to do with that the object is inside a string? Could I do a computed or something to figure this out or? :)
It looks like additionalData is a string containing JSON, so try converting the string to an object. Something like this should work:
<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>
Yes, you're right, you can't access json properties with dot notation in html. You can fix that with JSON.parse, which will turn your JSON object into a JavaScript object that you can access the properties of in your template.
companies: {
name: "company1"
id: 1
type: "finance"
additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}
Syntax problem
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: {
"funder": "blabla",
"idType": 5,
"number":"2"
}
]
I'm having two array in my scope: employees and cars. Every employee has a carId which matches a car out of the cars-array.
Employee looks like
[{'id': 1, 'name': 'John', 'carId': 1}]
Car like
[{'id': 1, 'color': 'red'}]
Now I have an ng-repeat and would like to output the color of the car directly with an filter:
{{ employee.carId | selectFromCars:$scope.cars }}
I don't know how to get access to the cars array inside the filter. Is this even possible or should I inject the car into the employee after loading and then just use following?
{{ employee.car.color }}
you can make your own custom filter and just add it the end of your controller like so:
.filter('empCarFilter', function() {
return function(carId, cars) {
// you can access $scope.cars here, for example...
angular.forEach(cars,function(value){
if (value.id === carId) {
return value.color;
}
// etc...etc...
})
}
The above method is under the assumption that you are passing employee.carId into the filter. But, not sure how useful this would be for you, but you can pass the whole object to the filter as well and not just one key with:
{{ employee | empCarFilter }}
Here is also a pretty good reference for custom filters:
https://scotch.io/tutorials/building-custom-angularjs-filters
This should be a very simple thing to do. I am building an IONIC app with a JSON data file. The data is something like this.
[
{ "id": 1,
"name": "John",
"type": "male",
"bio": "this is John"
},
{ "id": 10,
"name": "Mary",
"type": "female",
"bio": "this is Mary"
}
]
Now I want to filter by by "type" in the data and then loop the data by "id".
<ion-list ng-repeat="person in people | filter: {'type': 'male'}">
<ion-item href="#tab/people/males/{{ person.id }}">{{ person.name }}
</ion-item>
</ion-list>
The Controller for this is:
.controller('PeopleController', ['$scope', '$state', '$http', function($scope, $state, $http){
$http.get('data/people.json').success(function(data){
$scope.people = data;
$scope.whichPerson = $state.params.id;
}),
}])
This displays the required data of males only by name.
However if I want to see the individual bio using the following code
<div class="card" ng-repeat="person in people | filter: { id: whichPerson }">
<h2>{{ person.name }}</h2>
<p>{{ person.bio}}</p>
</div>
When I click the individual item for each person to display person.bio I get both John and Mary.'
I figured this was because the "id" is 1 and 10 which seems to be parsing as a string to the controller. I tried putting this
"id": "1" and "id": "10"
Did not work. I did this in the controller
$scope.whichPerson = parseInt($state.params.id, 10);
This does not work either. I am totally stumped. How do I get the individual id's from the data? In fact I noticed that I can change the id to 11 or 12 or 13 etc and it still returns both records?
Any help appreciated.
Try to add the comparator :true to your filter as described in the documentation. This forces a strict comparison of the filter value instead of just checking if the data contains it.
Given the above doesn't work, you could try a custom filter by doing:
filter: { id: whichPerson }:sameID
and then in your controller:
$scope.sameID = function(actual, expected) {
return parseInt(actual) === parseInt(expected)
};
Even if this doesn't work, you could then at least debug within the custom filter to see where the comparison is failing
I'm trying to grok Meteor. Here's a helper that I have in one of my templates:
genres: function() {
return Genres.find();
}
Which returns something like this:
[{ "name" : "Action", "_id" : "CHP8uaSPNwKTj6gn7" },
{ "name" : "Thriller", "_id" : "8hKRp3LmgcD6gPRXf" }]
I have yet another helper function in that same template:
authors: function() {
return Authors.find();
}
Which returns something like this:
[{ "name" : "Robert Ludlum", "genre" : [ "CHP8uaSPNwKTj6gn7", "8hKRp3LmgcD6gPRXf" ]}]
The problem becomes clear when I want to display authors and their genres in HTML:
{{#each authors}}
<p> Author: {{name}} </p>
<p> Genres: {{genre}} </p>
{{/each}}
Which, as you've already guessed, results in:
Author: Robert Ludlum
Genres: CHP8uaSPNwKTj6gn7, 8hKRp3LmgcD6gPRXf
And that's not desirable. This would much be better:
Author: Robert Ludlum
Genres: Action, Thriller
I've had a tough time figuring out how to accomplish that. I don't have a lot of experience with this NoSQL stuff and the examples that I've seen have been unhelpful in this context.
So how do I pull that off?
There are a few ways to solve this. One is to add a helper like:
Template.myTemplate.helpers({
genreNames: function() {
var genres = Genres.find({_id: {$in: this.genre}}).fetch();
var names = _.pluck(genres, 'name');
return names.join(', ');
}
});
And modify your template to look like this:
{{#each authors}}
<p> Author: {{name}} </p>
<p> Genres: {{genreNames}} </p>
{{/each}}
The helper works because it runs inside of the #each so it's context is an author.
Alternatively, you can add a transform to your collection or use collection-helpers. That way, you can add a virtual property to all author instances, so you can do things like: Authors.findOne().genreNames().
In atmosphere there is a package called publish-composite, https://atmospherejs.com/reywood/publish-composite that should allow you to do what you are after.
It will allow you to select on multiple collections using a primary collection and related data from other collections.