Tree show expand symbol when children array is empty - javascript

I'm using the tabulator tree js library (http://tabulator.info/). But why is the tree show the expand symbol even if the children array is empty? This is very annoying! Is it a bug?
This:
var tdata = [{id:1, name:"Billy Bob", age:"12", "_children":[]},];
Results in this:

as far as have seen , if you have a "_children" array (even if its empty) and your "dataTree" is set to true , then you will have the expand button always visible .
actually it is an opened issue in the tabulator repo ...
so there is only one solution here or work arround ,
you can try to not provide the _children array when there is no children ( backend )
or adjust it in the front end using js
var tdata = [
{
id: 1,
name: "Billy Bob",
age: "12",
_children: []
}
];
tdata.forEach((e) => {
if (!e._children.length) delete e._children; //this will delete any empty _children element
});
here is a working example ( it has two rows one with children one without , try and remove the for each and expriment with it )

I found what is the cause. You need to remove "dataTree:true," part from creating new Tabulator object.

Related

Sorting Array Items using filter disaligning the old items from their elements

Im a beginner and Ive been doing some todo app with redux, and my problem is when I, for example, input a value to textbox, "sample" lets say, and I input another string, "sample2" then I input again the "sample", the "sample" wc I inputted earlier doesnt duplicate, but it moves to the bottom instead of steadying at her place,
Here's some basic interface for my todo:
//assume theres a textbox here...
Sample
Sample2
Sample3
Then when I input a 'Sample' again, assuming that I duplciate the first one, here it is now:
Sample2
Sample3
Sample
The 'Sample' wc at the top moves to bottom instead of steadying at her place
Heres my reducer for adding a todo:
switch (action.type) ...
// adding todo
... (todo = [], action) => {
return [
//logic for not duplicating the word
...todos.filter(todo =>
todo.content.toLowerCase() !==
action.payload.toLowerCase()),
{ content: action.payload
...}
]
}
Should I try any methods instead of filter in this case?
Since you are filtering the content.
Its normal the first sample is not return. Since you are spreading the old value with spread operator
filter(todo =>
todo.content.toLowerCase() !==
action.payload.toLowerCase()
action.payload.toLowerCase()
means that if there is item of same value reject that value.

how to get json object titles

I'm a new programmer , I know how to use dictionary/JSON to get the value of whatever you want like for example var x = {"name":jack,"age":20};
then x.name = jack
but what if I've a table that has been imported through an unknown EXCEL file and I just want to know the title of each column , how can i do that ?
for example
Var table = [{"id":0 , "name":jack,"age":25,"profession":student},{"id":1 , "name":nora,"age":22,"profession":student}]
i want to make a javascript function that can inform me with titles of each columns , the number of the columns
how can i do that ?
First of all, an object in JavaScript doesn't care if it was constructed out of JSON or not. So your object in JavaScript syntax will look like this:
const x = { name: 'jack', age: 20 };
If you now do Object.keys(x), you will get this:
[ 'name', 'age' ]
And Object.keys(table[0]) should be exactly what you want: the column names of your 'table'
[ 'name', 'age' ]
You can get a list of the names of the properties of an object in javascript with this :
Object.keys();
Documentation here :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Response of a similar question here :
Getting the object's property name
Object.keys(table[0])
will give you the keys of the first row; presumably the other rows will behave and follow the pattern.
Just iterate over object keys:
for (var key in table[0]) {console.log(key);}
or (will work in most modern browsers):
Object.keys(table[0]).forEach(key => console.log(key));
Don't forget to check if "table" has elements
Also see other possible options
var test = Object.keys(objectname)
console.log(test)

jQuery SheepIt demo indexes are wrong using nested forms

I am using the demo here: http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=demo3
But if you have two of the outer forms (addresses) and two each for the inner forms (numbers) and inspect the elements you'll notice the names of the inputs still have the #index# and/or #index_phone# strings in the index names.
If you try to submit the form then, the field data is lost (since only the latest copy of that name is kept). I've tried debugging the JavaScript so I can patch it, but I'm not seeing where it's wrong. It seems like the normalizeForms function isn't handling nesting correctly.
What can I do to correct the code so the indexes perform as expected? (That is: so that an input of two addresses (A and B), each with two phone numbers (A1, A2 and B1, B2) gives me a POSTed value like:
"people" : [
0 : {
"addresses" : "A",
"phones" [ 0 : "A1", 1: "A2" ]
},
1 : {
"addresses" : "B",
"phones" [ 0 : "B1", 1: "B2" ]
}
]
(Note: I'm not looking for that exact format; I can parse any output, I just need to get all of the data from the client to the server with meaningful indexes and without conflicts.)
There appear to be some fundamental logic issues with the index 'normalization' side of this plugin when it comes to the nested inputs.
Essentially there is is a nametemplate and an idtemplate which are the element names only with %index% or %index_phones% where the index should be, and then the name and id which should be these templates only with the %index% or %index_phones% replaced with the actual element input ids.
What happens during the 'normalization' process is that a function runs over these templates (once per element per form), and depending on the form, replaces either %index% or %index_phones% with the relevant index, depending on which form is being processed.
The problem arises when the inputs are nested, as the function first replaces (for instance) %index% with let's say 0. It then updates the resulting name or id with this value, say person_addresses_0_phones_%index_phones%_phone. When it hits the nested form, it then does the same again, only with %index_phones%. The result is now person_addresses_%index%_phones_0_phone because it is still using the unmodified template attribute, rather than the already half-modified name.
To fix this properly, the logic around this whole section of the plugin really needs rebuilding, but I have slapped together a quick patch which should serve as a temporary fix.
In the main plugin file, update the normalizeFieldsForForm function to be:
function normalizeFieldsForForm(form, index)
{
form.find(formFields).each(function(){
var that = $(this)
,idTemplateAttr = getOrSetTemplate(that,"id")
,nameTemplateAttr = getOrSetTemplate(that, "name")
,idAttr = that.attr("id")
,nameAttr = that.attr("name")
,formParents = that.parents('[idtemplate]')
/* Normalize field name attributes */
var newNameAttr = nameTemplateAttr.replace(options.indexFormat, index);
/* Normalize field id attributes */
var newIdAttr = idTemplateAttr.replace(options.indexFormat, index);
$.each(formParents,function(index,element){
$element = $(element);
if($element.data('indexFormat') != options.indexFormat){
/* Normalize field name attributes */
newNameAttr = newNameAttr.replace($element.data('indexFormat'), $element.data('formIndex'))
/* Normalize field id attributes */
newIdAttr = newIdAttr.replace($element.data('indexFormat'), $element.data('formIndex'))
}
});
form.find("label[for='"+idAttr+"']").each(function(){
$(this).attr("for", newIdAttr);
});
that.attr("id", newIdAttr);
that.attr("name", newNameAttr);
});
}
And then update the addForm function. Around line 385 in an unmodified plugin file, add the line
// Index format
newForm.data('indexFormat', options.indexFormat);
above the line
// Index
newForm.data('formIndex', getIndex());
This should serve as a fix until the plugin author gets around to fixing the logic issues. This is for plugin version 1.1.1

fnFilter with multiple values?

I got a table with a column called: "Etiquetas" , there i have multiple tag separated by comma (Ex:"Tag, Tag01, Tag02")
And i have a tag search, where i put all tags,and when you click it, this will be added to the actual search (using fnFilter), the values are passed like: '"Tag", "Tag01"' , but if i filter "Tag" , the filter shows me all rows with that word, instead of the one with the exact word. EX: Show rows with "Tag", and "tag", and "Tag01", etc.
I need help for make exact filter, and with multiples values.
I add a picture to explain this better (i'm bad at explaining things sorry)
Image with the actual problem
You can leverage find and filter for this. While this wont give you a ranked list, like for example items with most tags matched, it will show only items that have at least a matching tag.
This assumes the tags are given as an array, and that etiquettes is.a string of comma separated tags (it could also be an array, but from what I understood, you mentioned separated by comma, so I assume it's a string).
var items = [
{title: "1", etiquettes: "tag01"},
{title: "2", etiquettes: "tag,test"}
];
var tags = ["tag"];
var results = items.filter((item) => {
// splits the tags in the etiquettes, and tries to find at least a matching one. if so, find will return true to the filter function for the current item
return item.etiquettes.split(",").find((itemTag) => {
return tags.indexOf(itemTag) >= 0;
});
});
console.log(results);

Array data appears as undefined?

I have an array declared as so:
$scope.test=['blah', 'blah2'];
And I wanted to use ng-grid as a test to merely display the data. I did the following:
$scope.sourceGridOptionsApprovers = {
plugins: [gridLayoutPlugin],
data : 'test',
columnDefs: [
{field: 'test', displayName: 'Approvers', width:'35%',
cellFilter: 'stringArrayFilter'}
]
};
I wanted to filter the array so I could display the contents of test into one of my columns in ng-grid. I appended the following to my angular controller:
.filter('stringArrayFilter', function(){
return function(myArray) {
//console.log(myArray);
return myArray.join(', ');
};
});
But when I try to display the contents of the array after I filter it, everything shows up as undefined, and I'm thinking it may be the way I passed in the array into the filter, but I'm not entirely sure. Any help would be appreciated.
Here is a plunkr of my example: http://plnkr.co/edit/Ba7hoGFhI7cWWaD3itZx?p=preview
First of all i think ngGrid strictly requires a json object with properties to work on. Without properties the cell cannot be matched to specific data so the data for the cell is 'undefined' => which results in 'undefined' error messages.
So your data need to be like:
$scope.test=[{name: 'blah'}, {name: 'blah2'}];
Secondly the cellfilter is applied per row/cell and not over your whole array. With your example data the single cell data contains no arrays so you will get 'no method join' error messages.
The data should be structured like that with the use of your filter:
$scope.test = [{name: ['blah', 'blah2']}, {name: ['blah3', 'blah4']}];
Here is a full working example:
http://plnkr.co/edit/6EsriMwBNILKzwk3JIR1?p=preview

Categories

Resources