How to exclude an array/object element with Handlebars? - javascript

Right now I have this json structure
"administration" : [
{
"name" : "Sigfried Bermudez",
"role" : "Associate Director"
},
{
"name" : "Karen Madrigal",
"role" : "QA Manager"
},
{
"name" : "Jorge Lopez",
"role" : "Project Manager"
}
]
as you see the last element in that array says "role" : "Project Manager", and the way I am excluding this element from the view is this
{{#each chart-container.[3].administration}}
{{#unless #last}}
<span>{{#key}} {{this.name}}</span>
{{/unless}}
{{/each}}
but what about that element changes the position?
what I need to know is if I can do something like {{#unless this.role.toLowerCase().indexof("project")}} or what is the best option in this case? if there is a way to do this from the HTML, it would be awesome :)

Working example: JsFiddle
Use Handlebars helper:
var entry_template = document.getElementById('entry-template').innerHTML;
var data = [
{
"name" : "Sigfried Bermudez",
"role" : "Associate Director"
},
{
"name" : "Karen Madrigal",
"role" : "QA Manager"
},
{
"name" : "Jorge Lopez",
"role" : "Project Manager"
}
]
Handlebars.registerHelper("ifvalue", function(conditional, options) {
if (conditional !== options.hash.notequals) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
var template = Handlebars.compile(entry_template);
var template_with_data = template(data);
document.getElementById('data').insertAdjacentHTML('afterbegin', template_with_data);
Template:
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
{{#ifvalue this.role notequals="Project Manager"}}
{{this.name}}
{{/ifvalue}}
{{/each}}
</script>
<div id="data">
</div>

Related

MeteorJS : UPDATE AN OBJECT inside array

I'm trying to update the comment_delete = 'false' to 'true' on the second object within an array. Help Please ....
"_id" : "jLkRdxocZzheefWF3",
"comments" : [
{
"comment_id" : "\u0003624334",
"comment" : " test",
"user" : "peter pan",
"userId" : "MQtp4i8bZeLYSLbr5",
"comment_delete" : "false"
},
{
"comment_id" : "\u0007973101",
"comment" : " add",
"user" : "peter pan",
"userId" : "MQtp4i8bZeLYSLbr5",
"comment_delete" : "false"
}
],
}
Try this query:
db.collection.update(
{_id:"jLkRdxocZzheefWF3"}, //add your first match criteria here, keep '{}' if no filter needed.
{$set:{"comments.$[element].comment_delete":"true"}},
{arrayFilters:[{"element.comment_id":"\u0007973101"}]}
)
I dont have an idea about your match criteria since you didnt mention it in the question. Change them as per your requirements. This change comment_delete to true as per the comment_id mentioned.
Output is:
{
"_id" : "jLkRdxocZzheefWF3",
"comments" : [
{
"comment_id" : "\u0003624334",
"comment" : " test",
"user" : "peter pan",
"userId" : "MQtp4i8bZeLYSLbr5",
"comment_delete" : "false"
},
{
"comment_id" : "\u0007973101",
"comment" : " add",
"user" : "peter pan",
"userId" : "MQtp4i8bZeLYSLbr5",
"comment_delete" : "true"
}
]
}
db.users.update({'_id':'jLkRdxocZzheefWF3',"comments.comment_id":"\u0007973101"},{$set:{'comments.$.comment_delete':true}})
Try above mentioned query it works

Angular 1.6 $http.get unable to read from json

I am trying to read the json data from a static json file that I have for testing on a local web server but I cannot get anything to show up with using the $http.get() service. I looked at a few other similar questions here but all accepted answers account for use of the promise methods, however on the angularjs v1.6.x+ these have been depreciated.
Initially I tried setting my json data on a variable inside of the controller, and everything worked fine, however once I moved to a JSON file nothing shows up. My first error was that I was unaware the JSON file has to be in ANSI format for the JSON.parse() angular calls to be able to work. Before switching the file encoding to ANSI I was getting syntax errors and my json structure was correct. (some text editor like Dreamweaver will create JSON files in UTF-8 format).
At this point when I inspect the webpage there are no JS errors on the console whatsoever, however no data shows up at all. Here is what I have:
My events.json
[
{
"day" : "Monday",
"objective" : "Pipeline",
"sessions" : [
{
"title" : "Leadership Excellence Luncheon",
"start" : "11:30am",
"end" : "1:00pm",
"location": "room A"
},
{
"title" : "Veteran Resume Workshop",
"start" : "1:15pm",
"end" : "2:00pm",
"location": "room B",
"speakers" : [
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/",
},
{
"name": "Jane Doe",
"title" : "VP",
"company": "Lancer",
"headshot" : "http://placehold.it/119x134.jpg",
}
]
}
]
},
{
"day" : "Tuesday",
"objective" : "Pipeline",
"sessions" : [
{
"title" : "Leadership Excellence Luncheon",
"start" : "11:30am",
"end" : "1:00pm",
"location": "room A"
},
{
"title" : "Veteran Resume Workshop",
"start" : "1:15pm",
"end" : "2:00pm",
"location": "room B",
"speakers" : [
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/",
},
{
"name": "Jane Doe",
"title" : "VP",
"company": "Lancer",
"headshot" : "http://placehold.it/119x134.jpg",
}
]
}
]
}
}
Here is my app.js
(function() {
var app = angular.module('Agendas',[]);
app.controller('TableController', ['$scope', '$http',
function($scope,$http) {
$scope.title = "test";
$scope.events = [];
$http({
method: 'POST',
url: 'http://localhost/ang/data/events.json',
}).then( function(response) {
$scope.events = response;
});
}]);
})();
Here is my index.html
<!doctype html>
<html>
<head>
.....
</head>
<body>
....
<div id="agenda" class="mainCont container-fluid well" ng-app="Agendas" ng-controller="TableController">
<div id="day" ng-repeat="event in events">
<h1>{{ event.day }} — {{ event.objective }}</h1>
<div id="sess" ng-repeat="session in event.sessions">
<div style="width: 140px; float: left; clear: left;">{{ session.start }} - {{ session.end }}<br><br><em>Location: {{ session.location }}</em></div> <div style="float: left;"><em>{{ session.title }}</em> <br>
<div class="panelist" ng-repeat="speaker in session.speakers"><img ng-src="{{ speaker.headshot }}"><br>
<a ng-href="{{ speaker.bio }}">{{ speaker.name }}</a><br>
{{ speaker.title }} <br>
{{ speaker.company }}</div>
</div>
</div>
<div class="aghr"></div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I noticed that your JSON file contains some errors. It could be related.
The ending tag should be one to close the array. ]instead of }.
The last field of a JSON object should not have a comma. E.g.:
{
"name": "John Doe",
"title": "Analyst",
"company": "Appel",
"headshot" : "http://placehold.it/119x134.jpg",
"bio": "john-doe/", <--- remove comma
}
You can use a website as jsonlint to validate your JSON.
** As suggested, you might have to clear the browser cache first.
** Additionally change
$scope.events = response;
to
$scope.events = response.data;

AngularJS showing value based on id

How can I change data based on id that is passed from json file.
JSON:
{
"hotels": [
{
"id" : 1,
"name": "some hotel 1",
"category" : [{
"id" : 1,
"hotel_id" : 1,
"name" : "Cat name 1",
"bnb" : "yes",
"simple" : "yes"
}]
},
{
"id" : 2,
"name": "some hotel 2",
"category" : [{
"id" : 1,
"hotel_id" : 2,
"name" : "Cat name 1",
"bnb" : "yes",
"simple" : "yes"
}]
}
]
}
in my html I have ng-repeat like:
<p>Hotel names</p>
<ul>
<li ng-repeat="hotel in list.hotels">
{{hotel.name}}
<ul class="thumbnails">
<p>Category</p>
<li ng-repeat="cat in hotel.category">
{{cat.name}}
</li>
</ul>
</li>
</ul>
So this will show all what I have in that json file and I'm trying to limit it to show only data for one hotel (I know that I can do it with something like {{hotel[0].name}}) but there must be better approach, and also how can I use some kind of a switch by pressing the button to show data from hotel with id 1 to hotel with id 2 in the same div and vice versa?
Thank you.
You could use ng-repeat to create the links to display the hotel based on the click like in the following demo or in this fiddle.
For the categories you can use another ng-repeat (not added in the demo).
angular.module('demoApp', [])
.controller('mainController', MainController);
function MainController() {
this.hotels = [
{
"id" : 1,
"name": "some hotel 1",
"category" : [{
"id" : 1,
"hotel_id" : 1,
"name" : "Cat name 1",
"bnb" : "yes",
"simple" : "yes"
}]
},
{
"id" : 2,
"name": "some hotel 2",
"category" : [{
"id" : 1,
"hotel_id" : 2,
"name" : "Cat name 1",
"bnb" : "yes",
"simple" : "yes"
}]
}
];
this.selectedHotel = this.hotels[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
{{hotel.name}}
<div>
Hotel name: {{mainCtrl.selectedHotel.name}}
Category: {{mainCtrl.selectedHotel.category}}
</div>
</div>
To answer your question, notice ng-if added
<p>Hotel names</p>
<ul>
<li ng-repeat="hotel in list.hotels">
{{hotel.name}}
<ul class="thumbnails">
<p>Category</p>
<li ng-repeat="cat in hotel.categories" ng-if="cat.id == yourid">
{{cat.name}}
</li>
</ul>
</li>
</ul>
You can change yourid by using the current controller. And as other people suggest, you shouldn't use ng-repeat if you want to display only one element

How to show JSON as formatted view in html

I need to view JSON in my html page as formatted view. JSON come from database. I need to show it nut in Formatted view.
Just like
{
"crews": [{
"items": [
{
"year" : "2013",
"boat" : "Blue",
"position" : "1",
"name" : "Patrick Close",
"college" : "Pembroke",
"weight" : "14st 2lbs"
}, {
"year" : "2013",
"boat" : "Blue",
"position" : "2",
"name" : "Geordie Macleod",
"college" : "Christ Church",
"weight" : "13st 10lbs"
}]
}]
}
Anyone have any idea or suggestion ? or any resource that may help.
Edited: I want to create a JSON parser. User input different json and can view in formatted view.
Try JSON.stringify(data), its a Javascript function. Hope it might help.
Refer: Detail Explaination
If you are using PHP then use json_encode
Refer: json_encode manual
Since your are using angular-js, you can simply load your JSON feed from your controller then use the ng-repeat function to iterate over the items into your view page. Here down a sample where of how your HTML view can look like and you may need to style and build the blocks as per your needs:
<span>items:</span>
<span>[</span>
<br/>
<div class="item" ng-repeat="item in items">
<span>{</span><br/>
<span class="field">year : {{item.year}}</span><br/>
<span class="field">boat : {{item.boat}}</span><br/>
<span class="field">position : {{item.position}}</span><br/>
<span>}</span>
</div>
You can find a working sample in this JSFiddle.
First: your remote JSON is invalid: it's missing an ending bracket for crews.
It should be like this:
{
"crews": [{
"items": [
{
"year" : "2013",
"boat" : "Blue",
"position" : "1",
"name" : "Patrick Close",
"college" : "Pembroke",
"weight" : "14st 2lbs"
}, {
"year" : "2013",
"boat" : "Blue",
"position" : "2",
"name" : "Geordie Macleod",
"college" : "Christ Church",
"weight" : "13st 10lbs"
}]
}] // Missing this bracket
}
You didn't mention if your JSON is remote or not. I'm assuming not, so I'll use a local JavaScript var with eval function in this sample code.
<script type="text/javascript">
var content = {
"crews": [{
"items": [
{
"year" : "2013",
"boat" : "Blue",
"position" : "1",
"name" : "Patrick Close",
"college" : "Pembroke",
"weight" : "14st 2lbs"
}, {
"year" : "2013",
"boat" : "Blue",
"position" : "2",
"name" : "Geordie Macleod",
"college" : "Christ Church",
"weight" : "13st 10lbs"
}]
}]
};
var json = eval(content);
for (c in json.crews) {
var crew = json.crews[c];
for (i in crew.items) {
var item = crew.items[i];
console.log(item.year);
console.log(item.boat);
console.log(item.position);
console.log(item.name);
}
}
</script>
I'm using console.log to output, so you'll be able to see data only if you open the browser console:

Can angular directives call themselves?

I have some sample data in JSON format:
{
"menus" : [
{"name" : "Item 1", "children" : [
{"name" : "Item 1.1", "url" : "http://www.website.com1/1"},
{"name" : "Item 1.2", "url" : "http://www.website.com1/2"},
{"name" : "Item 1.3", "children": [
{"name" : "Item 1.3.1", "url" : "http://www.website.com1/3/1"},
{"name" : "Item 1.3.2", "url" : "http://www.website.com1/3/2"},
{"name" : "Item 1.3.3", "url" : "http://www.website.com1/3/3"}
]}
]},
{"name" : "Item 2", "children": [
{"name" : "Item 2.1", "url" : "http://www.website.com2/1"},
{"name" : "Item 2.2", "url" : "http://www.website.com2/2"},
{"name" : "Item 2.3", "url" : "http://www.website.com2/3"}
]},
{"name" : "Item 3", "url" : "http://www.website.com3"}
]
}
I want to build a menu tree that matches the stucture of the JSON. So I made a directive:
app.directive('menuItem',
function(){
return {
restrict : "E",
scope: { data : '='},
replace:true,
templateUrl: 'directives/menu-item.html'
};
});
I add the directive to my HTML and it works great for the first layer:
<menu-item data="menu.data.menus"></menu-item>
What I want to happen is that if model the directive is using has a 'children' property, I want it to build a new node using the same template as itself:
<ul class="menu-items" ng-repeat="item in data">
<li class="menu-item">
<div>{{item.name}}</div>
<div ng-if="item.children.length">
<!-- when I add this line I get problems -->
<menu-item data="item.children"></menu-item>
</div>
</li>
</ul>
I get the following error:
Error: [$rootScope:inprog]
http://errors.angularjs.org/1.3.0-beta.13/$rootScope/inprog?p0=%24digest
Question is, how can I get the desired functionality, and how should I think about what's going on to understand this better?
Fiddle to come...
Ok Thanks. Yes this was in fact the same issue adressed in How to handle recursive rendering of data using AngularJS
For this particular case, it would be important to mention that in it's present formulation the template would need to use "ng-init" to properly recurse.
<ul class="menu-items" ng-repeat="item in data">
<li class="menu-item">
<div>{{item.name}}</div>
<div ng-include="'directives/menu-item.html'" ng-init="data = item.children" class="submenu-item"></div>
</li>
</ul>

Categories

Resources