I have an object with array of data in {}, I want to print name attribute of all params.
The object is:
[
{
"name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Estafanie",
"value": 14000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
},
{
"name": "Paul",
"value": 20000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}
]
I want to see in my html:
Chris, Estefanie, Paul
I try with:
{{# _.each(name, function(listname){ }}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
<h5>{{{ listname }}}</h5>
</div>
</div>
{{# }) }}
But not working ;/ I find in mustache documentation but I don't see nothing same.
Anybody can help me with this?.
Thanks
Your view doesn't look like a MustacheJS view. Amend it to look like the following. Substitute "ObjectLiteralName" for the name of your object literal variable name.
Using {{#}}{{/}} in a Mustache view denotes that you wish to loop over an object.
See MustacheJS. It contains all the information you need to get up and running with Mustache.
View
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
{{#ObjectLiteralName}}
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
{{name}}
</div>
</div>
{{/ObjectLiteralName}}
</script>
Javascript
function renderTemplate() {
var $template = $('#template').html();
Mustache.parse($template); // optional, speeds up future uses
var rendered = Mustache.render($template, ObjectLiteralName);
$('#target').html(rendered);
}
Result
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Chris
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Estefanie
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<div class="names">
Paul
</div>
</div>
Related
I want to print out the value in my array, not the ['value']. It should create a div='col-md' box for each index in the array.
const app = new Vue({
el: "#app",
data() {
return {
step: 1,
ansPurchaseonly: [
['Leasehold', 'Freehold'],
['Leasehold', 'Freehold']
],
HTML template:
<div class="row white-boxes justify-content-center">
<div class="col-md-3 col-sm-12 h-100 d-table" v-for="(opt, index) in ansPurchaseonly">
<span>{{ opt }}</span>
</div>
</div>
</div>
Instead I get an output like [ "Leasehold", "Freehold" ] in the html rendered page. I want just:
Leasehold
Freehold
Seems you need to run another loop
<div class="col-md-3 col-sm-12 h-100 d-table" v-for="opt in ansPurchaseonly">
<div v-for="elem in opt">
<span>{{ elem }}</span>
</div>
</div>
You can use another v-for, because your "opt" is still an array or alternatively you can use join the values like
<div class="row white-boxes justify-content-center">
<div class="col-md-3 col-sm-12 h-100 d-table"
v-for="(opt, index) in ansPurchaseonly">
<span>{{ opt.join(' ') }}</span>
</div>
</div>
API :
"data": [
{
"accrediationsId": 1,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548558/in/photostream/\" title=\"1\">
<img src=\"https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg\" width=\"266\" height=\"79\" alt=\"1\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
{
"accrediationsId": 2,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548508/in/photostream/\" title=\"2\">
<img src=\"https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg\" width=\"266\" height=\"79\" alt=\"2\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
HTML CODE :
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
{{Affiliation.imageURL}}
</div>
Need to show Images from flikr in html page by using angular js. Is that possible to get image path directly from flikr api and show in ng-repeat.
Use image element with ng-src
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
<img ng-src="{{Affiliation.imageURL}}">
</div>
DEMO
var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.getAffiliationData = [
{
"accrediationsId": 1,
"imageURL": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg"
},
{
"accrediationsId": 2,
"imageURL": "https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg"
}];
});
<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="Affiliation in
getAffiliationData" ng-click="setClickedRow(user)">
<img ng-src="{{Affiliation.imageURL}}">
</div>
</body>
Double braces are not used for binding html content, they are used for rendering text, to render html you can use this "ng-bind-html"
Try this:
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
<div ng-bind-html="Affiliation.imageURL"></div>
</div>
you will need to inject this module
here is the demo link
I have a nested ng-repeat like this. I have a scope variable boards which is array and has further nesting with another array called tasks which is again an array. As you can see in the inner ng-repeat I am trying to bind to task.content.
<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
<div class="row">
<div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
</div>
<div class="row topmargin tasksContainer">
<div class="col-md-12">
<p ng-init="tasks = board.tasks" ng-repeat="task in tasks" ng-init="taskIndex=$index">
<div>
<span>{{taskIndex}}</span>
<span>{{task.content}}</span>
</div>
</p>
</div>
<hr>
</div>
<div class="row topmargin addTask">
<div class="col-md-12"><textarea class="addTaskField" placeholder="enter task here....."
ng-model="newTask.content"></textarea></div>
<button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
</div>
</div>
This is the structure of boards array
// vars
$scope.boards = [];
$scope.board={
title: "",
tasks: []
};
$scope.newTask = {
content: "",
tags: [],
completed: null
};
I push the newTask object into board.tasks and board object in boards array which is working fine and on debugger boards array look like this
$scope.boards = [
{
title : "shopping",
tasks : [
{
content: "pen",
complete: false,
tags: []
},
{
content: "bread",
complete: true,
tags: ['groceries']
}
]
},
{
title : "tomorrow",
tasks : [
{
content: "go swimming",
complete: false,
tags: []
},
{
content: "complete to-do app",
complete: false,
tags: ['urgent']
}
]
}
];
The problem I am facing is that the binding {{task.content}} and {{taskIndex}} are not displaying. What am I doing wrong?
A few of things here:
The link that EProgrammerNotFound linked to in the comments (a <p> tag cannot contain a <div> tag)
Second, your ng-repeat is missing boards: ng-repeat="task in board.tasks". So, I think it's supposed to look like this:
<div class="col-md-3 boards topmargin leftmargin" ng-repeat="board in boards">
<div class="row">
<div class="col-md-12 centerText bordered"><b>{{board.title}}</b></div>
</div>
<div class="row topmargin tasksContainer">
<div class="col-md-12">
<div ng-repeat="task in board.tasks" ng-init="taskIndex=$index">
<div>
<span>{{taskIndex}}</span>
<span>{{task.content}}</span>
</div>
</div>
</div>
<hr>
</div>
<div class="row topmargin addTask">
<div class="col-md-12">
<textarea class="addTaskField" placeholder="enter task here....." ng-model="newTask.content"></textarea>
</div>
<button class="btn btn-primary btn-block" ng-click="addNewTask(board)">Add Task</button>
</div>
</div>
Another thing is your <p> tag with the ng-repeat has two ng-inits. Not sure what that results in :)
Example here https://plnkr.co/edit/yJ7u4YTu2TAfhFajAjUY
I have made a small app using AngularJS 1.4, that outputs JSON data from a remote source.
Here is the JSON data in question.
Here is my view - the link to ngInfiniteScroll comes in at the top of the container:
<body ng-app="cn" ng-controller="MainCtrl as main">
<div id="header" class="container-fluid">
<p>Camper News</p>
</div>
<div class="container">
<div infinite-scroll="feed.loadMore()" infinite-scroll-distance="3">
<div ng-repeat="newsItem in myData" class="news-row col-sm-12 col-xs-12">
<div class="col-sm-2 col-xs-12">
<div id="img-container">
<img ng-src={{newsItem.author.picture}} id="user-avatar" />
</div>
</div>
<div class="news-text col-sm-10 col-xs-12">
<a href={{newsItem.link}}><em>{{newsItem.headline}}</em></a>
</div>
<div class="col-sm-10 col-xs-12" id="link-description">
{{newsItem.metaDescription}}
</div>
<div class="col-sm-12 col-xs-12" id="bottom-text">
<div class="col-sm-4 col-xs-12" id="author">
<a href='http://www.freecodecamp.com/{{newsItem.author.username}}'>{{newsItem.author.username}}</a>
</div>
<div class="col-sm-4 col-xs-12" id="likes">
<i class="fa fa-thumbs-o-up"></i> {{newsItem.upVotes.length}}
</div>
<div class="col-sm-4 col-xs-12" id="timestamp">
<span am-time-ago={{newsItem.timePosted}} | amFromUnix></span>
</div>
</div>
</div>
</div>
</div>
</body>
I am attempting to stagger the loading and outputting of the data using ngInfiniteScroll. I'm just not sure how it would work:
app.controller('MainCtrl', function($scope, Feed) {
$scope.feed = new Feed();
});
app.factory('Feed', function($http) {
var Feed = function() {
this.items = [];
this.after = '';
};
Feed.prototype.loadMore = function() {
var url = "http://www.freecodecamp.com/news/hot";
$http.get(url).success(function(data) {
var items = data;
// Insert code to append to the view, as the user scrolls
}.bind(this));
};
return Feed;
});
Here is a link to the program on Codepen. The code that relates to ngInfiniteScroll (controller and factory) is currently commented out in favour of a working version, but this of course loads all links at once.
What do I need to insert in my factory in order to make the JSON load gradually?
From what I can tell, by looking at FreeCodeCamps' story routes, there is no way to query for specific ranges of the "hot news" stories.
It looks to just return json with a fixed 100 story limit.
function hotJSON(req, res, next) {
var query = {
order: 'timePosted DESC',
limit: 1000
};
findStory(query).subscribe(
function(stories) {
var sliceVal = stories.length >= 100 ? 100 : stories.length;
var data = stories.sort(sortByRank).slice(0, sliceVal);
res.json(data);
},
next
);
}
You can use infinite scroll for the stories it does return to display the local data you retrieve from the request in chunks as you scroll.
I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \