Need help by populating a PrimeReact Tree - javascript

I'm trying to populate a PrimeReact Tree with data from sqlite3 database, but it doesnt work.
Here is my SQL-Query:
select 'prj:'||p.id as key,p.name as label,(
select json_group_array(json_object('key',key,'label',label))
from(
select 'tpr:'||tpr.id as key,tpr.name as label from tpr
where tpr.prjid=p.id
and tpr.active="true"
order by tpr.id
)
) as children
from prj p,usr_right r
where p.id=r.prjid
and p.active="true"
and r.usrid=$1
order by p.id
I get following JSON-Code:
[
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]
This is OK but i figured out, that the children are not rendered, because there are quotes around the square brackets at the children path - how can i fix this?

If initial is your json to be mapped to Tree, then you need to make a slight modification to convert string to array
let initial = [
{
key: 'prj:1',
label: 'Projekt 1',
children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]'
},
{ key: 'prj:2', label: 'Projekt 3', children: '[]' },
{ key: 'prj:3', label: 'Projekt 2', children: '[]' }
]
let converted = initial.map(obj => ({ ...obj, children: JSON.parse(obj.children)}))
console.log(converted)

Related

update data in dynamic nested array of objects with given index & certain value

I've this data structure:
interface Obj {
key: string;
value: any;
type: string | number | arrayString | arrayNumber | arrayObj | obj
level: number;
children: Obj[]
}
// sample data
const data: Obj[] = [
{
key: 'status'
value: 'active',
type: 'string',
level: 1,
children: []
},
{
key: 'categories'
value: ['fun', 'exciting', ...],
type: 'arrayString',
level: 1,
children: []
},
{
key: 'details',
value: {},
type: 'obj',
level: 1,
children: [
{
key: 'name',
value: 'My name',
type: 'string',
level: 2,
children: []
},
{
key: 'role',
value: {},
type: 'ob',
level: 2,
children: [
{
key: 'name',
value: 'admin',
type: 'string',
level: 3,
children: []
},
{
key: 'access',
value: {},
type: 'obj',
level: 3,
children: [
{
key: 'urls'
value: ["/setting"],
type: 'arrayString',
level: 4,
children: []
}
]
},
]
},
]
},
]
Whereby user can create any data structure specified in type field of Obj interface.
NOTES:
Only when type === obj, the children array will be filled as they will be converted to objects of key value pair later on. (That's why I've key & value in Obj interface. Also explain why value need to have any type)
My question would be:
Is it feasible for me to update children dynamically (as in children = newUpdatedChildrenArray) with only just having these values:
index of record that need to be updated
level of which this record situated
say for example I want to update children of access key from above sample data:
const updateSelectedData = ({
newUpdatedChildrenArray,
indexOfRecord2BeUpdated,
levelOfRecord2BeUpdated
}: {
newUpdatedChildrenArray: Obj[];
indexOfRecord2BeUpdated: number;
levelOfRecord2BeUpdated: number
}) => {
data[2].children[1].children[indexOfRecord2BeUpdated].children = newUpdatedChildrenArray
// this approach isn't dynamic since
// - I don't have indexes uses in
// eg: `data[don't have this index].children[don't have this index].children[indexOfReco...`
}
How can I make use of level to adjust how I update my code above? Is it feasible to do it this way with only these values?

Walk through a nested array using index in JavaScript

I want walk through a nested array and need to find the target element in the array. An example path [2, 1] should return {text: 'More 2'} and path [2, 2, 1] should return { text: 'Other-2' }. I tried lodash functions but no luck yet.
My Nested array is given below:
var data = [
{ text: 'Item 1', },
{ text: 'Item 2', },
{
text: 'More',
children: [
{ text: 'More 1', children: [] },
{ text: 'More 2'},
{ text: 'Other', children:[ {text: 'Other-1'}, {text: 'Other-2'}, {text: 'Other-3'} ] }
]
}
];
Well, it's not a multi-dimensional array, nor is it a raggedy array-of-arrays. It's an array of objects (that happen contain other arrays of objects that happen to...).
Lodash's _.get() ought to do the trick for you:
const _ = require('lodash');
const data = data = [
{ text: 'Item 1', },
{ text: 'Item 2', },
{
text: 'More',
children: [
{ text: 'More 1', children: [] },
{ text: 'More 2'},
{ text: 'Other', children:[ {text: 'Other-1'}, {text: 'Other-2'}, {text: 'Other-3'} ] }
]
}
];
const widget = _.get(obj, '[2].children[1]');
console.log('widget',widget);
Or... roll your own. It's not that hard to walk the tree:
function select(data, ...path) {
let i = path.shift() ;
let node = data[i] ;
while ( node && (i=path.shift()) !== undefined ) {
node = node?.children?.[i] ;
}
return node ;
}
const widget = select( data, 2, 1 );
console.log(widget);

Javascript - Assign object item with values from another object

