How to check if expression will have a value after evaluating - angularjs

Let's say I have a following template:
"foo['x'] = '{{ myVar }}';"
Is there an angular way of checking if evaluating this against my current scope will give myVar some value ? I've got an array of such small templates and I only want to include them in the document when values are truthy. I was hoping either $interpolate, $parse or $eval might come in handy here. I know for sure that $interpolate is useless. What about the other two ? Maybe it's at least possible to get the name of the assigned value/expression ?
EDIT
I wasn't specific enough. What I was trying to achieve, was checking in advance if for example template '{{ myVar }}' evaluated against the current scope will return an empty string or value of the scope variable (if it exists). The case was really specific - when traversing an array of short templates I wanted to know if a template will return as an empty string or not, and only include it in my final html if it doesn't.

I'm not sure what are you trying to achieve, but to if you want to check if myVar is truthy in current scope, you can:
{{myVar ? "aw yiss" : "nope"}}
Evaluates to "aw yiss" if myVar is truthy and "nope" otherwise.

I ended up with a modified $interpolate provider but maybe someone knows a shorter solution :
app.provider('customInterpolateProvider', [
function $InterpolateProvider() {
var startSymbol = '{{';
var endSymbol = '}}';
this.startSymbol = function(value){
if (value) {
startSymbol = value;
return this;
} else {
return startSymbol;
}
};
this.endSymbol = function(value){
if (value) {
endSymbol = value;
return this;
} else {
return endSymbol;
}
};
this.$get = ['$parse', '$sce', function($parse, $sce) {
var startSymbolLength = startSymbol.length,
endSymbolLength = endSymbol.length;
function $interpolate(text, mustHaveExpression, trustedContext, allOrNothing) {
allOrNothing = !!allOrNothing;
var startIndex,
endIndex,
index = 0,
expressions = [],
parseFns = [],
textLength = text.length,
exp;
var getValue = function (value) {
return trustedContext ?
$sce.getTrusted(trustedContext, value) :
$sce.valueOf(value);
};
var stringify = function (value) {
if (value == null) {
return '';
}
switch (typeof value) {
case 'string':
break;
case 'number':
value = '' + value;
break;
default:
value = angular.toJson(value);
}
return value;
};
var parseStringifyInterceptor = function(value) {
try {
return stringify(getValue(value));
} catch(err) {
console.err(err.toString());
}
};
while(index < textLength) {
if ( ((startIndex = text.indexOf(startSymbol, index)) !== -1) &&
((endIndex = text.indexOf(endSymbol, startIndex + startSymbolLength)) !== -1) ) {
exp = text.substring(startIndex + startSymbolLength, endIndex);
expressions.push(exp);
parseFns.push($parse(exp, parseStringifyInterceptor));
index = endIndex + endSymbolLength;
} else {
break;
}
}
if (!expressions.length && !text.contains(startSymbol) && !text.contains(endSymbol)) {
expressions.push(text);
}
if (!mustHaveExpression) {
var compute = function(values) {
for(var i = 0, ii = expressions.length; i < ii; i++) {
if (allOrNothing && angular.isUndefined(values[i])) {
return;
}
expressions[i] = values[i];
}
return expressions.join('');
};
return angular.extend(function interpolationFn(context) {
var i = 0;
var ii = expressions.length;
var values = new Array(ii);
try {
if (ii && !parseFns.length) {
return expressions[0];
} else {
for (; i < ii; i++) {
values[i] = parseFns[i](context);
}
return compute(values);
}
} catch(err) {
console.err(err.toString());
}
}, {
exp: text,
expressions: expressions,
$$watchDelegate: function (scope, listener, objectEquality) {
var lastValue;
return scope.$watchGroup(parseFns, function interpolateFnWatcher(values, oldValues) {
var currValue = compute(values);
if (angular.isFunction(listener)) {
listener.call(this, currValue, values !== oldValues ? lastValue : currValue, scope);
}
lastValue = currValue;
}, objectEquality);
}
});
}
}
return $interpolate;
}];
}
]);
Lines below were added because in some cases I have a predefined text in my short template and I always want to render it :
if (!expressions.length && !text.contains(startSymbol) && !text.contains(endSymbol)) {
expressions.push(text);
}
if (ii && !parseFns.length) {
return expressions[0];
} else {

Related

Buffering in jPlayer

We use Icecast streaming server to jPlayer on our website and also used on our mobile app. I was trying to add an <intro> to the Icecast config, but when I do, it presents an issue on mobile devices. Whenever the phone has an interruption causing a temporary disconnect, like a call that comes in, the stream repeats what you started listening to when you first connected to the stream, after the intro plays again of course. For instance, if I start the stream listening to one show or song, a call comes in and ends, the intro plays on the reconnect and the stream plays from where I initially started listening.
I have played with Icecast queue and burst settings up and down and none at all, and tried different formats, the same result. I've also had conversations on a couple of other streaming related posts and have been told it seems the issue is with the client buffer and player, which I did not set up. I took a look at our stream-player.js, it is jPlayer 2.9.2 with the following tacked on to the end at line 3507:
;(function() {
var DOMParser, find, parse;
DOMParser = (typeof window !== "undefined" && window !== null ? window.DOMParser : void 0) || (typeof require === "function" ? require('xmldom').DOMParser : void 0) || function() {};
find = function(node, list) {
var attributes, childNode, childNodeName, childNodes, i, match, x, _i, _j, _ref, _ref1;
if (node.hasChildNodes()) {
childNodes = node.childNodes;
for (i = _i = 0, _ref = childNodes.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
childNode = childNodes[i];
childNodeName = childNode.nodeName;
if (/REF/i.test(childNodeName)) {
attributes = childNode.attributes;
for (x = _j = 0, _ref1 = attributes.length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; x = 0 <= _ref1 ? ++_j : --_j) {
match = attributes[x].nodeName.match(/HREF/i);
if (match) {
list.push({
file: childNode.getAttribute(match[0]).trim()
});
break;
}
}
} else if (childNodeName !== '#text') {
find(childNode, list);
}
}
}
return null;
};
parse = function(playlist) {
var doc, ret;
ret = [];
doc = (new DOMParser()).parseFromString(playlist, 'text/xml').documentElement;
if (!doc) {
return ret;
}
find(doc, ret);
return ret;
};
(typeof module !== "undefined" && module !== null ? module.exports : window).ASX = {
name: 'asx',
parse: parse
};
}).call(this);
(function() {
var COMMENT_RE, EXTENDED, comments, empty, extended, parse, simple;
EXTENDED = '#EXTM3U';
COMMENT_RE = /:(?:(-?\d+),(.+)\s*-\s*(.+)|(.+))\n(.+)/;
extended = function(line) {
var match;
match = line.match(COMMENT_RE);
if (match && match.length === 6) {
return {
length: match[1] || 0,
artist: match[2] || '',
title: match[4] || match[3],
file: match[5].trim()
};
}
};
simple = function(string) {
return {
file: string.trim()
};
};
empty = function(line) {
return !!line.trim().length;
};
comments = function(line) {
return line[0] !== '#';
};
parse = function(playlist) {
var firstNewline;
playlist = playlist.replace(/\r/g, '');
firstNewline = playlist.search('\n');
if (playlist.substr(0, firstNewline) === EXTENDED) {
return playlist.substr(firstNewline).split('\n#').filter(empty).map(extended);
} else {
return playlist.split('\n').filter(empty).filter(comments).map(simple);
}
};
(typeof module !== "undefined" && module !== null ? module.exports : window).M3U = {
name: 'm3u',
parse: parse
};
}).call(this);
(function() {
var LISTING_RE, parse;
LISTING_RE = /(file|title|length)(\d+)=(.+)\r?/i;
parse = function(playlist) {
var index, key, line, match, tracks, value, _, _i, _len, _ref;
tracks = [];
_ref = playlist.trim().split('\n');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
line = _ref[_i];
match = line.match(LISTING_RE);
if (match && match.length === 4) {
_ = match[0], key = match[1], index = match[2], value = match[3];
if (!tracks[index]) {
tracks[index] = {};
}
tracks[index][key.toLowerCase()] = value;
}
}
return tracks.filter(function(track) {
return track != null;
});
};
(typeof module !== "undefined" && module !== null ? module.exports : window).PLS = {
name: 'pls',
parse: parse
};
}).call(this);
;(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
window.PlayerUI = (function() {
function PlayerUI(container) {
var _this = this;
this.container = container;
this.onStateButtonClicked = __bind(this.onStateButtonClicked, this);
this.duration = null;
this.state = 'loading';
this.player = $('<div></div>');
this.container.append(this.player);
this.player.jPlayer({
ready: function() {
return _this.state = 'paused';
}
});
this.volume = this.container.find('.volume-slider input').rangeslider({
polyfill: false,
onSlide: function(position, value) {
return _this.player.jPlayer('volume', value / 100.0);
},
onSlideEnd: function(position, value) {
return _this.player.jPlayer('volume', value / 100.0);
}
});
this.hookEvents();
}
PlayerUI.prototype.hookEvents = function() {
var _this = this;
this.container.find('.state-button a').click(this.onStateButtonClicked);
this.player.on($.jPlayer.event.play, function() {
return _this.setState('playing');
});
this.player.on($.jPlayer.event.pause, function() {
return _this.setState('paused');
});
this.player.on($.jPlayer.event.durationchange, function(e) {
return _this.container.trigger('player.setProgressMax', {
maxValue: e.jPlayer.status.duration
});
});
this.player.on($.jPlayer.event.timeupdate, function(e) {
return _this.container.trigger('player.updateProgress', {
value: e.jPlayer.status.currentTime
});
});
return this.player.on($.jPlayer.event.ended, function(e) {
return _this.container.trigger('player.trackEnded');
});
};
PlayerUI.prototype.setState = function(state) {
this.state = state;
return this.container.find('.state-button a').removeClass().addClass("state-" + state);
};
PlayerUI.prototype.onStateButtonClicked = function(event) {
event.preventDefault();
switch (this.state) {
case 'playing':
return this.pause();
case 'paused':
return this.play();
default:
return this.noop();
}
};
PlayerUI.prototype.setMedia = function(media) {
this.pause();
return this.player.jPlayer('setMedia', media);
};
PlayerUI.prototype.setProgress = function(pct) {
return this.player.jPlayer('playHead', pct);
};
PlayerUI.prototype.play = function() {
this.setState('playing');
return this.player.jPlayer('play');
};
PlayerUI.prototype.pause = function() {
this.setState('paused');
return this.player.jPlayer('pause');
};
PlayerUI.prototype.noop = function() {
return null;
};
return PlayerUI;
})();
}).call(this);
;(function() {
window.PlaylistUI = (function() {
function PlaylistUI(container) {
var _this = this;
this.container = container;
this.container.hide();
$(window).on('playlistloader.finished', function(evt, data) {
return _this.setPlaylist(PlaylistLoader.coalescePlaylists(data.playlists));
});
}
PlaylistUI.prototype.loadM3UList = function(m3uList) {
return new PlaylistLoader(m3uList);
};
PlaylistUI.prototype.setPlaylist = function(playlistData) {
if (typeof playlistData.data !== 'undefined') {
this.name = playlistData.name;
playlistData = playlistData.data;
}
this.playlist = playlistData;
this.container.hide();
this.unhookEvents();
this.renderPlaylist();
this.container.show();
this.hookEvents();
return this.container.trigger('playlistui.ready', {
ui: this,
autoplay: false //this.getAutoplay()
});
};
PlaylistUI.prototype.unhookEvents = function() {
return this.container.find('.playlist-item').off('click.playlistUI', 'a');
};
PlaylistUI.prototype.hookEvents = function() {
var _this = this;
return this.container.find('.playlist-item').on('click.playlistUI', 'a', function(evt) {
var idx, item;
evt.preventDefault();
idx = $(evt.target).parent('.playlist-item').data('idx');
item = _this.getItemByIdx(idx);
return _this.select(item);
});
};
PlaylistUI.prototype.renderPlaylist = function() {
var idx, item, playlist, _i, _len, _ref, _results;
playlist = this.container.find('.playlist');
playlist.empty();
_ref = this.playlist;
_results = [];
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
item = _ref[idx];
_results.push(playlist.append(this.rowTemplate(item, idx)));
}
return _results;
};
PlaylistUI.prototype.rowTemplate = function(item, idx) {
return $("<li class=\"playlist-item\" data-idx=\"" + idx + "\">" + item.title + "</li>");
};
PlaylistUI.prototype.getAutoplay = function() {
var item, _i, _len, _ref;
_ref = this.playlist;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
item = _ref[_i];
if (item.autoplay) {
return item;
}
}
return null;
};
PlaylistUI.prototype.getItemByIdx = function(idx) {
return this.playlist[idx];
};
PlaylistUI.prototype.getRowForItem = function(item) {
var compare, found, idx, _i, _len, _ref;
_ref = this.playlist;
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
compare = _ref[idx];
if (compare === item) {
found = this.container.find(".playlist-item[data-idx=" + idx + "]");
return found;
}
}
return null;
};
PlaylistUI.prototype.getIndexForItem = function(item) {
var compare, idx, _i, _len, _ref;
_ref = this.playlist;
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
compare = _ref[idx];
if (item === compare) {
return idx;
}
}
return null;
};
PlaylistUI.prototype.findNext = function() {
var currentIndex, nextIndex;
currentIndex = this.getIndexForItem(this.current);
if (currentIndex === null) {
return null;
}
nextIndex = currentIndex + 1;
if (nextIndex >= this.playlist.length) {
return null;
}
return this.playlist[nextIndex];
};
PlaylistUI.prototype.select = function(item) {
if (item) {
this.current = item;
this.getRowForItem(item).addClass('selected').siblings().removeClass('selected');
return this.container.trigger('playlistui.select', {
ui: this,
item: item
});
}
};
PlaylistUI.prototype.selectFirst = function() {
return this.select(this.playlist[0]);
};
PlaylistUI.prototype.selectNext = function() {
var nextItem;
nextItem = this.findNext();
if (nextItem === null) {
return false;
}
this.select(nextItem);
return true;
};
return PlaylistUI;
})();
}).call(this);
;(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
window.PlaylistLoader = (function() {
function PlaylistLoader(playlists) {
this.playlists = playlists;
this.loadedItem = __bind(this.loadedItem, this);
this.loadPlaylists();
}
PlaylistLoader.prototype.loadPlaylists = function() {
var idx, item, _i, _len, _ref, _results,
_this = this;
this.loadCount = 0;
this.data = new Array(this.playlists.length);
_ref = this.playlists;
_results = [];
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
item = _ref[idx];
_results.push((function() {
var tmp;
tmp = idx;
return jQuery.ajax({
url: item
}).done(function(data) {
return _this.loadedItem(tmp, data);
});
})());
}
return _results;
};
PlaylistLoader.prototype.loadedItem = function(idx, data) {
var playlist;
playlist = M3U.parse(data);
this.data[idx] = playlist;
$(window).trigger('playlistloader.loadeditem', {
index: idx,
playlist: playlist
});
this.loadCount++;
if (this.loadCount === this.playlists.length) {
return this.finishedLoading();
}
};
PlaylistLoader.prototype.finishedLoading = function() {
return $(window).trigger('playlistloader.finished', {
playlists: this.data
});
};
PlaylistLoader.coalescePlaylists = function(playlistsLoaded) {
var fileEntry, output, playlist, _i, _j, _len, _len1;
output = [];
for (_i = 0, _len = playlistsLoaded.length; _i < _len; _i++) {
playlist = playlistsLoaded[_i];
for (_j = 0, _len1 = playlist.length; _j < _len1; _j++) {
fileEntry = playlist[_j];
output.push(fileEntry);
}
}
return output;
};
return PlaylistLoader;
})();
}).call(this);
;(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
window.StreamUI = (function() {
function StreamUI(selector, streamPlaylists) {
this.selector = selector;
this.streamPlaylists = streamPlaylists;
this.playlistSelect = __bind(this.playlistSelect, this);
this.playlistReady = __bind(this.playlistReady, this);
this.container = jQuery(this.selector);
this.playlist = new PlaylistUI(this.container.find('.playlist-ui'));
this.player = new PlayerUI(this.container.find('.player-ui'));
this.hookEvents();
this.playlist.loadM3UList(this.streamPlaylists);
}
StreamUI.prototype.hookEvents = function() {
var playlistUI;
playlistUI = this.container.find('.playlist-ui');
playlistUI.on('playlistui.ready', this.playlistReady);
return playlistUI.on('playlistui.select', this.playlistSelect);
};
StreamUI.prototype.playlistReady = function(evt, eventinfo) {
if (eventinfo.autoplay !== null) {
return eventinfo.ui.select(eventinfo.autoplay);
} else {
return eventinfo.ui.selectFirst();
}
};
StreamUI.prototype.playlistSelect = function(evt, eventinfo) {
this.player.setMedia({
mp3: eventinfo.item.file
});
return this.player.play();
};
return StreamUI;
})();
}).call(this);
Although I'm primarily a linux developer with most of my programming experience in Perl and PHP, and do know jQuery pretty well dealing with my web development, I'm surely a novice when it comes to jPlayer or even audio streaming. I was hoping someone could spot something in hte code above that could contribute to the issue we have when adding an intro to our Icecast 2.4.4 stream?
Our streams are available at the URL below, I have the intro on our HD4 stream at the moment.
streaming player
The issue is easily duplicated by starting the stream and listening a bit until the song changes, call the phone letting it interrupt the stream, then hang up. This will cause the first song listened to be playing again after the intro.
I believe the codec is a match, I did have an issue getting the intro to work until I formatted as MP3 128Kbps bit rate 44.1KHz sampling and 2 channel stereo. Here is the intro file info:
user#stream:~$ mediainfo /usr/share/icecast2/web/high_quality.mp3
General
Complete name : /usr/share/icecast2/web/high_quality.mp3
Format : MPEG Audio
File size : 138 KiB
Duration : 8s 777ms
Overall bit rate mode : Constant
Overall bit rate : 128 Kbps
Writing library : LAME3.99r
Audio
Format : MPEG Audio
Format version : Version 1
Format profile : Layer 3
Mode : Joint stereo
Mode extension : MS Stereo
Duration : 8s 803ms
Bit rate mode : Constant
Bit rate : 128 Kbps
Channel(s) : 2 channels
Sampling rate : 44.1 KHz
Compression mode : Lossy
Stream size : 137 KiB (100%)
Writing library : LAME3.99r
Encoding settings : -m j -V 4 -q 3 -lowpass 17 -b 128
Sounds like the underlying browser cache kicks in and forces replay of something held in memory. Browsers are 'awesome' like that under some circumstances and will then go out of their way to ignore no-cache directives and other things.
One way to make sure the browser doesn't try to play cache shenanigans is to add a "cache buster". Essentially a query string ( /stream?foo=bar ), which makes the browser engine think it's dynamically generated content and discard its cache; cf. https://www.keycdn.com/support/what-is-cache-busting .
At this time your Icecast server doesn't seem to answer any requests. So I can't look into the specifics on your side.

