I have a function tied to the factory for my controller:
fac.GetDailyCountersList = function () {
return $http.get('/Data/GetDailyCountersList')
}
Inside the controller, here's where the function is called:
$scope.DailyCounters = null;
DailyCounterService.GetDailyCountersList().then(function (d) {
$scope.DailyCounters = d.data;
}, function (error) {
alert('Error!');
});
Based on this, if I were to output the variable on the html page, this would show:
[{"Id":1,"MIDay":"16","MITime":"900","MICounter":0},
{"Id":2,"MIDay":"16","MITime":"915","MICounter":1},
{"Id":3,"MIDay":"16","MITime":"930","MICounter":0},
{"Id":4,"MIDay":"17","MITime":"945","MICounter":0},
{"Id":5,"MIDay":"17","MITime":"1000","MICounter":0},
{"Id":6,"MIDay":"17","MITime":"1015","MICounter":52},
{"Id":7,"MIDay":"18","MITime":"1030","MICounter":2},
{"Id":8,"MIDay":"18","MITime":"1045","MICounter":3},
{"Id":9,"MIDay":"18","MITime":"1100","MICounter":0}]
My question is how to take this data and create other arrays based on one of the properties of the Json data.
For example, how would I put arrays
{"Id":1,"MIDay":"16","MITime":"900","MICounter":0},
{"Id":2,"MIDay":"16","MITime":"915","MICounter":1},
{"Id":3,"MIDay":"16","MITime":"930","MICounter":0}
Into a new array "ArrayDay16"? And the rest into their respective arrays as well.
I was thinking about doing it this way:
var myArray = [];
if (d.data['MIDay'] == '16')
myArray.push(d.data);
But this is incorrect/fails. Any ideas for an efficient solution?
Use the filter function to populate new arrays. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
//This will populate "someArray" with only the data that has MIDAY = 16
DailyCounterService.GetDailyCountersList().then(function (d) {
$scope.someArray = d.data.filter(function(ele) {
return ele.MIDAY === '16';
});
}
You can use the filter function:
var daySixteen = data.filter(function (d) { return d.MIDay === "16"; });
you can try the next:
d.data.foreach(function(item){
if(item.MIDay == 16)
myArray.push(d.data);
});
If you want to be efficient you should do this on the back end with constraint(s). It's not the browsers job.
Although, if you still want it to filter it on the front end you could use the filter-function with some lamdba expressions
var newList = oldList.filter(i => i["MIDay"] == "16");
Related
I'm trying to filter a JSON array using another JSON array criteria that I have using (filter).
Here is my code:
function filterArray(object, criteria){
return object.filter(function(obj){
for(var i=0;i<criteria.length;i++){
let criteriaEle = criteria[i];
return Object.keys(criteriaEle).forEach(function(key){
if(obj[key] == criteriaEle[key]){
return obj;
}
})
}
})
}
For example:
object = [{type:1,company:1,color:0,name:a},{type:2,company:1,color:0,name:b},{type:1,company:3,color:0,name:c},{type:4,company:1,color:0,name:d},{type:1,company:1,color:1,name:e}]
criteria = [{type:1,company:1,color:0},{type:1,company:1,color:1}]
So if I give these two arrays to the function it should return
obj = [{{type:1,company:1,color:0,name:a},{type:1,company:1,color:1,name:e}}]
I'm not sure where am I going wrong in this. Please help.
Update:
Also, I do not want to use obj.type or obj.company or object.color as parameters to search as I want to make my code maintainable and do not want to come and update it later if in future more criteria's are added.
const data = [{type:1,company:1,color:0,name:'a'},{type:2,company:1,color:0,name:'b'},{type:1,company:3,color:0,name:'c'},{type:4,company:1,color:0,name:'d'},{type:1,company:1,color:1,name:'e'}];
const criteria = [{type:1,company:1,color:0},{type:1,company:1,color:1}];
function checkCriteria(obj) {
return criteria.some(criterion => {
for (const key in criterion) {
if (criterion[key] !== obj[key]) {
return false;
}
}
return true;
});
}
const filtered = data.filter(checkCriteria);
console.log('Filtered array: ', filtered);
Here is one solution.
Here are some references
Array.some
Array.filter
Based on the comment, adding another snippet to explain the concept of closures.
const data = [{type:1,company:1,color:0,name:'a'},{type:2,company:1,color:0,name:'b'},{type:1,company:3,color:0,name:'c'},{type:4,company:1,color:0,name:'d'},{type:1,company:1,color:1,name:'e'}];
function createCriteriaValidationFunction(criteria) {
return function checkCriteria(obj) {
return criteria.some(criterion => {
for (const key in criterion) {
if (criterion[key] !== obj[key]) {
return false;
}
}
return true;
});
}
}
const criteria = [{type:1,company:1,color:0},{type:1,company:1,color:1}];
const filtered = data.filter(createCriteriaValidationFunction(criteria));
console.log('Filtered array: ', filtered);
It's the same concept as before, however, criteria was defined in the file. This time, criteria can be defined outside and can be passed in to the function. The trick is to create the checkCriteria function on the fly with criteria passed in and available in the closure. In both cases, criteria variable is available in the scope in which checkCriteria is executed.
I try to set up this example https://github.com/AngularClass/angular-websocket#usage
Here is my code
App.factory('MyData', function($websocket, $q) {
var dataStream = $websocket('wss://url');
var collection = [];
dataStream.onMessage(function(message) {
var result = JSON.parse(message.data);
console.log(result);
collection = result;
});
var methods = {
collection: collection,
get: function() {
dataStream.send(JSON.stringify({
api: "volume",
date: "2017-02-01",
interval: 600
}));
}
};
return methods; });
In my controller I wrote:
$interval(function () {
console.log(MyData.collection);
}, 1000);
The problem is that I don't receive any values, however on message arrive I see console log, so websocket itself is obviously alive. If I change collection.push(result) (like in example) I receive constantly growing array. I need only the last value, however. Why collection = result is wrong ?
var collection = []; instantiates a new array and its reference is stored in the variable collection. Then, this reference is assigned to methods.collection and, hence, MyData.collection. However, with JSON.parse a new array is instantiated. collection = result; overwrites the original reference with the reference of the new array. But MyData.collection still holds the reference to original array.
So, there are two ways to encounter the problem:
Don't overwrite the reference to the original array. push is good, but before, you need to clear the array in order to only show the last value.
collection.splice(0, collection.length);
collection.push(result);
However, that would be an array in an array. You probably need to push the values individually (Array.concat will create a new array, too):
collection.splice(0, collection.length);
result.forEach(function(value) {
collection.push(value);
});
Assign the reference of the new array directly to methods.collection. In this case, no extra variable collection is needed.
App.factory('MyData', function($websocket, $q) {
var dataStream = $websocket('wss://url');
var methods = {
collection: [],
get: function() {
dataStream.send(JSON.stringify({
api: "volume",
date: "2017-02-01",
interval: 600
}));
}
};
dataStream.onMessage(function(message) {
var result = JSON.parse(message.data);
console.log(result);
methods.collection = result;
});
return methods;
});
request = myService.getCases();
request.then(
function(payload) {
$scope.cases = payload.data;
var time = Math.floor((Date.now() - Date.parse($scope.cases[i].date_case_modified))/(60000*60*24));
$scope.cases.duration.push(time);
}
});
Inside the controller I am trying to tack on the cases.duration onto the cases object but it wont add it onto the object that is returned. Any ideas?
I think you just need to introduce a forEach as shown here:
request = myService.getCases();
request.then(
function(payload) {
$scope.cases = payload.data;
angular.forEach($scope.cases, function (el) {
var time = Math.floor((Date.now() - Date.parse(el.date_case_modified))/(60000*60*24));
el.duration = time;
});
}
});
Hope this helps
Here's the fiddle
I have a tree structure of clients that I'm binding to an unordered list, and each client may or may not have a SubClient. I've added the ability to select an item in the list but now I cannot figure out how to loop through the tree and get an array of all the selected items.
In particular, this beast is where I'm having problems:
cp.GetSelectedClientsArray = function (clients) {
var selected = [];
ko.utils.arrayForEach(clients, function (item) {
if (item.IsSelected()) {
selected.push(item.ClientName());
}
ko.utils.arrayForEach(item.SubClient(), function (subItem) {
if (subItem.IsSelected()) {
selected.push(subItem.ClientName());
}
cp.GetSelectedClientsArray(subItem);
});
});
console.log(selected);
return selected;
};
After I toggle the IsSelected() observable I'd like to loop through the list and get an array with only the selected items.
I've written and re-written this more than a few times, and could really use some help. I'm not even sure how to write a recursive function that would work, because every time I call the function from within, it wipes out my "selected" array and setting it as a global variable keeps any item that has ever been selected in the array.
Any help is appreciated
Here's recursive version
cp.GetSelectedClientsArray = function (clients) {
var result = [];
function GetSelected(clients){
for (var i in clients){
if(clients[i].IsSelected()){
result.push(clients[i].ClientName());
}
GetSelected(clients[i].SubClient());
}
}
GetSelected(clients);
console.log(result);
return result;
};
See jsfiddle
If I understand correctly what you are trying to do, why not try something like this?
_self.SelectedClient = ko.observableArray();
_self.ToggleSelectedUser = function (data, event) {
var toggle = !data.IsSelected();
data.IsSelected(toggle);
if(toggle === true)
{
_self.SelectedClient.push(data.ClientName());
}
else
{
_self.SelectedClient.remove(data.ClientName());
}
Why walk on the clients list recursively when you can simply create a SelectedClients field on the View-Model, and remove/add to it upon toggling?
For example:
_self.SelectedClients = ko.observableArray([]);
_self.ToggleSelectedUser = function (data, event) {
var toggle = !data.IsSelected();
data.IsSelected(toggle);
if (toggle)
_self.SelectedClients.push(data.ClientName());
else
_self.SelectedClients.remove(data.ClientName());
};
See Fiddle.
Update:
As per your comment, when you do need to walk recursively on the tree, you can try something like this:
function AggregateSelectedClients(clients, results)
{
results = results || [];
if (!clients || !clients.length) return results;
ko.unwrap(clients).forEach(function(v, i)
{
var selected = ko.unwrap(v.IsSelected);
var subClients = ko.unwrap(v.SubClient);
if (selected)
results.push(ko.unwrap(v.ClientName));
if (subClients && subClients.length)
AggregateSelectedClients(subClients, results);
});
return results;
}
The selected children have to be added to the parent selection.
ko.utils.arrayForEach(item.SubClient(), function (subItem) {
if (subItem.IsSelected()) {
selected.push(subItem.ClientName());
}
//cp.GetSelectedClientsArray(subItem);
selected.push.apply(selected, cp.GetSelectedClientsArray(subItem));
});
See fiddle
I hope it helps.
I have a JS object declared like so
$scope.items = {};
I also have a $http request that fills this object with items. I would like to detect if this item is empty, it appears that ng-show supports this... I enter
ng-show="items"
and magically it works,I would also like to do the same from a controller but i can't seem to get it to work, it appears I may have to iterate over the object to see if it has any properties or use lodash or underscore.
Is there an alternative?
I did try
alert($scope.items == true);
but it always returns false , when the object is created and when populated with $http, so its not working that way.
Or you could keep it simple by doing something like this:
alert(angular.equals({}, $scope.items));
In a private project a wrote this filter
angular.module('myApp')
.filter('isEmpty', function () {
var bar;
return function (obj) {
for (bar in obj) {
if (obj.hasOwnProperty(bar)) {
return false;
}
}
return true;
};
});
usage:
<p ng-hide="items | isEmpty">Some Content</p>
testing:
describe('Filter: isEmpty', function () {
// load the filter's module
beforeEach(module('myApp'));
// initialize a new instance of the filter before each test
var isEmpty;
beforeEach(inject(function ($filter) {
isEmpty = $filter('isEmpty');
}));
it('should return the input prefixed with "isEmpty filter:"', function () {
expect(isEmpty({})).toBe(true);
expect(isEmpty({foo: "bar"})).toBe(false);
});
});
regards.
Use an empty object literal isn't necessary here, you can use null or undefined:
$scope.items = null;
In this way, ng-show should keep working, and in your controller you can just do:
if ($scope.items) {
// items have value
} else {
// items is still null
}
And in your $http callbacks, you do the following:
$http.get(..., function(data) {
$scope.items = {
data: data,
// other stuff
};
});
another simple one-liner:
var ob = {};
Object.keys(ob).length // 0
If you couldn't have the items OBJ equal to null, you can do this:
$scope.isEmpty = function (obj) {
for (var i in obj) if (obj.hasOwnProperty(i)) return false;
return true;
};
and in the view you can do:
<div ng-show="isEmpty(items)"></div>
You can do
var ob = {};
Object.keys(ob).length
Only if your browser supports ECMAScript 5. For Example, IE 8 doesn't support this feature.
See http://kangax.github.io/compat-table/es5/ for more infos
if( obj[0] )
a cleaner version of this might be:
if( typeof Object.keys(obj)[0] === 'undefined' )
where the result will be undefined if no object property is set.
Or, if using lo-dash: _.empty(value).
"Checks if value is empty. Arrays, strings, or arguments objects with a length of 0 and objects with no own enumerable properties are considered "empty"."
Check Empty object
$scope.isValid = function(value) {
return !value
}
you can check length of items
ng-show="items.length"