I have an object with few items and I want to update the values of one property options from another object.
Object 1 :
structure = [
{
id: 'name',
label: 'Name',
filterType: 'text',
filterOn: 'contains'
},
{
id: 'address',
label: 'Address',
filterType: 'text',
filterOn: 'contains'
},
{
id: 'phone',
label: 'Phone',
filterType: 'select',
filterOn: 'contains',
options: [{ label: 'abc', value: 'abc' },
{ label: 'xyz', value: 'xyz' },
{ label: 'mno', value: 'mno' }]
}
];
if the id is phone then I want to get the values from the object 2 phoneList and assign it to the options instead of hard coding it.
options: [{ label: 'abc', value: 'abc' },
{ label: 'xyz', value: 'xyz' },
{ label: 'mno', value: 'mno' }]
}
];
object 2 is
this.props.phoneList = [{name: 'aaa', age: 11},{name : 'bbb' , age : 12}, and so on
]
label and values will be this.props.phoneList[i].name
how to loop over this and get the latest values from the other object
First use filter to identify the object with id phone. Then use map to transform this.probs.phoneList in the desired format and assign to options.
structure.filter (x => x.id == 'phone')[0].options = this.probs.phoneList.map (x => ({label: x.name, value: x.name}));

How to get id of a specific tree node when I click on them and then pass that data into my variable

I am new to Quasar and Vue. Could someone explain to me how to solve my task?
Briefly about the task:
(1) I have a q-tree element which represents the folder structure at the left side of a screen [ref.1]
(2) Here is a folder structure [ref.2]
(3) When the user clicks on any element in this folder structure, then he will see a new component on the right side with all children elements of clicked one in a grid layout.
This is what do I have now.
[ref.1] treeComponent.vue
<template>
<q-tree
:nodes="documents"
#click="getId"
node-key="id" >
</q-tree>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selectedDoc: x,
documents: documents
}
},
methods: {
getId: function () {
const x = this.getNodeByKey('id')
consol.log(x)
}
}
}
</script>
[ref.2] documents.js
module.exports = [
{
id: '1',
label: 'My Documents',
icon: 'folder',
children: [
{
id: '01',
label: 'Dir 1',
children: [
{ id: '0001', label: 'Doc 1'},
{ id: '0002', label: 'Doc 2'}
]
},
{
id: '02',
label: 'Dir 2',
children: [
{ id: '0003', label: 'Doc 3'},
{ id: '0004', label: 'Doc 4'}
]
},
{
id: '103',
label: 'Dir 3',
children: [
{ id: '0005', label: 'Doc 5'},
{ id: '0006', label: 'Doc 6'},
{ id: '0007', label: 'Doc 7'}
]
}
]
}
]
you need to replace id by key.after this add this handler for each node
handler: (node) => this.onclick(node)
then add this method in methods
onclick(node) {
alert(node.key)
},
this will display id of perticular node
So, the main problem was related to not good enough acquainted with Quasar framework.
Here is my answer to this question:
<template>
<button v-on:click = "showNodeSelected">showClickedNode</button>
<q-tree
:nodes = "documents"
:selected.sync = "selected"
node-key="id"
/>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selected: null,
documents: documents
}
},
methods: {
showNodeSelected: function () {
console.log(this.selected)
}
}
}
</script>

JavaScript: How can I change property names of objects in an array?

I am using this react-select: https://github.com/JedWatson/react-select
The format for options data that they require is:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry'},
{ value: 'vanilla', label: 'Vanilla' }
];
My array is set up differently as follows:
const columns = [
{ name: 'OrderNumber', title: 'Order Number' },
{ name: 'strawberry', title: 'Strawberry' },
{ name: 'vanilla', title: 'Vanilla' }
]
I am not able to change my array. If try to use name or value in my option items, I encounter issues using them with select-react. If I change my name to value, the select options are populating, however I don't want to do that.
Can anyone teach me how can I change my array's name to value?
You could use the .map() function to make the data in columns suitable for use with react-select.
The .map() function is available on the Array type. It creates a new array from the array you call it on, and allows you to provide a function that transforms/changes each item as it is copied from the original array.
You can make use of it as follows:
const columns = [
{ name: 'OrderNumber', title: 'Order Number' },
{ name: 'strawberry', title: 'Strawberry' },
{ name: 'vanilla', title: 'Vanilla' }
]
const options = columns.map(function(row) {
// This function defines the "mapping behaviour". name and title
// data from each "row" from your columns array is mapped to a
// corresponding item in the new "options" array
return { value : row.name, label : row.title }
})
/*
options will now contain this:
[
{ value: 'OrderNumber', label: 'Order Number' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
*/
For more information, see the MDN documentation for .map()
If you just want to rename the name property to value you can use a map and destruct the name property as value and pick the rest.
const columns = [
{ name: 'OrderNumber', title: 'Order Number' },
{ name: 'strawberry', title: 'Strawberry' },
{ name: 'vanilla', title: 'Vanilla' }
];
const newColumns = columns.map( item => {
const { name: value, ...rest } = item;
return { value, ...rest }
}
);
console.log( newColumns );
But, I suspect that you would want this since react-select doesn't work (as far as I see) with title. It waits for a label prop I guess. If this is so, go with and change all the properties as #Dacre Denny suggested. I like arrow functions :) So:
const newColumns = columns.map( item =>
( { value: item.name, label: item.title } )
);
Use destructuring with renaming property will simplify.
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
const columns = options.map(({ value: name, label: title }) => ({
name,
title,
}));
console.log(columns);

Categories