How to make a filter attached to $scope of a controller (angular)?

I wrote a litlle program in angular using ui-select. And I wrote a filter that do an OR search in different fields.
Here is my original filter : (whic works perfectly)
app.filter('orSearchFilter', function($parse) {
return function(items, props) {
var out = [];
if (angular.isArray(items)) {
var keys = Object.keys(props);
items.forEach(function(item) {
var itemMatches = false;
for (var i = 0; i < keys.length; i++) {
var prop = $parse(keys[i])(item);
var text = props[keys[i]].toLowerCase();
if (prop && prop.toString().toLowerCase().indexOf(text) !== -1) {
itemMatches = true;
break;
}
}
if (itemMatches) {
out.push(item);
}
});
} else {
out = items;
}
return out;
};
});
And here is my original plunker (which works) : http://plnkr.co/edit/IdqO5dtLXmC6gtqLxRdP?p=preview
The problem is that my filter won't be generic and I will use it in my final code just inside its controller. So, I want to attach it.
Here is the new version of the filter which is attached to the controller : (I didn't do any change...)
$scope.orSearchFilter = function($parse) {
return function(items, props) {
var out = [];
if (angular.isArray(items)) {
var keys = Object.keys(props);
items.forEach(function(item) {
var itemMatches = false;
for (var i = 0; i < keys.length; i++) {
var prop = $parse(keys[i])(item);
var text = props[keys[i]].toLowerCase();
if (prop && prop.toString().toLowerCase().indexOf(text) !== -1) {
itemMatches = true;
break;
}
}
if (itemMatches) {
out.push(item);
}
});
} else {
out = items;
}
return out;
};
};
Finally, in my html, I called this new filter by using this line :
<ui-select-choices group-by="groupByLetter"
repeat="contract in (contracts |
filter : orSearchFilter(contracts, {id.id: $select.search, policy.info.name : $select.search } ) |
orderBy: 'name') track by contract.name">
{{contract.name}} - {{contract.value}} ---- {{contract.id.id}} *** {{contract.policy.info.name }}
</ui-select-choices>
Can you help me please to fix that problem and help me to attach this filter to the scope of the controller?
Thank you !
Use the $filter service to programmatically fetch your filter function.
//Don't forget to inject $filter in your controller ofcourse
$scope.orSearchFilter = $filter('orSearchFilter');
Attach the filter directly to scope:
/* REMOVE constructor function
$scope.orSearchFilter = function($parse) {
return function(items, props) {
*/
// INSTEAD
$scope.orSearchFilter = function(items, props) {
var out = [];
//...
return out;
};
//};
Of course, also be sure that $parse is added to the injectables of the controller construction function.

