Related
Need to remove duplication in array of objects and merge array with union USING JS.
trying to filter array
Just wanted to merge array["INTERFACE"] on the basis of APP_ID. and remove duplicate records.
unfiltered unmerged array!
var data = [
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC",
"URL" : "/SummaryCopc",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "05",
"NAME" : "SUMMARY",
"URL" : "/Summary",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC 2",
"URL" : "/SummaryCopc2",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD 2",
"URL" : "/Dashboard 2",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
}
];
wanted result
[
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "05",
"NAME" : "SUMMARY",
"URL" : "/Summary",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC",
"URL" : "/SummaryCopc",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
}, {
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD 2",
"URL" : "/Dashboard2",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC 2",
"URL" : "/SummaryCopc2",
"STATUS" : "A"
}
]
}
]
trying to filter array
Just wanted to merge array["INTERFACE"] on the basis of APP_ID. and remove duplicate records.
Here is a slightly elastic solution relying on function generators that allows dynamic aggregation.
The logic followed by the below example is that in your data input, the unique key of the main objects is APP_ID. Next, the aggregation rule of each APP_ID is that it should follow another aggregation rule for INTERFACE. Each interface, in fact, has a unique NAME, explaining why you have multiple "07" and "06" in your result sample.
The code explanation is documented in the code itself.
var data = [
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC",
"URL" : "/SummaryCopc",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "05",
"NAME" : "SUMMARY",
"URL" : "/Summary",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC 2",
"URL" : "/SummaryCopc2",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD 2",
"URL" : "/Dashboard 2",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
}
];
// Aggregate duplicates with a common uniqueKey, invoking the aggregateExpression callback for each pair.
function* aggregateDuplicates(arr, uniqueKey, aggregateExpression) {
const aggregateGroups = arr.reduce((acc,next) => {
acc[next[uniqueKey]] = acc[next[uniqueKey]] || [];
return acc[next[uniqueKey]].push(next), acc;
}, {});
// loop items.
for (var [_, entries] of Object.entries(aggregateGroups)) {
// Aggregate results following the aggregateExpression.
yield Object.assign({}, entries.reduce((acc, next) => aggregateExpression(acc, next)));
}
}
// Aggregate duplicates of data, whose unique key is APP_ID.
const res = [...aggregateDuplicates(data, 'APP_ID', (a,b) => {
// In order to properly aggregate the INTERFACE property, acquire the set of entires interfaces of two items with the same APP_ID.
var interfacesSet = [...a.INTERFACE, ...b.INTERFACE];
// Finally, spread common values between them, then aggregate the INTERFACE property by its unique NAME key.
return Object.assign(a, b, {
INTERFACE: [...aggregateDuplicates(interfacesSet, 'NAME', (c,d) => {
// For that NAME property, just assign the values of both objects, nothing more nothing less.
return Object.assign(c,d)
})]
});
})];
console.log(res);
SIDE NOTE: The sorting to the INTERFACE property is not applied, this is a plus, but I don't think it's mandatory as long as the output data is effectively correct.
// Create the array of APP_ID
let idArr = data.map(val => val.APP_ID)
// Remove duplicate APP_ID
idArr = [...new Set(idArr)];
// Filter data according to unique APP_IDs
let newArr = idArr.map(val => {
return data.filter(value => value.APP_ID == val)[0]
})
console.log(newArr);
Solution
Here is a quick solution that I was able to come up with,
Note that this solution takes care of union of INTERFACES within the same APP_ID
const data = [
{
APP_ID: '1001',
INTERFACE: [
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'A',
},
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD',
URL: '/Dashboard',
STATUS: 'A',
},
{
INTERFACE_ID: '06',
NAME: 'SUMMARY COPC',
URL: '/SummaryCopc',
STATUS: 'A',
},
],
},
{
APP_ID: '1002',
INTERFACE: [
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD',
URL: '/Dashboard',
STATUS: 'A',
},
{
INTERFACE_ID: '08',
NAME: 'BIOMETRIC',
URL: '/Biometric',
STATUS: 'A',
},
],
},
{
APP_ID: '1001',
INTERFACE: [
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'A',
},
{
INTERFACE_ID: '05',
NAME: 'SUMMARY',
URL: '/Summary',
STATUS: 'A',
},
{
INTERFACE_ID: '06',
NAME: 'SUMMARY COPC 2',
URL: '/SummaryCopc2',
STATUS: 'A',
},
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD 2',
URL: '/Dashboard 2',
STATUS: 'A',
},
],
},
{
APP_ID: '1002',
INTERFACE: [
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD',
URL: '/Dashboard',
STATUS: 'A',
},
{
INTERFACE_ID: '08',
NAME: 'BIOMETRIC',
URL: '/Biometric',
STATUS: 'A',
},
],
},
];
const result = {};
data.forEach(elem => {
if (!result[elem.APP_ID]) {
result[elem.APP_ID] = {};
result[elem.APP_ID].APP_ID = elem.APP_ID;
result[elem.APP_ID].INTERFACE = elem.INTERFACE;
} else {
const interfaces = result[elem.APP_ID].INTERFACE;
for (const elemInterface of elem.INTERFACE) {
if (
!interfaces.some(inter => {
return elemInterface.INTERFACE_ID === inter.INTERFACE_ID;
})
) {
interfaces.push(elemInterface);
}
}
}
});
console.log('TCL: results', Object.values(result));
Assumptions:
Since you stated that you wanted union of the interfaces within the same APP_ID I assume that there should be no duplicate interfaces
Example: If there is an interface array A1,
[
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'A',
},
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD',
URL: '/Dashboard',
STATUS: 'A',
},
{
INTERFACE_ID: '06',
NAME: 'SUMMARY COPC',
URL: '/SummaryCopc',
STATUS: 'A',
},
]
and another interface array A2,
[
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'A',
},
{
INTERFACE_ID: '05',
NAME: 'SUMMARY',
URL: '/Summary',
STATUS: 'A',
},
{
INTERFACE_ID: '06',
NAME: 'SUMMARY COPC 2',
URL: '/SummaryCopc2',
STATUS: 'A',
},
{
INTERFACE_ID: '07',
NAME: 'DASHBOARD 2',
URL: '/Dashboard 2',
STATUS: 'A',
},
]
Then A1 union A2 would be,
[
{
"INTERFACE_ID": "01",
"NAME": "CIF OPENNING",
"URL": "/CusIdInfo",
"STATUS": "A"
},
{
"INTERFACE_ID": "07",
"NAME": "DASHBOARD",
"URL": "/Dashboard",
"STATUS": "A"
},
{
"INTERFACE_ID": "06",
"NAME": "SUMMARY COPC",
"URL": "/SummaryCopc",
"STATUS": "A"
},
{
"INTERFACE_ID": "05",
"NAME": "SUMMARY",
"URL": "/Summary",
"STATUS": "A"
}
]
Note that there are no duplicates.
My second assumption is that when you check for duplicity in interfaces you use the INTERFACE_ID and not the whole interface object.
Example: Assume an interface object I1,
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'A',
}
and another interface object I2 with the only difference being that it has a different status value which is 'B',
{
INTERFACE_ID: '01',
NAME: 'CIF OPENNING',
URL: '/CusIdInfo',
STATUS: 'B',
}
I am still considering I1 and I2 to be duplicates based on their INTERFACE_ID.
Suppose you want to compare entire object for duplicity then update your question and I shall change the answer to factor it in
Came up with this solution. Hope this works for you.
NOTE : In the expected result array you have 2 interface objects with same ID so i am assuming that two interface are duplicate only if all their properties match.
var data = [
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC",
"URL" : "/SummaryCopc",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1001",
"INTERFACE" : [
{
"INTERFACE_ID" : "01",
"NAME" : "CIF OPENNING",
"URL" : "/CusIdInfo",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "05",
"NAME" : "SUMMARY",
"URL" : "/Summary",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "06",
"NAME" : "SUMMARY COPC 2",
"URL" : "/SummaryCopc2",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD 2",
"URL" : "/Dashboard 2",
"STATUS" : "A"
}
]
},
{
"APP_ID" : "1002",
"INTERFACE" : [
{
"INTERFACE_ID" : "07",
"NAME" : "DASHBOARD",
"URL" : "/Dashboard",
"STATUS" : "A"
},
{
"INTERFACE_ID" : "08",
"NAME" : "BIOMETRIC",
"URL" : "/Biometric",
"STATUS" : "A"
}
]
}
];
isInterfaceDuplicate = function(interface, app_id) {
var keys = Object.keys(interface);
var isDuplicate = false;
app_map[app_id].forEach(app_obj => {
var matched = true;
keys.forEach(key => {
if (interface[key] !== app_obj[key]) {
matched = false;
return;
}
});
if (matched) {
isDuplicate = true;
return;
}
});
return isDuplicate;
};
/* Create a mapping for APP_ID and INTERFACE */
var app_map = {};
data.forEach(app_obj => {
// If APP_ID is not present in map, then add in map directly.
if (!app_map[app_obj.APP_ID]) {
app_map[app_obj.APP_ID] = [...app_obj.INTERFACE];
return;
}
// If APP_ID is present in map, only add non duplicate interfaces in APP_ID key.
app_obj.INTERFACE.forEach(interface => {
var isDuplicate = isInterfaceDuplicate(interface, app_obj.APP_ID);
if (!isDuplicate) {
app_map[app_obj.APP_ID].push({...interface});
}
});
});
/* Create result array from the map */
var result = [];
Object.keys(app_map).forEach(app_id => {
result.push({
"APP_ID": app_id,
"INTERFACE": app_map[app_id]
});
});
console.log(result);
I have the following firebase database. I would like to filter and list the orders which's deliveryDuration value is "45"
"orders" : [ null, {
"comment" : "",
"date" : "2018-07-09 10:07:18",
"deliveryDuration" : "45",
"delivery_address" : "",
"item" : [ {
"available" : true,
"category" : "Dessert",
"details" : "(Hausgemacht)",
"name" : "Warmer Topfenstrudel",
"price" : 3.9,
"quantity" : 1
} ],
"orderVerified" : false,
"telefon" : "",
"userID" : "xyc#gmail.com",
"userName" : ""
}, {
"comment" : "",
"date" : "2018-07-10 10:07:33",
"deliveryDuration" : "30",
"delivery_address" : "",
"item" : [ {
"available" : true,
"category" : "Dessert",
"details" : "(Hausgemacht)",
"name" : "Warmer Topfenstrudel",
"price" : 3.9,
"quantity" : 1
} ],
"orderVerified" : false,
"telefon" : "",
"userID" : "xyc#gmail.com",
"userName" : ""
}, {
"comment" : "",
"date" : "2018-07-10 10:13:13",
"deliveryDuration" : "10",
"delivery_address" : "",
"item" : [ {
"available" : true,
"category" : "Spezialitäten",
"details" : "Schweinschnitzel mit Parmesan gebacken auf Spaghetti Napoli",
"name" : "Piccata Milanese",
"price" : 12.9,
"quantity" : 1
} ],
"orderVerified" : false,
"telefon" : "",
"userID" : "xyc#gmail.com",
"userName" : ""
}
}
I tried writing the following function:
getNewItems: function (order) {
if (db.ref('orders').child(order).child('deliveryDuration').equalTo(45)){
return db.ref('orders').child(order).child('deliveryDuration')
}}
How could I get the filtered objects? I was thinking that that i write an if-else statement and the function returns the values what i was looking for.
I think you're looking for this:
getNewItems: function (order) {
return db.ref('orders').orderByChild('deliveryDuration').equalTo(45));
}}
This Firebase query takes each child node of the location you query, orders it by the deliveryDuration property, and then filters to only get the ones who are equal to 45.
In my angular web I am using Kendo UI for representing tree view. Here is my html file.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"> </script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myappCtrl">
<div ng-attr-id="{{ treeview }}" kendo-tree-view k-options="treeview"></div>
</div>
<div style="padding-top: 2em;">
<h4>Selected:</h4>
<p ng-attr-id="{{ selected }}">No interests selected.</p>
</div>
</div>
<script src="../scripts/test.js"></script>
</body>
</html>
And this is my test.js
var app = angular.module('myapp', []);
app.controller('myappCtrl', function($scope, $http, $window) {
$scope.dataModal = [ {
"key" : "Key",
"type" : "type",
"value" : 1,
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [ {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
}, {
"key" : "Key",
"type" : "type1",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
}, {
"key" : "Key",
"type" : "type1",
"value" : 1,
"items" : [ {
"key" : "subUser1",
"type" : "role11",
"items" : [
]
} ]
} ];
$scope.treeview = {
checkboxes : {
checkChildren : true
},
//check : onCheck,
dataTextField : "key",
loadOnDemand : false,
dataSource : $scope.dataModal
};
// get keys of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].key);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked nodes on data source change
function onCheck() {
var checkedNodes = [];
var treeView = $("#treeview").data("kendoTreeView");
var message = "";
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "Selected Interests: " + checkedNodes.join(", ");
} else {
message = "No Interests Checked.";
}
$("#selected").html(message);
}
});
My page is displaying the tree view. And I am using two functions to get the selected items of the tree. But it gives as error on console log as below.
test.js:347 Uncaught TypeError: Cannot read property 'dataSource' of null
Line 347: checkedNodeIds(treeView.dataSource.view(), checkedNodes);
Please be kind enough to show me what's wrong with my codes.
Thank You
First of all your code needs some modifications
In order to use kendo directives inside angular you need to introduce a dependency on them, this is done on your module configuration, without this configuration anything will work
var app = angular.module('myapp', ['kendo.directives']);
You should avoid using jQuery selectors on controllers, it's place is in angualr directives. In order to set the output message to the view you can simply use a variable on your scope and then bind it on the view
// show checked nodes on data source change
function onCheck(kendoEvent) {
var checkedNodes = [];
var treeView = kendoEvent.sender;
var message = "";
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
if (checkedNodes.length > 0) {
message = "Selected Interests: " + checkedNodes.join(", ");
} else {
message = "No Interests Checked.";
}
$scope.$apply(function() { $scope.selectedItems = message; });
}
Note that we use $scope.$apply, to set this message, this is because jQuery events which is used by kendo happens outside the control of angular, so angular does not update the view because he doesn't know that he has to do it, using $scope.$apply we force it Angular to update the bindings.
onCheck event inside tree configuration should be uncomment, all kendo events handlers receives a parameter as an argument, which contains a pointer to the widget. documentation
I am sending a query to a spreadsheet in google drive using the query feature of Google visualization API. I am doing the following to parse the server response:
var m= JSON.stringify(response);
var obj = jQuery.parseJSON(m);
This is the output when I print variable m to the screen:
"U2" : "799487391",
"Wv" : [ ],
"Xv" : [ ],
"hra" : "0.6",
"p3" : "ok",
"q" : "{\"cols\":[{\"id\":\"A\",\"label\":\"PSUID\",\"type\":\"string\"},{\"id\":\"B\",\"label\":\"FirstName\",\"type\":\"string\"},{\"id\":\"C\",\"label\":\"LastName\",\"type\":\"string\"},{\"id\":\"D\",\"label\":\"Age\",\"type\":\"number\",\"pattern\":\"General\"},{\"id\":\"E\",\"label\":\"Street\",\"type\":\"string\"},{\"id\":\"F\",\"label\":\"City\",\"type\":\"string\"},{\"id\":\"G\",\"label\":\"State\",\"type\":\"string\"},{\"id\":\"H\",\"label\":\"Zipcode\",\"type\":\"number\",\"pattern\":\"General\"},{\"id\":\"I\",\"label\":\"PhoneNumber\",\"type\":\"string\"},{\"id\":\"J\",\"label\":\"PSUEmail\",\"type\":\"string\"},{\"id\":\"K\",\"label\":\"ApplySemYear\",\"type\":\"string\"},{\"id\":\"L\",\"label\":\"Major\",\"type\":\"string\"},{\"id\":\"M\",\"label\":\"ColegeFrom\",\"type\":\"string\"},{\"id\":\"N\",\"label\":\"VolType\",\"type\":\"string\"},{\"id\":\"O\",\"label\":\"WhyVol\",\"type\":\"string\"},{\"id\":\"P\",\"label\":\"MajorHours\",\"type\":\"string\"},{\"id\":\"Q\",\"label\":\"ClassName\",\"type\":\"string\"},{\"id\":\"R\",\"label\":\"ClassHours\",\"type\":\"number\",\"pattern\":\"General\"},{\"id\":\"S\",\"label\":\"OrgName\",\"type\":\"string\"},{\"id\":\"T\",\"label\":\"OrgHours\",\"type\":\"string\"},{\"id\":\"U\",\"label\":\"Skills\",\"type\":\"string\"},{\"id\":\"V\",\"label\":\"ExtraActivities\",\"type\":\"string\"},{\"id\":\"W\",\"label\":\"AdditionalInfo\",\"type\":\"string\"},{\"id\":\"X\",\"label\":\"Agreement\",\"type\":\"string\"},{\"id\":\"Y\",\"label\":\"\",\"type\":\"string\"},{\"id\":\"Z\",\"label\":\"\",\"type\":\"string\"}],\"rows\":[{\"c\":[{\"v\":\"123456789\"},{\"v\":\"Jack\"},{\"v\":\"Sanders\"},{\"v\":33,\"f\":\"33\"},{\"v\":\"345 Evergreen Drive\"},{\"v\":\"New York City\"},{\"v\":\"NY\"},{\"v\":34322,\"f\":\"34322\"},{\"v\":\"233-232-3433\"},{\"v\":\"jack#psu.edu\"},{\"v\":\"spring 2015\"},{\"v\":\"EE\"},{\"v\":\"PSU\"},{\"v\":\"Intern\"},{\"v\":\"Class credit\"},{\"v\":\"none\"},{\"v\":\"EE 2322\"},{\"v\":34,\"f\":\"34\"},{\"v\":\"none\"},{\"v\":\"none\"},{\"v\":\"nothing\"},{\"v\":\"nothing\"},{\"v\":\"nothing\"},{\"v\":\"terms agreed\"},null,{\"v\":null}]}]}"
I'm not sure if this is a valid JSON structure but that is how I get the response from the google visualization API query to the sreadsheet. This is the output when I print obj.q
{ "cols" : [ { "id" : "A",
"label" : "PSUID",
"type" : "string"
},
{ "id" : "B",
"label" : "FirstName",
"type" : "string"
},
{ "id" : "C",
"label" : "LastName",
"type" : "string"
},
{ "id" : "D",
"label" : "Age",
"pattern" : "General",
"type" : "number"
},
{ "id" : "E",
"label" : "Street",
"type" : "string"
},
{ "id" : "F",
"label" : "City",
"type" : "string"
},
{ "id" : "G",
"label" : "State",
"type" : "string"
},
{ "id" : "H",
"label" : "Zipcode",
"pattern" : "General",
"type" : "number"
},
{ "id" : "I",
"label" : "PhoneNumber",
"type" : "string"
},
{ "id" : "J",
"label" : "PSUEmail",
"type" : "string"
},
{ "id" : "K",
"label" : "ApplySemYear",
"type" : "string"
},
{ "id" : "L",
"label" : "Major",
"type" : "string"
},
{ "id" : "M",
"label" : "ColegeFrom",
"type" : "string"
},
{ "id" : "N",
"label" : "VolType",
"type" : "string"
},
{ "id" : "O",
"label" : "WhyVol",
"type" : "string"
},
{ "id" : "P",
"label" : "MajorHours",
"type" : "string"
},
{ "id" : "Q",
"label" : "ClassName",
"type" : "string"
},
{ "id" : "R",
"label" : "ClassHours",
"pattern" : "General",
"type" : "number"
},
{ "id" : "S",
"label" : "OrgName",
"type" : "string"
},
{ "id" : "T",
"label" : "OrgHours",
"type" : "string"
},
{ "id" : "U",
"label" : "Skills",
"type" : "string"
},
{ "id" : "V",
"label" : "ExtraActivities",
"type" : "string"
},
{ "id" : "W",
"label" : "AdditionalInfo",
"type" : "string"
},
{ "id" : "X",
"label" : "Agreement",
"type" : "string"
},
{ "id" : "Y",
"label" : "",
"type" : "string"
},
{ "id" : "Z",
"label" : "",
"type" : "string"
}
],
"rows" : [ { "c" : [ { "v" : "123456789" },
{ "v" : "Jack" },
{ "v" : "Sanders" },
{ "f" : "33",
"v" : 33
},
{ "v" : "345 Evergreen Drive" },
{ "v" : "New York City" },
{ "v" : "NY" },
{ "f" : "34322",
"v" : 34322
},
{ "v" : "233-232-3433" },
{ "v" : "jack#psu.edu" },
{ "v" : "spring 2015" },
{ "v" : "EE" },
{ "v" : "PSU" },
{ "v" : "Intern" },
{ "v" : "Class credit" },
{ "v" : "none" },
{ "v" : "EE 2322" },
{ "f" : "34",
"v" : 34
},
{ "v" : "none" },
{ "v" : "none" },
{ "v" : "nothing" },
{ "v" : "nothing" },
{ "v" : "nothing" },
{ "v" : "terms agreed" },
null,
{ "v" : null }
] } ]
}
I am trying to get the number of records in the "rows" property which you see in the json code just immediately above this sentence. I have tried this obj.q.rows.length but that fails and returns undefined.
I have tried this also, but it does not work:
$.each(obj, function(key, value) {
if (key="rows"){
var numberofRecords = value.length;
alert(numberofRecords);
}
});
This is the output: 1698 which is not what I'm looking for. It is returning the length of the string represented by the property named q. I need the number of records in the "rows" property. How can I do this? I am new to JSON, javascript and programming in general. Your help would be much appreciated.
UPDATE
I have tried the following code but it fails at the line var requiredRowLength = jsonObj.rows[0].c.length;
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["table"]
});
google.setOnLoadCallback(initialize);
function initialize() {
// The URL of the spreadsheet to source data from.
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1lABvoEQoUw8WEu9P6C2-RUesN--PB7DVV90Deq5nYfQ/gviz/tq?sheet=app&tq=select+B+where+A="111111"');
query.send(processResponse);
}
function processResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
} else {
var m = JSON.stringify(response);
var obj = jQuery.parseJSON(m);
var jsonObj = jQuery.parseJSON(obj.q);
alert('testing before');
var requiredRowLength = jsonObj.rows[0].c.length;
alert('testing after');
}
}
</script>
</head>
<body>
<div id="json">
</div>
</body>
</html>
The alert box with the message "testing before" shows on the screen but no the alert box with the message "testing after". This means that the javascript engine is failing at this line: var requiredRowLength = jsonObj.rows[0].c.length;. This only happens when I search the spreadsheet with a query whoes parameter does not match a cell value in the sheet, otherwise this code does work.
For instance, the value 111111 in https://docs.google.com/spreadsheets/d/1lABvoEQoUw8WEu9P6C2-RUesN--PB7DVV90Deq5nYfQ/gviz/tq?sheet=app&tq=select+B+where+A="111111" does not exist in the spreadsheet.
Try this:
var jsonObj = jQuery.parseJSON(obj.q);
var requiredRowLength = jsonObj.rows[0].c.length;
This is my 1st time using underscore...I've this simple json...
"categories" : [
{
"tag" : "cat1",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 1",
"pt" : "Categoria 1"
},
"children" : [
{
"tag" : "cat11",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 1.1",
"pt" : "Categoria 1.1"
}
},
{
"tag" : "cat12",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 1.2",
"pt" : "Categoria 1.2"
}
}
]
},
{
"tag" : "cat2",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 2",
"pt" : "Categoria 2"
},
"children" : [
{
"tag" : "cat21",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 2.1",
"pt" : "Categoria 2.1"
}
},
{
"tag" : "cat22",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 2.2",
"pt" : "Categoria 2.2"
}
}
]
},
{
"tag" : "cat3",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 3",
"pt" : "Categoria 3"
},
"children" : [
{
"tag" : "cat31",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 3.1",
"pt" : "Categoria 3.1"
}
},
{
"tag" : "cat32",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 3.2",
"pt" : "Categoria 3.2"
}
}
]
},
{
"tag" : "cat4",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 4",
"pt" : "Categoria 4"
},
"children" : [
{
"tag" : "cat41",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 4.1",
"pt" : "Categoria 4.1"
}
},
{
"tag" : "cat42",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 4.2",
"pt" : "Categoria 4.2"
}
}
]
}
]
you can see I've the TAG key in several places. I need to get the entire tree based in a criteria for tag. I was using, find, filter, where and findWhere and all the time I got the same results:
var find = _.find($rootScope.webshop.categories, {tag: 'cat1'});
this works !
but if I try...
var find = _.find($rootScope.webshop.categories, {tag: 'cat11'});
No results :( Even using _.where or ._filter or ._findWhere. - The results always will be the same.
Can someone help a beginner in Underscore with something that's probably simple ?!
ty !
_.find does not recurse, you will have to build your own solution. Something like this:
_.findIn = function() {
var args = Array.prototype.slice.call(arguments, 0);
var childrenProp = args[0];
var result = _.find.apply(_, args.slice(1));
if (result !== void(8)) return result;
var arr = args[1];
for (var i = 0, l = arr.length; i < l; i++) {
args[1] = arr[i][childrenProp];
var result = _.findIn.apply(_, args);
if (result !== void(8)) return result;
}
return void(8);
}
_.findIn('children', categories, {tag: 'cat11'})
categories = [
{
"tag" : "cat1",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 1",
"pt" : "Categoria 1"
},
"children" : [
{
"tag" : "cat11",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 1.1",
"pt" : "Categoria 1.1"
}
},
{
"tag" : "cat12",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 1.2",
"pt" : "Categoria 1.2"
}
}
]
},
{
"tag" : "cat2",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 2",
"pt" : "Categoria 2"
},
"children" : [
{
"tag" : "cat21",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 2.1",
"pt" : "Categoria 2.1"
}
},
{
"tag" : "cat22",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 2.2",
"pt" : "Categoria 2.2"
}
}
]
},
{
"tag" : "cat3",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 3",
"pt" : "Categoria 3"
},
"children" : [
{
"tag" : "cat31",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 3.1",
"pt" : "Categoria 3.1"
}
},
{
"tag" : "cat32",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 3.2",
"pt" : "Categoria 3.2"
}
}
]
},
{
"tag" : "cat4",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 4",
"pt" : "Categoria 4"
},
"children" : [
{
"tag" : "cat41",
"active" : true,
"order" : 10,
"title" : {
"en" : "Category 4.1",
"pt" : "Categoria 4.1"
}
},
{
"tag" : "cat42",
"active" : true,
"order" : 20,
"title" : {
"en" : "Category 4.2",
"pt" : "Categoria 4.2"
}
}
]
}
]
_.findIn = function() {
var args = Array.prototype.slice.call(arguments, 0);
var childrenProp = args[0];
var result = _.find.apply(_, args.slice(1));
if (result !== void(8)) return result;
var arr = args[1];
for (var i = 0, l = arr.length; i < l; i++) {
args[1] = arr[i][childrenProp];
var result = _.findIn.apply(_, args);
if (result !== void(8)) return result;
}
return void(8);
}
document.write(JSON.stringify(_.findIn('children', categories, {tag: 'cat11'})));
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>