I have an array of objects that looks something like this:
const roles = [
{
"id": "833ffe3d-cc24-4157-966c-5f8ceb856f4e",
"hidden": false,
"modified": "2020-03-20T15:14:12.689Z",
"label": "Solution 2",
"shortname": "Solution 2",
"description": "Solution 2 description",
"className": "Solution",
"children": [
{
"id": "f1708329-eb9f-4042-bbe7-cdd1ff41b1b7",
"hidden": false,
"modified": "2020-03-20T15:14:12.293Z",
"label": "USER CUSTOM ROLE",
"displayName": "USER CUSTOM ROLE DISPLAY NAME",
"className": "Role"
}
]
},
{
"id": "1a36709f-4de2-4f93-bf8e-57811d36e9f3",
"hidden": false,
"modified": "2020-03-20T15:14:12.668Z",
"label": "Solution 1",
"shortname": "Solution 1",
"description": "Solution 1 description",
"className": "Solution",
"children": [
{
"id": "e824afbd-8b19-4363-b6fa-dd604f445cef",
"hidden": false,
"modified": "2020-03-20T15:14:12.271Z",
"label": "USER ROLE",
"displayName": "USER ROLE DISPLAY NAME",
"className": "Role"
},
{
"id": "8f2600d0-5328-4d41-8270-2eb10541860f",
"hidden": false,
"modified": "2020-03-20T15:14:12.095Z",
"label": "BASE LOGIN ROLE",
"displayName": "DISPLAY NAME - BASE LOGIN ROLE",
"className": "Role"
},
{
"id": "a14ce471-b792-4a5d-95ad-b9abb5dbe45c",
"hidden": false,
"modified": "2020-03-20T15:14:12.102Z",
"label": "ORGANIZATION GLOBAL ROLE",
"displayName": "DISPLAY NAME - GLOBAL ROLE",
"className": "Role"
},
{
"id": "d4a7d6ac-1663-48be-9fed-ce2a908f28f1",
"hidden": false,
"modified": "2020-03-20T15:14:12.130Z",
"label": "DEPARTMENT 1 ROLE",
"className": "Role"
}
]
}
];
Point of my concern is id, label and children of these objects. As you can see, some of the roles objects contain their own roles array. And I have another array of selected roles, which looks like this:
const selected = ["Solution 1", "USER ROLE", "DEPARTMENT 1 ROLE"];
What I want is to create flat array of IDs corresponding to the selected roles, e.g. for this
selected array it will be (order is not important):
const result = ["d4a7d6ac-1663-48be-9fed-ce2a908f28f1", "e824afbd-8b19-4363-b6fa-dd604f445cef", "1a36709f-4de2-4f93-bf8e-57811d36e9f3"];
So my algorithm in pseudocode is:
1. Check root level object.
2. If it's label is in selected array, push it's id to the result array.
3. If it has children prop, check all it's children for the same condition.
4. Repeat for all other objects.
I've been only able to come up with very smelly function on this own and it still doesn't solve problem of the nested roles. My function is:
function getIds(arr, names) {
let result = [];
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < names.length; j++) {
if (arr[i].label == names[j]) {
result.push(arr[i].id);
}
if (arr[i].children) {
for (let k = 0; k < arr[i].children.length; k++) {
if (arr[i].children[k].label == names[j]) {
result.push(arr[i].children[k].id);
}
}
}
}
}
return result;
}
I know, there are much more cleaner and prettier solutions, I just can't come up with one. Can you help?
First I would flatten the array what you have with roles using .flatMap(). Then simply with .map() matching the labels with the array elements and returning the ids.
Try the following:
const selected = ["Solution 1", "USER ROLE", "DEPARTMENT 1 ROLE"];
const roles = [{ "id": "833ffe3d-cc24-4157-966c-5f8ceb856f4e", "hidden": false, "modified": "2020-03-20T15:14:12.689Z", "label": "Solution 2", "shortname": "Solution 2", "description": "Solution 2 description", "className": "Solution", "children": [{ "id": "f1708329-eb9f-4042-bbe7-cdd1ff41b1b7", "hidden": false, "modified": "2020-03-20T15:14:12.293Z", "label": "USER CUSTOM ROLE", "displayName": "USER CUSTOM ROLE DISPLAY NAME", "className": "Role" } ] }, { "id": "1a36709f-4de2-4f93-bf8e-57811d36e9f3", "hidden": false, "modified": "2020-03-20T15:14:12.668Z", "label": "Solution 1", "shortname": "Solution 1", "description": "Solution 1 description", "className": "Solution", "children": [{ "id": "e824afbd-8b19-4363-b6fa-dd604f445cef", "hidden": false, "modified": "2020-03-20T15:14:12.271Z", "label": "USER ROLE", "displayName": "USER ROLE DISPLAY NAME", "className": "Role" }, { "id": "8f2600d0-5328-4d41-8270-2eb10541860f", "hidden": false, "modified": "2020-03-20T15:14:12.095Z", "label": "BASE LOGIN ROLE", "displayName": "DISPLAY NAME - BASE LOGIN ROLE", "className": "Role" }, { "id": "a14ce471-b792-4a5d-95ad-b9abb5dbe45c", "hidden": false, "modified": "2020-03-20T15:14:12.102Z", "label": "ORGANIZATION GLOBAL ROLE", "displayName": "DISPLAY NAME - GLOBAL ROLE", "className": "Role" }, { "id": "d4a7d6ac-1663-48be-9fed-ce2a908f28f1", "hidden": false, "modified": "2020-03-20T15:14:12.130Z", "label": "DEPARTMENT 1 ROLE", "className": "Role" } ] } ];
const flat = roles.flatMap(e => e.children.concat(e));
const result = selected.map(e => flat.find(f => f.label === e).id);
console.log(selected);
console.log(result);
I hope this helps!
Related
I have an object parsed from JSON output.
I have to use only pure JS without any 3rd part libs. Can somebody suggest a working solution to filter a specific nested object by one of its key's value. In this sample I have a few "Fields" objects which contains also nested objects.
So is there a way to filter the whole nested object inside Fields using VName value as a filter criteria? For example use "VName": "oc_data" to filter the whole object inside Fields oc_data belongs to
[{
"Id": "0050560107dd",
"Name": "Demo Range",
"AllMup": false,
"Lines": [{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Some value here",
"VName": "oc_data",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Main stuff",
"SysName": "da3a45de77d1",
"ValuesUrl": "https://mysityurl.com",
"Id": "0050560107dd",
},
"CalForm": []
}
}]
},
{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Some value again",
"VName": "task_stat",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Task stuff",
"SysName": "Tasks.TaskState",
"ValuesUrl": "https://mysecondurl.com",
"Id": "ac1f6b17f99d",
},
"CalForm": []
}
}]
}
]
},
{
"Id": "0050560107dd",
"Name": "Demo Range",
"AllMup": false,
"Lines": [{
"Id": "0050560107dd",
"AllMup": false,
"Fields": [{
"Id": "0050560107dd",
"Name": "Category",
"IsRequired": false,
"Format": {
"Type": "Dictionary",
"Dictionary": {
"Name": "Some category",
"SysName": "LitigationCategory",
"ValuesUrl": "https://myempty.com",
"Id": "902b343a9588",
},
"CalForm": []
}
}]
}]
}
]
I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.
So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}
I´m an angular newbie
I have a directive with a template that looks something like this:
<div class="multiselect-styled">
<a href="javascript:void(0);" class="link" id="link-{{ model.ControlId }}">
<span class="options-selected" id="selected-options-{{ model.ControlId }}">TEXT</span>
<span class="select-arrows"></span>
</a>
</div>
My model contains an array called Options which contains n number of selectable options. Each option object has a boolean property; Selected. I would like to replace TEXT with a string saying n options selected. So, how do I get the number of selected options?
Of course, using a loop one would do something like this but is there some way I kind bind directly to n in this case (Find n with an expression)?
var n = 0;
angular.forEach(model.Options, function(option) {
if (option.Selected)
n++;
});
UPDATE 1
Options look like this:
"Options": [
{
"Id": "ApprovedAndClosed",
"Value": "ApprovedAndClosed",
"Text": "ApprovedAndClosed",
"Selected": false,
"Code": "ApprovedAndClosed"
},
{
"Id": "Cancel",
"Value": "Cancel",
"Text": "Cancel",
"Selected": false,
"Code": "Cancel"
},
{
"Id": "Done",
"Value": "Done",
"Text": "Done",
"Selected": false,
"Code": "Done"
},
{
"Id": "Init",
"Value": "Init",
"Text": "Init",
"Selected": false,
"Code": "Init"
},
{
"Id": "ReadyForProcessing",
"Value": "ReadyForProcessing",
"Text": "ReadyForProcessing",
"Selected": false,
"Code": "ReadyForProcessing"
},
{
"Id": "Rejected",
"Value": "Rejected",
"Text": "Rejected",
"Selected": false,
"Code": "Rejected"
},
{
"Id": "Reminder",
"Value": "Reminder",
"Text": "Reminder",
"Selected": false,
"Code": "Reminder"
}
]
You can try using a filter:
{{(model.Options | filter:{'Selected': true}).length}}
You could use lodash for this:
var countSelected = _.filter(Options, { 'Selected': true});
console.log(countSelected.length);
See: codepen example
I am have some trouble with a script I am working on. I have been provided with an object with multiple items from a product catalog.
What I am trying to do is to write a function which to which will allow me to render this data easily.
<script type="application/javascript">
SKUinfo =
{
"s238554": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/icon18.gif"
},
"Barcode": {
"Barcode": "50622132430794"
},
"Currency": "£",
"Description": "Description goes here",
"Id": 44305,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "Xbox 360",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
}
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
},
"s238556": {
"Age": {
"Description": "Age 18+",
"Thumbnail": "/productImages/assets/img/pegi/icon18.gif"
},
"Barcode": {
"Barcode": "5060134530794"
},
"Currency": "£",
"Description": "Description here",
"Id": 654654,
"Packshots": [
"/productImages/238556/1min.jpg",
"/productImages/238556/2med.jpg",
"/productImages/238556/3max.jpg"
],
"Pegis": [],
"Platform": {
"Button": "PlayStation 3",
"ID": 0
},
"Publisher": {
"Description": null
},
"Release": "/Date(1392940800000+0000)/",
"Screenshots": [
{
"ScreenshotMax": "/productImages/238556/5scrmax1.jpg",
"ScreenshotMin": "/productImages/238556/4scrmin1.jpg"
},
{
"ScreenshotMax": "/productImages/238556/7scrmax2.jpg",
"ScreenshotMin": "/productImages/238556/6scrmin2.jpg"
},
],
"Title": "Product title 2 goes here",
"Variants": [
{
"Id": 58242,
"MaxOrderQuantity": 3,
"Presellable": true,
"Price": 29.97,
"PriceCultureFormat": "29.97",
"PriceWithCurrencyFormat": "£29.97",
"Sku": 238556,
"Type": {
"Description": "New"
}
},
],
"Vendor": {
"Description": ""
},
"VideoHTML": "html here",
"status": {
"Response": "product found",
"Success": true
}
}
}
</script>
The above example is the output I get for two products.
If I try to get access to this data this is where I have a problem
<script type="application/javascript">
function getSKU(s)
{
console.log(SKUinfo.s.Title);
}
getSKU(s238554);
</script>
I imagine this is being caused when I am passing the argument s back to the function getSKU a the node selection in the data object. In this I would expect the console output to be the Title from SKU s238554.
What I get however, is: Uncaught ReferenceError: s238554 is not defined
I would appreciate any guidance that can be offered as I am a javascript novice.
Access your property by used[] on SKUinfo.s.Title like SKUinfo[s].Title
And also pass your property name within the quotes 's238554' as it's not variable.
Something like this.
function getSKU(s){
console.log(SKUinfo[s].Title);
}
getSKU('s238554'); // s238554 within quotes.
I'm using jQuery.dynatree plugin, how to load JSON formatted data using AJAX?
I do all as said in documentation:
<script>
$(function() {
$( "#Tree" ).dynatree({
title:"Thetree",
imagePath:'/jquery/css/',
selectMode:1,
initAjax:{
url:"http://127.0.0.1:2013/jsfolderstree"
}
});
});
</script>
The JS scripts is correctly connected to the HTML page, witout errors.
The requested URL by AJAX returns valid JSON:
[{
"key": "0x55638DB3",
"children": [
{
"key": "0x5D43E57C",
"children": [
{
"key": "0x70A4C1CE",
"children": [
{
"key": "0x799E9590",
"children": [],
"expand": true,
"tooltip": "This is group 5",
"isFolder": true,
"title": "Group 5"
},{
"key": "0x78C952A8",
"children": [],
"expand": true,
"tooltip": "This is group 6",
"isFolder": true,
"title": "Group 6"
}],
"expand": true,
"tooltip": "This is group 3",
"isFolder": true,
"title": "Group 3"
}],
"expand": true,
"tooltip": "This is group 1",
"isFolder": true,
"title": "Group 1"
},{
"key": "0x45B98999",
"children": [
{
"key": "0x6C829354",
"children": [],
"expand": true,
"tooltip": "This is group 4",
"isFolder": true,
"title": "Group 4"
}],
"expand": true,
"tooltip": "This is group 2",
"isFolder": true,
"title": "Group 2"
},{
"key": "0x47BE4570",
"children": [],
"expand": true,
"tooltip": "This is group 7",
"isFolder": true,
"title": "Group 7"
}],
"expand": true,
"tooltip": "Main level of tree",
"isFolder": true,
"title": "Root"
}]
But in result I have message "Loading Error" amd nothing more...
Where is my mistake?
I need load some JSON tree to the web-page, the tree must have methods to get selected node, and visual selection by mouse, that is that I need. Maybe need to use more simple plugins?
Thanks!
If you using jQuery ajax to load a JSON data,jQuery will resolve JSON data by JSON.parse method.
So don't put your JSON data in [], it will call parse error in jQuery ajax method.
{
"key": "0x55638DB3",
"children": [{...}]
....
}