Data no longer being pushed inside an array after moving another (related) array into a .json

I had this plnkr, working with an array. It had some problems (data being pushed into two arrays), but it was doing its job. Now I moved that array into a .json, and pizze.n is no longer being pushed into $scope.pizze nor $scope.orderList. I guess at this point a good solution would be to create a second .json and use it as my new orderList, or am I wrong? By the way, how do I do it or a better solution? Here's the updated code.
app.factory('elencoPizze', function($http) {
return {
getdata: function() {
return $http.get('json/pizze.json');
}
};
});
app.controller('showcaseCtrl', function($scope, $timeout, elencoPizze) {
$scope.pizze = [];
elencoPizze.getdata().success(function(data) {
$scope.pizze = data;
});
return;
$scope.orderList = [];
$scope.add = function(pizza) {
$scope.placeholder = 'Aggiungi altro?';
$scope.empty = false;
if ($scope.orderList.indexOf(pizza) === -1) {
pizza.n = 1;
return $scope.orderList.push(pizza);
} else {
return pizza.n += 1;
}
};
return $scope.remove = function(pizza) {
var lastRemoving;
if (pizza.n <= 1) {
pizza.n = 0;
lastRemoving = function() {
return $timeout((function() {
var index;
pizza.n = '';
index = $scope.orderList.indexOf(pizza);
$scope.orderList.splice(index, 1);
if ($scope.orderList.length === 0) {
$scope.example();
return $scope.empty = true;
}
}), 300);
};
return lastRemoving();
} else {
return pizza.n -= 1;
}
};
});
// ---
// generated by coffee-script 1.9.2
You haven't returned a promise from your factory. Change to:
return {
getdata: function() {
return $http.get('json/pizze.json').then(function(data) {
return data;
})
}
};

