We Keep Coding

Two Way Link Using Normalizr

I have a list of regions, which I get from an API. In this list, there are multiple buildings. This will look like this in JS:
const regions = [
{
guid: 'REGION1-GUID',
name: 'Region 1',
buildings: [
{
guid: 'REGION1-BUILDING1-GUID',
name: 'Region 1 Building 1'
},
{
guid: 'REGION1-BUILDING2-GUID',
name: 'Region 1 Building 2'
}
]
},
{
guid: 'REGION2-GUID',
name: 'Region 2',
buildings: [
{
guid: 'REGION2-BUILDING1-GUID',
name: 'Region 2 Building 1'
},
{
guid: 'REGION2-BUIDLING2-GUID',
name: 'Region 2 Building 2'
}
]
}
];
Now I want to normalize this JS Object using normalizr. What I want to do later is to get the region from a building.
So I tried to do the following:
// Define the buildings schema
const building = new schema.Entity('building', {}, { idAttribute: 'guid' });
// Define the regions schema
const region = new schema.Entity(
'regions',
{
buildings: [building]
},
{ idAttribute: 'guid' }
);
const regionList = [region];
const normalizeData = () => {
const normalizedData = normalize(data, regionList);
This does normalize my object, the normalizedData is like this:
{
"entities":{
"building":{
"REGION1-BUILDING1-GUID":{
"guid":"REGION1-BUILDING1-GUID",
"name":"Region 1 Building 1"
},
"REGION1-BUILDING2-GUID":{
"guid":"REGION1-BUILDING2-GUID",
"name":"Region 1 Building 2"
},
"REGION2-BUILDING1-GUID":{
"guid":"REGION2-BUILDING1-GUID",
"name":"Region 2 Building 1"
},
"REGION2-BUIDLING2-GUID":{
"guid":"REGION2-BUIDLING2-GUID",
"name":"Region 2 Building 2"
}
},
"regions":{
"REGION1-GUID":{
"guid":"REGION1-GUID",
"name":"Region 1",
"buildings":[
"REGION1-BUILDING1-GUID",
"REGION1-BUILDING2-GUID"
]
},
"REGION2-GUID":{
"guid":"REGION2-GUID",
"name":"Region 2",
"buildings":[
"REGION2-BUILDING1-GUID",
"REGION2-BUIDLING2-GUID"
]
}
}
},
"result":[
"REGION1-GUID",
"REGION2-GUID"
]
}
But to get the Region of a building i need to iterate over every region and check if the building is contained in the list. I will not get any added value trough the normalization.
It would be perfect if I am able to link in both direction. Every region entitiy has a list of building guids and every building has one region guid.
Is there any way to archieve this in normalizr? What would be the best approach?
Thank you for your help.

I tried some things and found a working solution. I don't know if there is any better approach, but it's very clean code and it's working.
I just had to change the definition of the building entity to:
// Define buildings schema
const building = new schema.Entity(
'building',
{},
{
idAttribute: 'guid',
processStrategy: (entity, parent) => ({ ...entity, regionGuid: parent.guid })
}
);
This will add the property "regionGuid" to the building which holds the guid from the region.

Traverse through JSON to find tree path

I am creating a treeview UI from the below Json, I have added the properties node-id, parentId to capture
the current expanded structure
I am planning to add a breadcrumb UI component from the selected tree structure.
var tree = [
{ name:"Insights", nodeId :"tree-node-0"},
{ name:"Level1", nodeId :"tree-node-1", parentId: "tree-node-0"},
{ name:"Level2", nodeId :"tree-node-2", parentId:"tree-node-1"},
{ name:"Details", nodeId :"tree-node-10"},
{ name:"SubDetails", nodeId :"tree-node-11", parentId:"tree-node-10"},
{ name:"Summary", nodeId :"tree-node-12", parentId:"tree-node-11"},
];
Below is the tree
Insights
|
|---Level1
|
|--Level2
Details
|
|--SubDetails
|
|--Summary
If the user selectes Summary then i want to create a breadCrumb which display links like Details-->SubDetails-->Summary
. I am assuming to populate the selected structure nodes into an array and then it would be easy to populate breadcrumb from the array.
If the user selects Summary then from the selected node parentId i want to traverse through the JSON array and find the path.
Need help in above logic

var tree = [{
name: "Insights",
nodeId: "tree-node-0"
}, {
name: "Level1",
nodeId: "tree-node-1",
parentId: "tree-node-0"
}, {
name: "Level2",
nodeId: "tree-node-2",
parentId: "tree-node-1"
}, {
name: "Details",
nodeId: "tree-node-10"
}, {
name: "SubDetails",
nodeId: "tree-node-11",
parentId: "tree-node-10"
}, {
name: "Summary",
nodeId: "tree-node-12",
parentId: "tree-node-11"
},
];
function test(Name, testData) {
var testData = testData || [];
var node = tree.find(function(item) {
return item.name == Name;
});
if (node) {
testData.push(node.name);
var parent = tree.find(function(item) {
return item.nodeId == node.parentId;
});
if (parent) {
return test(parent.name, testData);
} else {
return testData;
}
} else {
return testData;
}
}
console.log(test('Summary'));
i added it to display in console , you can check in console
Updated the code

Kendo UI getByUid() not working in hierarchical data source

I have a Kendo UI hierarchical data source set up, but getByUid() does not work as expected for me. It returns 'undefined' when I search for a uid that I can see is in my hierarchical data source.
The twist is that I am searching for a node that I add after initially setting up the hierarchical data source, using the .data() method.
Here is a Kendo Dojo snippet to illustrate - you will see at the bottom I console.log the datasource, the uid I am searching for, and the response ('undefined'), so you can see that that uid is in there.
Kendo Dojo Snippet
I think I have set up my schemas and models correctly, and as far as I can tell from the Kendo documentation I should be able to populate the dataSource using .data() and populate it with a fresh JavaScript object, with more nested nodes, yet still I cannot search for these new nodes using getByUid().
Here is the JavaScript from the Dojo snippet as well:
var initColumns = [
{
id: 0,
Index: 0,
ResponsiveStyle: 3,
Widgets: []
},
{
id: 1,
Index: 1,
ResponsiveStyle: 3,
Widgets:[]
},
{
id: 2,
Index: 2,
ResponsiveStyle: 3,
Widgets: []
}
];
var Columns = new kendo.data.HierarchicalDataSource({
schema: {
data: "Columns"
}
});
var Rows = new kendo.data.HierarchicalDataSource({
schema: {
data: "Rows",
model: rowModel
}
});
var Widgets = new kendo.data.HierarchicalDataSource({
schema: {
data: "Widgets",
model: layoutWidgetModel
}
});
var layoutWidgetModel = kendo.data.Node.define({
id: "layoutWidget",
hasChildren: "Rows",
children: Rows
});
var rowModel = kendo.data.Node.define({
id: "rowModel",
hasChildren: "Columns",
children: Columns
});
var parentModel = kendo.data.Node.define({
id: "parentModel",
hasChildren: "Widgets",
children: Widgets
});
var validator;
var viewModel = kendo.observable({
//create a dataSource
dataSource: new kendo.data.HierarchicalDataSource({
data: initColumns,
schema: {
model: parentModel
}
}),
selected: {} //this field will contain the edited dataItem
});
viewModel.dataSource.read(); //invoke the read transport of the DataSource
//Create the variables to create an object for insertion into the main parent object for the HierarchicalDataSource
var Rows = [ { Index: 0, Columns: [
{
Index: 0,
ResponsiveStyle: 0
}]
} ];
var SubType = 'Joined';
var WidgetName = 'widget name';
var Type = 'widget type';
var DisplayType = 'widget subtype';
var Title = 'widget title';
var Collapsible = true;
var Borders = 1;
var TitleBackground = 4;
var TitleColour = 6;
var kendoLayoutWidget = new layoutWidgetModel({ Title: Title, Type: Type, SubType: SubType, WidgetName: WidgetName, Collapsible: Collapsible, DisplayType: DisplayType, Borders: Borders, TitleBackground: TitleBackground, TitleColour: TitleColour, Rows: Rows });
//Get the uid of the new widget
var GUID = kendoLayoutWidget.uid;
//Get the current object from the HierarchicalDataSource
var VBdata = viewModel.dataSource.data();
//Push in the newly created widget object
VBdata[0].Widgets.push(kendoLayoutWidget);
//Replace the old data in the dataSource with the new multilevel object
viewModel.dataSource.data(VBdata);
//find the layoutwidget by getByUid()
var theWidget = viewModel.dataSource.getByUid(GUID);
console.log(viewModel.dataSource);
console.log(GUID);
console.log(theWidget);

How to select an option in a dropdown list angularjs

I am using AngularJS directive and I need to set a selected option of a dropdown list in my template.
<select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>
The content of the optionlist depends on resources send by a server when the page is loaded.
var energyChosen = "All";
angular.element(document).ready(function () {
$.get('/Dashboard/GetResources', function (data) {
scope.Resources = data;
scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" },
{ name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }];
scope.energy = scope.energyOptions[0];
energyChosen = scope.energy.id;
scope.$apply();
});
It works except that a blank option is preselected which disappears when i select an option
I would like to be able to preselect one option. I thought that
scope.energy = scope.energyOptions[0];
would do the trick but it didn't. How can i preselect an option in this case ?

The way you are doing your ng-options it will store the name of the option in scope.energy not the whole option. You were on the right track when you did:
scope.energy = scope.energyOptions[0];
But it won't work because it expects scope.energy to be the name and not the whole option. What you want to do in your ng-options is something like:
<select id="energySource" ng-options="o as on.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>
The important change is the addition of the o as o.name. The 'o' on the left is what will actually be selected and stored in your scope.energy, while the as o.name is the text that will be displayed on your pull down.

Make sure the scope.energy is outside your initialization.
$scope.energyOptions = [
{ name: "test1", id: "Electricity" },
{ name: "test2", id: "Gas" },
{ name: "test3", id: "Water" },
{ name: "test4", id: "Solar" }];
$scope.energy = $scope.energyOptions[2];

Tree is not displayed propery in DOJO

I am new to DOJO 1.6
I trying to display tree with sub folders.
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
dojo.require("dijit.tree.TreeStoreModel");
dojo.require("dojo.store.Memory");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var data = [ { id: 1, name: "answerTypeLabel", type:'scenario', children:[{_reference: 2}]},
{ id: 2, name: "acceptRequestLabel", type:'paragraph', data: "acceptRequestLabel"},
{ id: 3, name: "rejectRequestLabel", type:'scenario', children:[{_reference: 5},{_reference: 6}]},
{ id: 4, name: "MoreInformationLabel", type:'scenario', children:[{_reference: 7},{_reference: 8}]},
{ id: 5, name: "rejectRequestStatusLabel", type:'paragraph', data: "rejectRequestStatusLabel"},
{ id: 6, name: "rejectRequestNotCoveredLabel", type:'paragraph', data: "rejectRequestNotCoveredLabel" },
{ id: 7, name: "MoreInformationDocumentLabel", type:'paragraph', data: "MoreInformationDocumentLabel"},
{ id: 8, name: "MoreInformationDataLabel", type:'paragraph', data: "MoreInformationDataLabel"}
];
// Building the store object
var sortableStore = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'name',
items: data
},
});
// building the model
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
id: "*"
},
rootId: "root",
rootLabel: "sorting of tree"
});
// Building the tree
var tree = new dijit.Tree({
model:model,
'class': "tundra"
},
"resourceTree");
});
.
Here Id 2 in a child of Id 1 , so while displaying Id 2 must be inside Id 1.
But here Id 2 appears inside id 1 and also on the same level of id 1.(There is a duplication of all the all the child ids ).
This is case with id 2,5,6,7,8.
I want to remove the duplication.
Ouptput should be like

Reason is that you apply a non-hierachial store onto a tree which is not supposed to display items that has parents as a sibling to the root.
To 'fix' this, the referenced id's needs to not get matched by the model query.
In your case of data, it looks like the type:'paragraph' is supposed to be leaves. Therefore set the query to match type:'scenario' as opposed to your current ' id: "*" '
var model = new dijit.tree.ForestStoreModel({
store: sortableStore,
query: {
type:'scenario'
},
rootId: "root",
rootLabel: "sorting of tree"
});