dynamicly nested object from another object - javascript

trying to figure out how to dynamicly create a new nested object from this one:
object1 = {
DataStore : false,
Header: false,
Footer : false,
Sidebar : false,
Main : false,
}
to nested one like this:
const registerComponentsLocal = {
'DataStore': {
'debug': false
},
'Header': {
'debug': false
},
'Footer': {
'debug': false
},
'Sidebar': {
'debug': false
},
'Main': {
'debug': false
},
}
keys and values have to by dynamic. Only important thing is a structure of the final object.
Any ideas would be greatly appricieated.

To create a new instance (i.e preserve the old one)
let originalObject = {
DataStore : false,
Header: false,
Footer : false,
Sidebar : false,
Main : false,
}
let newObject = Object.assign({}, originalObject) // Copies the original object
Object.entries(newObject).forEach(([key, value]) => newObject[key] = {debug: value})

Here's a method using reduce
Object.entries(object1)
.reduce((b,a) => ({...b, [a[0]] : {debug:a[1]}}), {})
To iterate, we need an array and Object.entries gives us that. Then, using reduce, we iterate through each item in object1, and build a result. Here, this line ({...b, [a[0]] : {debug:a[1]}}) takes our accumulating object b and adds in the next iterable: {key: { debug: value}}`
let object1 = {
DataStore : false,
Header: false,
Footer : false,
Sidebar : false,
Main : false,
}
const registerComponentsLocal = Object.entries(object1).reduce((b,a) => ( {...b, [a[0]] : { debug:a[1]} }),{})
console.log(registerComponentsLocal)

Related

How i can filter only true value from object and maintain the object structure

This is my current object which i get but i want to filter out only true values and also maintain the same structure in return.
Current Object =
errors :{
frontdesk: {
PreAudit: true,
AuthSent: false,
Limitation: false,
},
clinical: {
medicaid: true,
Vitals: true,
Height: false,
},
eligibilityVerification: {
Mentioned: true,
EVAttached: false,
}
}
i want like this =
errors :{
frontdesk: {
PreAudit: true,
},
clinical: {
medicaid: true,
Vitals: true,
},
eligibilityVerification: {
Mentioned: true,
}
}
To filter out only the true values in the object, you can use the Object.entries()
const filteredErrors = Object.entries(errors)
.filter(([key, value]) => value)
.reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
This will return a new object with the same structure as the original errors object, but with only the true values.

How to get properties of nested objects with ng-multiselect-dropdown

I'm trying to use the ng-multiselect-dropdown https://www.npmjs.com/package/ng-multiselect-dropdown. I've got an array, that contains nested objects. The structure looks some kind like this:
obj1: {
id: string;
atr1: {
atr2: string;
atr3: string;
}
}
My question:
How can I display for example atr2 in the dropdown-menu? This is my dropdown-setting:
dropdownSettingsProjectManagers: any = {
singleSelection: false,
idField: 'id',
textField: 'atr1.atr2', //? What do I have to put in here?
showSelectedItemsAtTop: true,
clearSearchFilter: true,
allowSearchFilter: true,
enableCheckAll: false,
allowRemoteDataSearch: true
};
Thanks, for every help.

Changing the value of a parameter based on spread operator

So let's say that I have an object literal, which is the following:
let test = {
settings: {
title: '',
has_content: true,
can_edit: false,
}
}
Now I have another object literal as shown below:
let test2 = {
...test,
settings: {
can_edit: true,
}
}
How can I bring over all the parameters from the test object literal but have the ability to change values in test2?
So ultimately, I'd like for this:
let test2 = {
settings: {
title: '', (This is default)
can_edit: true, (This value is changed)
has_content: true, (This is default)
}
}
Now, when I console.log test2, all that I see in the settings is the can_edit: true, but not the title or has_content.
You need to spread the test.settings in test2.settings to merge the properties and override with the latest one that are defined in test2.settings.
let test = {
settings: {
title: "",
has_content: true,
can_edit: false,
},
};
let test2 = {
settings: {
...test.settings,
can_edit: true,
},
};
console.log(test2);
Because you test.settings key will be replaced by test2.settings. so you should spread the test.setting into test2.settings like below
let test = {
settings: {
title: '',
has_content: true,
can_edit: false,
}
}
let test2 = {
settings: {
...test.settings,
can_edit: true,
}
}
console.log(test2)
It should be like this
let test2 = {
...test,
settings: {
...test.settings,
can_edit: true,
}
}
Explanation: You need to spread object by object. Be aware, if you use the spread before changing the values (like I did) your changes survive.

Is there any way to read the dojo Objectstore and convert it as JS array object

Looking for a way to read the all the rows from DOJO enhancedgrid ObjectStore as JS Array object.
OnRowClick, I need to get the all items as an array. Here is the sample code:
Layout, Id are defined in another methods. Id is first header.
IN the following code, store is dataStore.
function constructEnhancedGrid(jsObject) {
require(
["dojo/store/Memory", "dojo/data/ObjectStore",
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination", "dojo/domReady!"
],
function(Memory, ObjectStore, EnhancedGrid, Pagination) {
jsGlobalObject = jsObject;
jsObject = JSON.parse(jsObject);
var objectStoreMemory = new Memory({
data: jsObject,
idProperty: [tableheaders[0]]
});
dataStore = new ObjectStore({
objectStore: objectStoreMemory
});
constructEnhancedGridlayout(tableheaders);
if (typeof rtGrid === "undefined") {
rtGrid = new EnhancedGrid({
store: dataStore,
structure: enhancedGridLayout,
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: false,
maxPageStep: 5,
position: "top",
defaultPageSize: 20
}
},
}, "rtGrid");
rtGrid.startup();
} else {
rtGrid.setStructure(enhancedGridLayout);
rtGrid.setStore(dataStore);
rtGrid.currentPage(1);
rtGrid.render(dataStore);
rtGrid.startup();
}
dojo.connect(rtGrid, "onRowClick", function(e) {
dataStore.fetch({
query: {},
onComplete: function(items) {
var resArray;
dataStore.objectStore.get().then(function(result) {
resArray = result;
});
}
});
});
});
}
Updated answer
Initially I assumed that you use JsonRest, but now I see that you use Memory object to populate your datagrid. Instance of Memory has attribute data with an array of data it contains. You can access it directly in you code.
grid.on("RowClick", function (e) {
var data = this.store.objectStore.data;
})
});

How do I hide certain rows in a ui-grid based on its values?

I have a simple UI grid with these options:
$scope.transactionGrid = {
enableSorting : true,
enableColumnResize : true,
enableScrollbars : true,
enablePaginationControls : false,
minRowsToShow : 6,
onRegisterApi : function(gridApi) {
$scope.gridEventsApi = gridApi;
}
};
I want to hide rows which have a specific value, deleted: "y".
$scope.transactionGrid.data = [
{ Name: "First", deleted: "y" },
{ Name: "Second", deleted: "y" },
{ Name: "Third", deleted: "n" },
{ Name: "Fourth", deleted: "n" }
];
Without actually changing the data, can it be filtered out from rows?
One way is to adjust the row-repeater-template to check for some row-specific value and make the row show/hide that way.
I created a Plunkr showcasing a possible solution.
First you need to create your row-value-checker-function:
appScopeProvider: {
showRow: function(row) {
return row.deleted !== 'y';
}
},
Then you adjust their template by adding that check to their row-repeater
$templateCache.put('ui-grid/uiGridViewport',
...
ng-if=\"grid.appScope.showRow(row.entity)\"
...
}
I know you specifically said "without actually changing the data", but assigning a filtered dataset to the grid would not change the dataset, just the data for the grid. Also it might be a relevant and valid solution for other cases like this.
I forked CMR's Plunk to demonstrate this: http://plnkr.co/edit/NntwWb?p=preview
The key part is just adding a filter when assigning the dataset:
$scope.gridOptions = {
data: $scope.myData.filter(function(row) {
return row.deleted !== "y";
})
};
You can hide it by creating cell templates and hide it based on row value for every field:
$scope.transactionGrid = {
enableSorting : true,
enableColumnResize : true,
enableScrollbars : true,
enablePaginationControls : false,
minRowsToShow : 6,
onRegisterApi : function(gridApi) {
$scope.gridEventsApi = gridApi;
}
// Column template definitions:
columnDefs: [
{
name: 'Name',
displayName: 'Name',
cellTemplate : '<div ng-if="row.entity.deleted">{{row.entity.Name}}</div>'
}
]
};
I made a Plunk to demonstrate a viable technique to solve this: https://plnkr.co/edit/XQRC45vaiZCySZYkEGrz?p=preview

Categories

Resources