Dynamically add values to specific property in object - Fluent UI React ContextualMenu - javascript

I have the following ContextualMenu structure inside my SPFx Extension build with Fluent UI React:
const menuProps: IContextualMenuProps = {
items: [
{
key: 'Access',
itemType: ContextualMenuItemType.Section,
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
I also a MS Graph call running getting me some SharePoint Sites & Teams.
I would now like to push those dynamic responses to the to the menuProps at the right place.
So basically add the dynamic array into the nested items object.
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
How can I target that "object"? (hope I understand correctly and items is an object...)
Is there a way to do this using array.push()?

To make this library agnostic, it would look something like this:
const obj = {
items: [
{
key: 'Access',
itemType: '',
sectionProps: {
topDivider: true,
bottomDivider: true,
title: 'Sites you have access to',
items: [
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
],
},
},
],
};
obj.items[0].sectionProps.items.push({ key: 'DynamicValue3.1', text: 'DynamicValue3.2' })
console.log(obj.items[0].sectionProps.items)
Your console.log would return this:
[
{ key: 'DynamicValue1.1', text: 'DynamicValue1.2' },
{ key: 'DynamicValue2.1', text: 'DynamicValue2.2' },
{ key: 'DynamicValue3.1', text: 'DynamicValue3.2' }
]
If you can access menuProps: IContextualMenuProps, then just replace obj with the necessary variable.

Related

How to transform only 2 properties but keep remaining same as is in a nested object structure?

Apologies if title is not clear.
I am using json2csv npm package to prepare csv from json object and this package allows us to add a hook to transform object before actual csv line is prepared.
I only need to manipulate two properties out of all. How can I do this effectively? My code feels too bloated.
const {
Parser: Json2csvParser,
transforms: { unwind },
} = require('json2csv');
const json2csvFields = [
{ value: 'root.filename', label: 'File Name' },
{ value: 'issue.root.priority', label: 'Priority' },
{ value: 'issue.root.url', label: 'URL' },
{ value: 'issue.root.startline', label: 'Start Line' },
{ value: 'issue.root.stopline', label: 'Stop Line' },
{ value: 'issue.root.startcolumn', label: 'Start Column' },
{ value: 'issue.root.stopcolumn', label: 'Stop Column' },
{ value: 'issue.root.issuename', label: 'Issue Name' },
{ value: 'issue.root.issuecategory', label: 'Issue Category' },
{ value: 'issue._', label: 'Issue Description' },
];
const sampleData = [
{
root: {
filename:
'/home/users/john-doe/workspace/foo-project/src/main/classes/foo.cls',
},
issue: {
root: {
priority: 1,
url: 'www.example.com',
startline: 100,
stopline: 105,
startcolumn: 20,
stopcolumn: 25,
issuename: 'blah',
issuecategory: 'Category A',
},
_: ' Fox ',
},
},
];
const json2csvOptions = {
fields: json2csvFields,
quote: '',
header: true,
transforms: [
(item) => ({
'root.filename': item.root.filename.replace(
'/home/users/john-doe/workspace/foo-project/src/main/classes/',
''
),
'issue._': `"${item.issue._.trim()}"`,
// Except for the above two, everything else doens't need any transformation.
'issue.root.priority': item.issue.root.priority,
'issue.root.url': item.issue.root.url,
'issue.root.startline': item.issue.root.startline,
'issue.root.stopline': item.issue.root.stopline,
'issue.root.startcolumn': item.issue.root.startcolumn,
'issue.root.stopcolumn': item.issue.root.stopcolumn,
'issue.root.issuename': item.issue.root.issuename,
'issue.root.issuecategory': item.issue.root.issuecategory,
}),
],
};
const json2csvParser = new Json2csvParser(json2csvOptions);
const csv = json2csvParser.parse(sampleData);
console.log(csv);
This prints below output:
File Name,Priority,URL,Start Line,Stop Line,Start Column,Stop Column,Issue Name,Issue Category,Issue Description
foo.cls,1,www.example.com,100,105,20,25,blah,Category A,"Fox"
EDIT: Updated code to a working example.
After listing the two properties with special treatment, use Object.fromEntries and Object.entries to transform all the issue.root properties to their flat structure with .s in the property names. Then that object can be spread into the returned object.
const transformsFn = ({ root, issue }) => ({
'root.filename': root.filename.replace(
'/home/users/john-doe/workspace/foo-project/src/main/classes/',
''
),
'issue._': `"${issue._.trim()}"`,
...Object.fromEntries(
Object.entries(issue.root).map(
([key, val]) => [`issue.root.${key}`, val]
)
),
});
const json2csvOptions = {
fields: json2csvFields,
quote: '',
header: true,
transforms: [transformsFn],
};

How to add a unique ID to each entry in my JSON object?

I have this array of JSON objects:
and I want to add a unique ID (string) to each entry, like this:
let myTree = [
{
text: 'Batteries',
id: '0',
children: [
{
text: 'BatteryCharge',
id: '0-0'
},
{
text: 'LiIonBattery',
id: '0-1'
}
]
},
{
text: 'Supplemental',
id: '1',
children: [
{
text: 'LidarSensor',
id: '1-0',
children: [
{
text: 'Side',
id: '1-0-0'
},
{
text: 'Tower',
id: '1-0-1'
}
]
}
]
}
]
I just can't think of the right logic to achieve this. I have written this recursive function, which obviously does not achieve what I want:
function addUniqueID(tree, id=0) {
if(typeof(tree) == "object"){
// if the object is not an array
if(tree.length == undefined){
tree['id'] = String(id);
}
for(let key in tree) {
addUniqueID(tree[key], id++);
}
}
}
addUniqueID(myTree);
How can I solve this problem?
Instead of using a number/id in the recursive function I build a string.
let myTree = [{
text: 'Batteries',
children: [{
text: 'BatteryCharge'
},
{
text: 'LiIonBattery'
}
]
},
{
text: 'Supplemental',
children: [{
text: 'LidarSensor',
children: [{
text: 'Side'
},
{
text: 'Tower'
}
]
}]
}
];
function addUniqueID(arr, idstr = '') {
arr.forEach((obj, i) => {
obj.id = `${idstr}${i}`;
if (obj.children) {
addUniqueID(obj.children, `${obj.id}-`);
}
});
}
addUniqueID(myTree);
console.log(myTree);
I hope you are well.
why don't you consider using uuid?
In node there is the uuid module which you can use to generate unique identifiers, I share a base example:
install:
npm install uuid
npm i --save-dev #types/uuid
code:
import {v4 as uuid} from 'uuid';
let _id = uuid();

Unable insert element in nested array dynamically

I am working on angular tree which is having a large nested array.
nodes :
public fonts: TreeModel = {
value: 'Fonts',
children: [
{
value: 'Serif - All my children and I are STATIC ¯\\_(ツ)_/¯',
settings: {
'static': true
},
children: [
{ value: 'Antiqua' },
{ value: 'DejaVu Serif' },
{ value: 'Garamond' },
{ value: 'Georgia' },
{ value: 'Times New Roman' },
{
value: 'Slab serif',
children: [
{ value: 'Candida' },
{ value: 'Swift' },
{ value: 'Guardian Egyptian' }
]
}
]
},
{
value: 'Sans-serif',
children: [
{ value: 'Arial' },
{ value: 'Century Gothic' },
{ value: 'DejaVu Sans' },
{ value: 'Futura' },
{ value: 'Geneva' },
{ value: 'Liberation Sans' }
]
}
]};
The Tree looks similar to one present in image :
Each time user clicks on Any node, an API request goes to bring Child of that node (JSON Array). then i need to append this response array into original tree array .
The problem I'm facing is how do i insert child of nodes dynamically into original array against the parent node user clicked on.
Any better solution of current problem will also be helpful for me.
Currently i am using angular2-tree-component to implement the tree.
Finally i got the solution.
I switched to ng2-tree to implement the tree.
It has all the in built methods for tree-nodes and also it is well documented.
npm: ng2-tree
For every node provide an id. When user clicks on any node call a method to add childs into it.
public addChildFFS(id: number | string, newNode: TreeModel) {
newNode.id = ++this.lastFFSNodeId;
const treeController = this.treeFFS.getControllerByNodeId(id);
if (treeController) {
treeController.addChild(newNode);
} else {}
}

how can i handle my json elements

Here is my json file
{
id: '81224112234234222223422229',
type: 'message',
message: 'vacation',
attachments: [
{
type: 'template',
elements: [
{
id: '123123123123123',
title: 'job',
text: 'job',
properties: {
code: 'IO002',
value: 'messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003'
}
},
{
id: '123123123123123',
title: 'Date',
text: 'date',
properties: {
code: '2017-11-09~2017-11-09',
value: '2017-11-09~2017-11-09'
}
},
{
id: '123123123123123',
title: 'Sequence',
text: 'sequence',
properties: {
code: '1',
value: '1process/1,2process/1,3process/1'
}
}
]
}
],
module: 'temp'
}
i am using react.js and i want to extract all properties
result
job code: I0002
job value:messenger/IO001,messenger2(IO)/IO002,messenger3(IO)/IO003
date code:2017-11-09~2017-11-09
date value:2017-11-09~2017-11-09
sequence code:1
sequence value:1process/1,2process/1,3process/1
i tried to execute like this
const job=elements.filter(x=>x.text==='job');
const date=elements.filter(x=>x.text==='date');
const sequence=elements.filter(x=>x.text==='sequence');
is it proper way to use filter or another way to extract data from json file?
i am new to react.js and es6,javascript.so i have no idea to display each property.
how can i solve my problem? pz give me a tip.i want to extract properties
You can use
var yourobject=JSON.parse(jsondata);
const job=yourobject.job;

ExtJS 4 TreeStore Static JSON - won't load

I'm simply trying to get a static JSON file to load into a TreeStore, and I'm tearing my hair out.
I have a model:
Ext.define('pronghorn_ui_keyboard.model.CommandKey', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'key'
},
{
name: 'command'
}
]
});
I have a TreeStore:
Ext.define('pronghorn_ui_keyboard.store.Commands', {
extend: 'Ext.data.TreeStore',
requires: [
'pronghorn_ui_keyboard.model.CommandKey'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'commands',
model: 'pronghorn_ui_keyboard.model.CommandKey',
proxy: {
type: 'ajax',
url: 'commands.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
And I have the following JSON at commands.json:
{
id: 'root',
key: null,
command: null,
children: [
{
id: 't'
key: 't'
command: null,
children: [
{
id: 'te'
key: 'e'
command: 'Trade Equity'
leaf: true
}
]
}
]
}
I'm trying to programmatically load this tree and inspect it in the console. In the Controller init function:
var me = this;
me.getCommandsStore().load({
callback: function() {
me.rootCommandKey = me.getCommandsStore().getRootNode();
me.currentCommandKey = me.rootCommandKey;
console.log(me.currentCommandKey);
console.log(me.currentCommandKey.id);
console.log(me.currentCommandKey.hasChildNodes());
me.initMainCommands();
},
scope: me
});
The console has something for currentCommandKey, but the ID isn't my root ID, and hasChildNodes() is false. So obviously the file isn't being loaded.
What am I doing wrong?
My JSON was invalid; basically missing commas.
Here's the correct JSON:
{
success: true,
children: [
{
string: 't',
key: 't',
command: null,
children: [
{
string: 'te',
key: 'e',
command: 'Trade Equity',
leaf: true
}
],
leaf: false
}
]
}
I need to do a better job of error handling with async calls too. I moved a bunch of stuff into methods on the Store itself and bound that init state on the load event using a local binding, which exposed a bunch of load-terminating-condition flags.

Categories