Related
I am looking to loop over an object that can also have arrays of objects that can have arrays of objects, and so on. In theory this structure could be infinite, but it would be very unlikely to ever be more than 12 layers deep this way.
example of data structure before transform:
{
id: '1234',
name: 'item 1',
children: [
{
id: '2345',
name: 'item 2',
// other properties that I don't care about will be here too
children: [
{
id: '3456',
name: 'item 3',
children: [
{
id: '4567',
name: 'item 4',
}
],
}
],
}
],
}
what I need the final data structure to look like (need a default first object):
const someArray = [
{
// this first child is static and will always be here after transform
title: 'Projects'
key: 'projects',
children: [
{
title: 'item 1', // this is 'name' property
key: '1234,' // this is 'id' property
children: [
{
title: 'item 2',
key: '2345',
children: [
// continue as long as there are children arrays
]
}
]
}
]
}
]
I have tried a few different solutions and I believe that a recursive function is the solution to this, but I am just not able to figure out how to output the final structure. I get the last two children, but I am unable to accumulate the previous children.
This is the non-working solution I have gotten the closest with:
const startingObj = [
{
title: 'Projects',
key: 'projects',
}
]
function buildTree (obj) {
// check if we have a children array with at least 1 child.
if (obj?.children?.length) {
return obj?.children.reduce((a, item) => {
if (a) return {
...item.children,
title: a.name || a.title,
key: a.id || a.key,
};
if (item?.children?.length) return buildTree(item.children);
}, obj);
}
}
buildTree(); // would pass in the sample data structure from above here.
I am not sure if maybe a reduce is not the best solution here or I am just missing some key idea from my approach. Any help will be greatly appreciated. Thanks.
What about this:
// this function recurses down the tree and for each item it makes a
// transformed item (saving only the title and key). Then the transformed
// item is returned and the caller pushes it into the children array
function buildtree(obj) {
let item = {
title: obj.name || obj.title,
key: obj.id || obj.key,
children: []
}
if (obj.children)
for (child of obj.children)
item.children.push( buildtree(child) )
return item;
}
let result = [
{
title: 'Projects',
key: 'projects',
children: []
}
]
result[0].children.push( buildtree(obj) )
Here is a full runnable example:
obj = {
id: '1234',
name: 'item 1',
x: '', // other properties that I don't care about will be here too
children: [
{
id: '2345',
name: 'item 2',
x: '', // other properties that I don't care about will be here too
children: [
{
id: '3456',
name: 'item 3',
x: '', // other properties that I don't care about will be here too
children: [
{
id: '4567',
name: 'item 4',
x: '', // other properties that I don't care about will be here too
},
{
id: '5678',
name: 'item 5',
x: '', // other properties that I don't care about will be here too
}
]
},
{
id: '6789',
name: 'item 6',
x: '', // other properties that I don't care about will be here too
children: [
{
id: '7890',
name: 'item 7',
x: '', // other properties that I don't care about will be here too
},
{
id: '890a',
name: 'item 8',
x: '', // other properties that I don't care about will be here too
}
]
}
]
},
{
id: '90ab',
name: 'item 9',
x: '', // other properties that I don't care about will be here too
children: [
{
id: '0abc',
name: 'item 10',
x: '', // other properties that I don't care about will be here too
children: [
{
id: 'abcd',
name: 'item 11',
x: '', // other properties that I don't care about will be here too
},
{
id: 'bcde',
name: 'item 12',
x: '', // other properties that I don't care about will be here too
}
]
},
{
id: 'cdef',
name: 'item 13',
x: '', // other properties that I don't care about will be here too
children: [
{
id: 'defg',
name: 'item 14',
x: '', // other properties that I don't care about will be here too
},
{
id: 'efgh',
name: 'item 15',
x: '', // other properties that I don't care about will be here too
}
]
}
]
}
]
}
console.log( JSON.stringify(obj) )
function buildtree(obj) {
let item = {
title: obj.name || obj.title,
key: obj.id || obj.key,
children: []
}
if (obj.children)
for (child of obj.children)
item.children.push( buildtree(child) )
return item;
}
let result = [
{
title: 'Projects',
key: 'projects',
children: []
}
]
result[0].children.push( buildtree(obj) )
console.log( JSON.stringify(result) )
So, if I have you right, you just need to iterate over all the objects and for each one change the 'id' key to 'key' and the 'name' key to 'title'. Here is a recursive solution:
function recursiveArray(arr) {
return arr.map(e => ({
key: e.id,
title: e.name,
children: e.children.length ? recursiveArray(e.children) : []
}));
}
function changeKeysOfNestedObject(obj) {
return {
key: obj.id,
title: obj.name,
children: obj.children.length ? recursiveArray(obj.children) : []
};
}
//test case
console.log(changeKeysOfNestedObject({
id: '1234',
name: 'item 1',
children: [
{
id: '2345',
name: 'item 2',
children: [
{
id: '3456',
name: 'item 3',
children: [
{
id: '4567',
name: 'item 4',
children: []
}
],
}
],
}
],
}));
I have made two nested table and its work but how about if we make 3 nested table.
here is example for two nested table that i take from antd documentation .
https://codesandbox.io/s/yxmhu
any help will be usefull. Thank you
Just add expandable to your nested table
function NestedTable() {
const expandedRowRender = () => {
const columns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown overlay={menu}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} expandable={{ expandedRowRender }} pagination={false} />;
};
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
return (
<Table
className="components-table-demo-nested"
columns={columns}
expandable={{ expandedRowRender }}
dataSource={data}
/>
);
}
I have a meteor app using livestamp. However, I wish to represent a collection within a reactive-table. However, when I try the code below, it doesn't work (I see nothing in the updated column):
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (degC)' },
{ key: 'ts', label: 'updated', fn: (v,o) -> livestamp v }
]
}
but when I use it within a template, it works fine. How can I get the functionality of livestamp within my reactive table?
You can do that with https://atmospherejs.com/aldeed/tabular it's also datatables but it's different package (in my opinion better)
if you choose to use it here is an example, tabular has the option to render fields as a template and livestamp should work just as on the template itself.
TabularTables.Books = new Tabular.Table({
name: "Books",
collection: Books,
columns: [
{data: "_id", title: "id"},
{data: "_id", title: "Rack"},
{ data: 'ts', title: 'updated',
tmpl: Meteor.isClient && Template.liveStamp
}
]
});
// template
<template name="liveStamp">
<p>{{livestamp this.ts}}</p>
</template>
so i guess it helps to actually read the manual....
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (°C)' },
{ key: 'ts', label: 'updated', tmpl: Template.sensor_updated }
]
}
and then a template somewhere...
<template name="sensor_updated">
{{ livestamp ts }}
</template>
I am using autoform and collection2 package and making a form in meteor. As of now i put some hard-coded option for country-state-city dropdown and insert-update is working fine. Now I want for the first time only country dropdown is enable other two are disable. Based on Country selection the states dropdown will populate and enable. Then based on State selection City Should Populate.
I don't want to do this manually. Is there any way to do this using autoform / collection2 features??? My code sample is as follows:
Collection2 Schema:
country:{
type: String,
label : "Country",
autoform: {
afFieldInput: {
type: "select"
},
options: function () {
return [
{label: 'Country1', value: 'Country1'},
{label: 'Country2', value: 'Country2'},
{label: 'Country3', value: 'Country3'},
{label: 'Country4', value: 'Country4'}
];
}
}
},
state:{
type: String,
label : "State",
autoform: {
afFieldInput: {
type: "select"
},
options: function () {
return [
{label: 'State1', value: 'State1'},
{label: 'State2', value: 'State2'},
{label: 'State3', value: 'State3'},
{label: 'State4', value: 'State4'}
];
}
}
},
city:{
type: String,
label : "City",
autoform: {
afFieldInput: {
type: "select"
},
options: function () {
return [
{label: 'City1', value: 'City1'},
{label: 'City2', value: 'City2'},
{label: 'City3', value: 'City3'},
{label: 'City4', value: 'City4'}
];
}
}
},
HTML ::
{{> afQuickField name='country' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}
{{> afQuickField name='state' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}
{{> afQuickField name='city' template="bootstrap3-horizontal" label-class="col-sm-4" input-col-class="col-sm-8"}}
Any Help??
I think this is somewhat the idea you have, https://jsfiddle.net/bdhacker/eRv2W/
// Countries
var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa", "Angola", "Anguilla", "Antartica"...
// States
var s_a = new Array();
s_a[0] = "";
s_a[1] = "Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol";...
you can extract the data from this and adjust to your app. Hope it helps
i think you can set the inputs of state and city to be disabled
country:{
type: String,
label : "Country",
autoform: {
afFieldInput: {
type: "select"
},
options: function () {
return [
{label: 'Country1', value: 'Country1'},
{label: 'Country2', value: 'Country2'},
{label: 'Country3', value: 'Country3'},
{label: 'Country4', value: 'Country4'}
];
}
}
},
state:{
type: String,
label : "State",
autoform: {
afFieldInput: {
type: "select",
disabled:true
},
options: function () {
return [
{label: 'State1', value: 'State1'},
{label: 'State2', value: 'State2'},
{label: 'State3', value: 'State3'},
{label: 'State4', value: 'State4'}
];
}
}
},
city:{
type: String,
label : "City",
autoform: {
afFieldInput: {
type: "select",
disabled:true
},
options: function () {
return [
{label: 'City1', value: 'City1'},
{label: 'City2', value: 'City2'},
{label: 'City3', value: 'City3'},
{label: 'City4', value: 'City4'}
];
}
}
},
and use Template event to enable the options
Template.YOURTEMPLATENAME.events({
'change input[name="country"]' :function(){
if ($('input[name="country"]').value() != ''){
$('input[name="state"]').attr('disabled','');
}else {
$('input[name="state"]').attr('disabled','disabled');
}
},
'change input[name="state"]' :function(){
if ($('input[name="state"]').value() != ''){
$('input[name="city"]').attr('disabled','');
}else {
$('input[name="city"]').attr('disabled','disabled');
}
}
});
How can you preselect a specific listbox option when your plugin dialog opens?
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
'values': [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
]
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});
For some reason this is missing in the Listbox documentation but the solution is quite simple: Add a value property to the listbox object you pass to tinymce and it will preselect it.
Be careful to set the value not to the text/label but the actual value of the listbox item you want to preselect.
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
values: [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
],
value: '3'
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});
I found it much easier to include an external page in the dialog so I can create my own form from scratch and easily control it with Jquery.
// Opens a HTML page inside a TinyMCE dialog and pass in two parameters
editor.windowManager.open({
title: "My PHP/HTML dialog",
url: 'mydialog.php',
width: 700,
height: 600
}, {
content: tinymce.activeEditor.selection.getContent({format: 'html'}),
nodeName: editor.selection.getNode().nodeName
});
Then in mydialog.php interact with the current TinyMCE with:
/* get content from TinyMCE */
console.log(args.content);
console.log(args.nodeName);
/* set content in TinyMCE */
top.tinymce.activeEditor.insertContent('My changed content here');
/* close the dialog */
top.tinymce.activeEditor.windowManager.close();
The reference can be found here:
http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs
Try to use onPostRender and set the selected value to with the value() function.
Example:
{
type: 'listbox',
name: 'text',
values: [
{text : '1', value : '1'},
{text : '2', value : '2'},
{text : '3', value : '3'}
],
onPostRender: function() {
this.value('2');
}
}
According to their listbox example (https://www.tiny.cloud/docs-4x/demo/custom-toolbar-listbox/) it can be done with onPostRender. I have the following code working in WordPress 5.3.2 (classic editor plugin enabled):
tinymce.PluginManager.add('mybutton', function( editor, url ) {
editor.addButton( 'mybutton', {
type: 'listbox',
text: tinyMCE_object.button_name,
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: '[one_half]', value: '[one_half] [/one_half]' },
{ text: '[one_third]', value: '[one_third] [/one_third]' },
{ text: '[one_fourth]', value: '[one_fourth] [/one_fourth]' },
{ text: '[one_fifth]', value: '[one_fifth] [/one_fifth]' },
{ text: '[grid]', value: '[grid] [/grid]' },
{ text: '[grid_element]', value: '[grid_element] [/grid_element]' }
],
onPostRender: function () {
// Select the second item by default
this.value('[one_third] [/one_third]');
}
});
});