make filter based on data from localstorage in the filter function

I'm new with the Ionic-angular.js, I hope that someone will help me to resolve this problem
First, here is the code
favorites.html
...
<ion-item ng-repeat="dish in dishes | favoriteFilter:favorites" href="#/app/menu/{{dish.id}}" class="item-thumbnail-left" on-swipe-left="deleteFavorite(dish.id)">
<img ng-src="{{baseURL+dish.image}}" on-swipe-left="deleteFavorite(dish.id)">
<h2>{{dish.name}}
<ion-delete-button class="ion-minus-circled"
ng-click="deleteFavorite(dish.id)">
</ion-delete-button>
</ion-item>
...
services.js
.factory('favoriteFactory', ['$resource', 'baseURL', function ($resource, baseURL) {
var favFac = {};
var favorites = [];
favFac.addToFavorites = function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index)
return;
}
favorites.push({id: index});
};
favFac.deleteFromFavorites = function (index) {
for (var i = 0; i < favorites.length; i++) {
if (favorites[i].id == index) {
favorites.splice(i, 1);
}
}
}
favFac.getFavorites = function () {
return favorites;
};
return favFac;
}])
.factory('$localStorage', ['$window', function($window) {
return {
store: function(key, value) {
$window.localStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
storeObject: function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function(key,defaultValue) {
return JSON.parse($window.localStorage[key] || defaultValue);
}
//removeItem: function(key){
// $window.localStorage.removeItem(key);
//}
}
controller.js
.filter('favoriteFilter', 'localStorage', function (localStorage) {
if(localStorage.getItem('favorites')!=undefined)
{
var out = [];
return out;
}
else{
return function (dishes) {
var old_favorite = JSON.parse($localStorage.get('favorites'));
var leng = Object.keys(old_favorite).length;
console.log(leng);
var out = [];
for (var i = 0; i < leng; i++) {
for (var j = 0; j < dishes.length; j++) {
if (dishes[j].id === favorites[i].id)
out.push(dishes[j]);
}
}
return out;
}}
});
For the example, there was an array inside the localstorage like this
Key : favorites
value : [{"id":1},{"id":2},{"id":0}]
So, the logic is, I compare the ID between from database and the localstorage based on the ID with the filter function
If the ID is same, so the data from the database gonna push it into the favorites menu.
but, it couldn't show in the favorites menu, and when I checked on the console, it said that
[ng:areq] Argument 'fn' is not a function, got string
Did I make something wrong on here? Or maybe I put a wrong method on here?
Thank you in advance.
The error you present seems to be a syntax problem. You are missing the array brackets.
.filter('favoriteFilter', ['$localStorage', function (localStorage) {
if(localStorage.getItem('favorites')!=undefined)
{
var out = [];
return out;
}
else
{
return function (dishes) {
var old_favorite = JSON.parse($localStorage.get('favorites'));
var leng = Object.keys(old_favorite).length;
console.log(leng);
var out = [];
for (var i = 0; i < leng; i++) {
for (var j = 0; j < dishes.length; j++) {
if (dishes[j].id === favorites[i].id)
out.push(dishes[j]);
}
}
return out;
}
};
}]);
I didn't check your logic function, this will be the answer to solve your error.
Try a different approach:
As you already have addToFavorites and deleteFromFavorites functions, all you have to do is simply follow these 3 steps:
When defining you 'favorites' array, simply assign it as follows:
var favorites = JSON.parse(window.localStorage['favorites'] || []);
In your addToFavorites function, after you push the added item to your array, add: window.localStorage['favorites'] = JSON.stringify(favorites);
In your deleteFromFavorites function, after you splice your array, add: window.localStorage['favorites'] = JSON.stringify(favorites);
You should be good to go with these three super simple steps!

checkbox filter for json array in Angularjs

I have create a filter but this filter is not working with array inside array.
'http://plnkr.co/edit/oygy79j3xyoGJmiPHm4g?p=info'
Above plkr link is working demo.
app.filter('checkboxFilter', function($parse) {
var cache = { //create an cache in the closure
result: [],
checkboxData: {}
};
function prepareGroups(checkboxData) {
var groupedSelections = {};
Object.keys(checkboxData).forEach(function(prop) {
//console.log(prop);
if (!checkboxData[prop]) {
return;
} //no need to create a function
var ar = prop.split('=');
//console.log("ar is - "+ar);
if (ar[1] === 'true') {
ar[1] = true;
} //catch booleans
if (ar[1] === 'false') {
ar[1] = false;
} //catch booleans
/* replacing 0 with true for show all offers */
if(ar[0]=='SplOfferAvailable.text'){
ar[1]='true';
}else{
}
//make sure the selection is there!
groupedSelections[ar[0]] = groupedSelections[ar[0]] || [];
//at the value to the group.
groupedSelections[ar[0]].push(ar[1]);
});
return groupedSelections;
}
function prepareChecks(checkboxData) {
var groupedSelections = prepareGroups(checkboxData);
var checks = [];
//console.log(groupedSelections);
Object.keys(groupedSelections).forEach(function(group) {
//console.log("groupedSelections- "+groupedSelections);
//console.log("group- "+group);
var needToInclude = function(item) {
//console.log("item- "+item);
// use the angular parser to get the data for the comparson out.
var itemValue = $parse(group)(item);
var valueArr = groupedSelections[group];
//console.log("valueArr- "+valueArr);
function checkValue(value) { //helper function
return value == itemValue;
}
//check if one of the values is included.
return valueArr.some(checkValue);
};
checks.push(needToInclude); //store the function for later use
});
return checks;
}
return function(input, checkboxData, purgeCache) {
if (!purgeCache) { //can I return a previous 'run'?
// is the request the same as before, and is there an result already?
if (angular.equals(checkboxData, cache.checkboxData) && cache.result.length) {
return cache.result; //Done!
}
}
cache.checkboxData = angular.copy(checkboxData);
var result = []; // this holds the results
//prepare the checking functions just once.
var checks = prepareChecks(checkboxData);
input.every(function(item) {
if (checks.every(function(check) {
return check(item);
})) {
result.push(item);
}
return result.length < 10000000; //max out at 100 results!
});
cache.result = result; //store in chache
return result;
};
});
above code is for check box filter.
when i click on checkbox called "Availability" it does not filter the result.
Please help me out.
Thanks.
I think that the way you are navigating through json is wrong because if you put in this way it works
"Location": "Riyadh",
"AvlStatus": "AVAILABLE"
"Rooms": {.....
You have to go in some way through Rooms and right now I think you're not doing that

Resources