Problem:
I am showing a list of documents in my application and one of the fields is a preview icon which shows a modal to display a pdf preview of the document. I am building a url to make it dynamic but I'm not sure how to iterate through the array
Controller:
$scope.documentIdentifier = documents.documentBag[0].documentId;
$scope.url = $sce.trustAsResourceUrl("http://localhost:3000/services/v1/" + $scope.documentId + "?type=pdf");
My object:
{
"documents": "Success",
"documentBag": [
{
"documentId": "E1DUPW9JPP1GUI3"
},
{
"documentId": "E1FUJW5JPP1GUI4"
},
{
"documentId": "G1DUJW3JPP1GUI5"
}
]
}
I need to iterate through the documentId to show all 3 documents but not exactly sure how.
Use ng-Repeat to iterate over the array and build your url.
$scope.documents = documents.documentBag;
$scope.url = $sce.trustAsResourceUrl("http://localhost:3000/services/v1/");
<div ng-repeat="document in documents">
{{url + document.documentId}}
</div>
Related
I have a Angualr JS application and i try to get Id on my JSON im new with JSON objects.
{{detAgent[queryFilter][0][listRetainerPaymentUnit][0]}}
{
"queryFilter": [{
"objPolicyData": {"idAssign": "219","idPromotoria": "JA",
"listStatusPolicy": [{"policyStatusCode": "V"}],
"collectionType": {"DxN": true},
"listRetainerPaymentUnit": [{"idRetainer": "100","nameRetainer": "RETAINER","idPaymentUnit": "109","namePaymentUnit": "PAYMEMT UNIT"}],
"listFederalEntity": [{"idFederalEntity": "MEX","nameFederalEntity": "CDMX"}],
"listZipCode": ""
},
"policyDataInfo": {
"policyNumber": "100",
"sizeOfFullPolicyDataObject": 480,
"unitSizeFullPolicyDataObject": "MB"
}
}]
}
I expect to obtain the data with a tag Id
Resolve i remove the ng-repeat directive in the html and to get the id I only pass the variable
<div class="col-3 text-left"><label>Id {{agentsDetailList.queryFilter[0].objPolicyData.idAssign}}</label></div>
I wnt to use ng-repeat to display a list filtered by an object value. Here is a plukr of my attempt https://plnkr.co/edit/vD4UfzM4Qg7c0WGTeY18?p=preview
The following returns all of my JSON names as expected.
<li ng-repeat="item in collection_data">{{navitem.name}}</li>
now i want to filter and only show the names of the items that have "foreign_lang": "es", like in this json snippet
{
"id": "ddb06ba2-6348-4d45-9e63-a6fa3632e5c2",
"created_at": "2015-10-12T18:34:15.668Z",
"updated_at": "2016-04-14T15:55:37.433Z",
"custom_attributes": {
"Display Name": "Activos en Español",
"foreign_lang": "es",
"display_boxes": "false"
},
},
so i made this filter function
$scope.filterByDisplay = function() {
$filter('filter')($scope.collection_data, ['foreign_lang', 'es']);
}
and called it like this.
<li ng-repeat="item in collection_data" | filter: filterByDisplay>{{navitem.name}}</li>
I did not get any console errors but i got nothing returned.
How do I properly filter through this collection to only return items with 'foreign_lang', 'es' as a value in the json? See the plunkr to see a working example https://plnkr.co/edit/vD4UfzM4Qg7c0WGTeY18?p=preview
Third attempt (since the question was revised). Use the filter function to check each object individually, and returning only those that pass the truth test.
$scope.filterByDisplay = function(value) {
return (value.content)
&& (value.content.custom_attributes)
&& (value.content.custom_attributes.foreign_lang === "es");
}
Updated Plunk - Using Filter Function
I'm trying to display all products what under the selecte categoryId.
Sample JSON file :
[{
"product_id":"1",
"product_name":"Name of the book 1",
"product_image":"image Url 1",
"category_id":"1"
},
{
"product_id":"2",
"product_name":"Name of the book 2",
"product_image":"image Url 2",
"category_id":"2"
},
{
"product_id":"3",
"product_name":"Name of the book 3",
"product_image":"image Url 3",
"category_id":"3"
}]
I have controller like below. I read data from json file. As you see in sample , i can display actual product name in console but i am not able to show in html page.
.controller('CategoryDetailCtrl', function($scope, product,$stateParams) {
product.fetch().then(function(data) {
$scope.dataq=data;
for (var i=0; i < $scope.dataq.length; i++){
if ($scope.dataq[i].product_id == $stateParams.categoryId){
$scope.data=data;
console.log($scope.data[i].product_name);
}
} return null;
})
})
Html sample is like below :
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="p in data" type="item-text-wrap">
<h2>{{p.product_name}}</h2>
</ion-item>
Can Anyone help please?
I solved issue by editing controller like
.controller('CategoryDetailCtrl', function($scope, product,$stateParams) {
product.fetch().then(function(data) {
$scope.data=data;
$scope.catId=$stateParams.categoryId;
})
And used filter function in html side instead of using if in controller
ng-repeat="p in data | filter: {category_id: catId}"
i have some problems accessing some values stored in a json with the directive ng-repeat.
the json is formatted properly (checked it with a json checker) and it's called via $http service. unfortunately i can't change the format of json, retrieved through the wordpress-json-api plugin.
the json (with some cuts):
{
"status": "ok",
"count": 10,
"count_total": 24,
"pages": 3,
"posts": [
{
"id": 108,
"type": "sensor",
"slug": "ert",
"custom_fields": {
"sensor_id": [
"er"
],
"coords": [
"{\"address\":\"\",\"lat\":55.39979700000003,\"lng\":10.430533275390644,\"zoom\":12}"
]
}
}
//etc other posts following, json correct
Now i have a problem accessing the single values inside coords. i complained too about serializing data in db, but i'd like anyway to get lng and lat out of that array
<ul>
<li ng-repeat="post in sensor.posts">
<h4>name : {{post.id}}</h4> //ok
<h4>all custom fields : {{post.custom_fields}}</h4> //good-this-too
<h4>custom field lat : {{post.custom_fields.prova_coords[0]}}</h4> //works but can't go on
</li>
</ul>
the ouput of last line is:
custom field lat : {"address":"","lat":55.39979700000003,"lng":10.430533275390644,"zoom":12}
but now i'm stuck..can't retrieve single lat and long values
You need to use $scope.$eval(coordsString)
Here's a test: http://jsfiddle.net/mikeeconroy/Rnc7R/
var objString = "{\"address\":\"\",\"lat\":55.39979700000003,\"lng\":10.430533275390644,\"zoom\":12}";
$scope.coords = $scope.$eval(objString);
Then you can refer to coords.lat or coords.lng in your template like so:
<div ng-controller="myCoordsCtrl">
Lattitude: {{coords.lat}}<br>
Longitude: {{coords.lng}}
</div>
Since this is happening within an ngRepeat you may need to use an Angular filter to rectify the string on the fly
<li ng-repeat="post in sensor.posts | myRectifyCoordsFilter">
EDIT:
Don't use the filter like in the above example, using filters to modify $scope is not a good situation. You'll need to modify your $scope prior to using it in the ng-repeat
$http.get().success(function(data){
angular.forEach(data,function(val,key){
this.coords = $scope.$eval(val.coords[0]);
},data);
$scope.sensor = data;
});
I keep running into some confusing solutions and unclear ways to wrap items that match into a div using backbone.
I am just building a simple example for myself, and would like to nest all models in a collection that have the same attribute team, using a comparator works well in organizing the list, but for the life of me I can't find a clear solution to wrapping each so that I have more control over the list of players inside the team.
There has to be a clear easy solution for a beginner like me. I really just want to keep things as clean and simple as possible. My desired html result looks like below.
<div class="pacers">
<li>Paul</li>
<li>Roy</li>
</div>
<div class="bulls">
<li>Kirk</li>
<li>Taj</li>
</div>
Based on a backbone friendly json array like below.
[
{
"name": "Paul",
"team": "pacers"
},
{
"name": "Kirk",
"team": "bulls"
},
{
"firstname": "George",
"team": "pacers"
},
{
"name": "Taj",
"team": "bulls"
}
]
So using a comparator is awesome I just write this comparator : 'team' and it handles the list order for me, cool, but I dont have much control I would like to wrap the list in a more hierarchical system.
Another approach:
If you are using underscore's templates this could be one way of doing it. You can use underscore's groupBy function to group the list based on teams.
var teams = [
{
"name": "Paul",
"team": "pacers"
},
{
"name": "Kirk",
"team": "bulls"
},
{
"firstname": "George",
"team": "pacers"
},
{
"name": "Taj",
"team": "bulls"
}
];
var groupedList = _.groupBy(list, function(l){
return l.team;
});
console.log(JSON.stringify(groupedList));
This is how it would be grouped.
{
"pacers": [
{
"name": "Paul",
"team": "pacers"
},
{
"firstname": "George",
"team": "pacers"
}
],
"bulls": [
{
"name": "Kirk",
"team": "bulls"
},
{
"name": "Taj",
"team": "bulls"
}
]
}
You can then use for each loop and in template and generate HTML in following way. The groupedList is passed as teams to below template.
<%
_.each(teams, function(team, teamName){
%>
<div class="<%=teamName%>">
<%
_.each(team, function(player){
%>
<li><%=player.name%></li>
<%
});
%>
</div>
<%
});
%>
This would generate the HTML the way you expected.
NOTE:
The code snippets are given considering underscore templating, you might have to make changes based on what you use. Hope it helps.
Correct me if I am wrong the problem being described relates more to controlling the contents of each item in relation to it's model as well as how to simply render them in groups.
1) Niranjan has covered grouping out the data into separate lists but remember that this list returned is not a Backbone construct.
2) As per the manual the '_.groupBy' method should be available to you via the collection i.e.:
myCollection.groupBy(etc);
3) I would personally consider mapping the results of the groupBy back into models and pass each and every model into a separate view and render them from within the main list view.
var CollectionView = Backbone.View.extend({
initialize : function () {
// Note: I am pretending that you have a real collection.
this.collection.fetch().then(
this.addAll(true);
);
}
addOne : function (model) {
// call .render individual template items here for each model.
var view = new ItemView(model);
this.$el.append(view.render();
},
addAll : function (groupOpts) {
var col = this.collection;
if(groupOpts === true) {
// Do grouping (or do it in the model). Maybe put back into new collection?
}
_.each(col, function(model) {
this.addOne(model);
}, this);
},
render : function () {
// Render your template here.
}
});
var ItemView = Backbone.View.extend({
render : function () {
}
});
Not a complete example but that's the general pattern I would follow when attempting the same thing. Having an individual view/model for each item, in my opinion, gives you more control.
This could be handled in a pretty crazy view template (depends on your template language)... or you could use a simpler template/view and just make some more crazy collection queries (first using a pluck to get the team, de-dupping that array, then running some where's for each of the teams... but you can see how this gets crazy)
I'd vote for the view and view template should handle this... what are you using? Jade? Mustache?
Something like this - logical psuedo code here since I don't know your template language:
var team;
forEach player in players
if(!team) {
set team = player.team
print open holder and then the first row
} (team !== player.team {
set team = player.team
print close of previous holder, then open holder and then the first row of new team
} else {
print just the player row
}
Even so, you can see how this is a bit dirty in and of itself... but what you are describing is a view/presentation concern, and you can do it here with no new additional loops and maps and wheres (like you'd have to do if you did it in the data layer before calling the views)