Tabulator: dynamic built-in editor (and formatter) - javascript

with the data
[
{"ID":1, "value":"Text Value", "type":"text"},
{"ID":2, "value":"1", "type":"bool"},
{"ID":3, "value":"-1.23", "type":"numeric"},
{"ID":4, "value":"0", "type":"undefined"}
]
and the colums
[
{"title": "ID", "field": "ID" , "sorter": "number"},
{"title": "ID", "field": "value" , "editor": ??? },
{"title": "ID", "field": "type" , "visible":false}
]
How can I get a dynamic editor for the value column depending on the values of the type column in each row?
I achived this for the formatter but only by pasting the complete formatterXY.js code in formatter: function(cell) {...}
Basicly I'd love to have sth. like
"editor": function(...) {
switch(...row.type) {
case "bool":
return "tickCross";
break;
case "numeric":
return "number";
break;
default:
return "input";
}
}
(Currently I'm on 4.9.3 - gotta rewrite for 5.x)
I tried the same aproach as for the formatter. But I does not seem that the data is available at the point the editors are defined...

Related

Search inside array using Elastic Search

I am using Elastic version 6.8, created one index into whose schema is as follow:
{
"properties": {
"title": {
"type": "text",
"fields": {
"raw": {
"type": "keyword"
}
}
},
"tags": {
"type": "keyword",
"fields": {
"raw": {
"type": "text"
}
}
}
}}
and I have added following documents into it
[{
"title": "one",
"tags": ["html", "css", "javascript"]
}, {
"title": "two",
"tags": ["java", "jsp", "servlet"]
}, {
"title": "three",
"tags": ["spring", "java"]
}, {
"title": "four",
"tags": ["react", "angular", "javascript"]
}, {
"title": "five",
"tags": ["java"]
}, {
"title": "six",
"tags": []
}]
now I have more than 10 millions document in elastic search. Now I want to search following cases:
List all tags. with unique result (using skip, limit) skip value change but limit is fixed.so here I want result like
html,
css,
javascript,
java,
jsp,
servlet,
spring,
react,
angular
Partil search inside tags, it means if I search using act then it should give result as : react this also using skip limit.
How I can get this using Elastic search query. please help me here?
You can find unique possible value by using term aggregation.
GET yourindex/_search
{
"size": 0,
"aggs": {
"all_tags": {
"terms": {
"field": "tags",
"size": 100
}
}
}
}
"size":100 Get at most 100 unique values. Default is 10. You can increase more but it will include cost. You can check more on doc.
For partial search you can use wildcard query OR you can try N-Gram Tokeninzer. Both will allow to do partial search but wildcard query will be costly. You can evaluate according to your use case.

How to Create Dynamic Form in React from following Json?

Please give me an Idea how to use map() for below json and how to create dynamic form for this json.
I m not getting how to use this json for create dynamic from in react-native
{
"Location": {
"field_count": 1,
"field_name": [
"location"
],
"field_type": "TextField",
"context_type": "Location",
"field_unit": null,
"is_compulsory": true
},
"Maximum Tie Bar": {
"field_count": 2,
"field_name": [
"max_tie_bar_1",
"max_tie_bar_2"
],
"field_type": "TextField",
"context_type": "Decimal",
"field_unit": "mm x mm",
"is_compulsory": true
},
"Type": {
"field_count": 1,
"field_name": [
"type"
],
"field_type": "Dropdown",
"field_values": [
"Injection Mold",
"Gas Injection Mold",
"PVC Mold",
"Overmold/Insert Mold",
"Transfer Mold",
"Compression Mold",
"2k Mold",
"Stack Mold"
],
"is_compulsory": true
}
}
You can do it like this:
First Loop over your JSON object
Object.keys(JSON_OBJECT).map(function(item) {
renderItemsFromJson(JSON_OBJECT[item])
});
Conditionally render your items accordingly
renderItemsFromJson = (item) => {
switch(item.field_type){
case 'TextField':
return '<TextInput>[Inside code]</TextInput>'
case 'Dropdown':
return '<YourDropDownComponent>[Insidecode]</YourDropDownComponent>'
//Likewise
}
}

Insert datas into mysql(Sequelize) using javascript(NodeJS) based on radio button value

I have this below json object
{
"phoneno": [
{
"field1": "Mohamed",
"field2": "123456789",
"field3": "Sameer"
},
{
"field1": "Ganesh",
"field2": "987654321",
"field3": "Pandiyan"
}
],
"sender": "ifelse",
"message": "test"
}
I am showing this JSON in UI using ANGULARJS ng-repeat, also I am displaying radio button dynamically, see the below image
see there is radio button checked, in this columns, I have two mobile numbers,
so I want to make the final object like this:
[
{"phoneno" : 123456789 ; "sender" : "ifelse" ; "message" : "test"},
{"phoneno" : 987654321 ; "sender" : "ifelse" ; "message" : "test"}
]
For example, if I got this type of JSON:
{
"phoneno": [
{
"field1": "123456789",
"field2": "Mohamed",
"field3": "Sameer"
},
{
"field1": "987654321",
"field2": "Ganesh",
"field3": "Pandiyan"
}
],
"sender": "ifelse",
"message": "test"
}
now again
I am showing this JSON in UI using ng-repeat, also I am displaying radio button dynamically, see the below image
see there is radio button checked, in this columns, i have two mobile numbers,
so I want to make the final object like this:
[
{"phoneno" : 123456789 ; "sender" : "ifelse" ; "message" : "test"},
{"phoneno" : 987654321 ; "sender" : "ifelse" ; "message" : "test"}
]
if i got this type of object, I can bulk insert into mysql with the help of sequelize.
How to done this?
my api.js ( i did not still code, looking for the solution)
exports.sendFile2Sms = function (req, res) {
};
It will be helpful to you, In your data, you should mention which is column selected for example field2 is selected means you should append that to your JSON data.
In your case, I have added new key to find which is column "selected_radio":"field2" like this you should do the same on your front end
and here is the angular part of change your JSON data
var data={
"phoneno": [
{
"field1": "Mohamed",
"field2": "123456789",
"field3": "Sameer"
},
{
"field1": "Ganesh",
"field2": "987654321",
"field3": "Pandiyan"
}
],
"sender": "ifelse",
"message": "test",
"selected_radio":"field2"
};
var new_data=[];
_.each(data.phoneno,function(obj){
new_data.push({"phoneno":obj[data.selected_radio],"sender":data.sender,"message":data.message});
})
console.log(new_data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Kendo re-bind dropdownlist datasource

I have a section of html that contains a rather large set of input controls that is generated dynamically from a set of JSON data returned from the server.
The HTML controls are built from the JSON data along with the items associated with them.
The dropdownlist selection items are bound using the attributes:
data-bind='source: sourceObject'
data-text-field='optionText'
data-value-field='optionValue'
This is the javascript that creates the input select control:
function CreateSelectList(label, i, name) {
var element = '<select data-bind=\'source:reportFormData.FormField[' + i + '].Options.Option\' data-value-field=\'optionValue\' data-text-field=\'optionText\' id=\'' + name + '\' name=\'' + name + '\' data-role=\'dropdownlist\'></select>';
return CreateFormField(label, element);
}
Problem: I need to selectively modify the data source of one of the dropdowns. I can't figure out how to programatically change the datasource.
This doesn't work:
var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);
nor does this:
$("#ddl_location").kendoDropDownList({
dataTextField: "optionText",
dataValueField: "optionValue",
dataSource: jsonData.Option
});
I've also tried calling these after:
ddlData.trigger("change");
ddlData.refresh();
jsonData.Option is in equivalent format to the original JSON element Report.FormField[i].Options.Option e.g. "Option": [ {"optionText": "All", "optionValue": "0"}, ...
The difference here is that it is a new subset of data that needs to replace the original datasource.
here is a excerpt from the full JSON used to initially create the controls:
{
"Report": {
"report_id": "1",
"FormField": [{
"description": "End DateTime Picker",
"name": "end_date",
"label": "End Date",
"FieldType": "datepicker",
"displayOrder": "2",
"isRequired": "1",
"requiredFieldValidationMessage": "End Date is required."
},
{
"description": "Client",
"name": "ddl_client",
"label": "Client",
"FieldType": "dropdownlist",
"displayOrder": "3",
"isRequired": "0",
"Options": {
"Option": [{
"optionText": "All",
"optionValue": "0"
},
{
"optionText": "*Airport Business Center",
"optionValue": "68955"
},
{
"optionText": "*Cushman & Wakefield",
"optionValue": "68996"
},
{
"optionText": "*IBMC College ",
"optionValue": "68804"
}
...
}
use read() on dataSource:
var ddlData = $("#ddl_location").data("kendoDropDownList");
ddlData.setDataSource(jsonData.Option);
ddlData.dataSource.read();

Searching through JSON object

I am trying to search through a json object to select some values. For example I have a variable with the value 'product-2' and I want to look through the json object and return the attributes array of 'product-2'
{
"attributes": [
...
],
"portfolio": [
{
"conn": [
{
"product": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
},
{
"product": "product-2",
"description": "Description in here"
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
]
}
]
Could anyone tell me how I can achieve this? Thank you
EDIT:
As per Pramods request - I was working with the following js (although its really wrong I am sure)
$scope.productAttributes = [];
$scope.getProductDetails = function (product_id) {
console.log(product_id);
//search trough json
angular.forEach($scope.listOfProducts.product_id, function(value, key) {
// I was thinking I could loop through the json and when I find the matching product, then push its attributes into an array?
// if (key === enteredValue) {
// $scope.productAttributes.push({atribute: key});
// }
});
};
EDIT No.2
The JSON structure has changed
Use a filter to destructure the array.
In my example I use a filter within a Controller. This should probably be done in a service or a view. For brevity I used the filter in a controller.
The filter expression essentially says, return the first object in the array with a property 'product' that is 'product-2'
var app = angular.module('app', []).controller('MyController', MyController);
MyController.$inject = ['$filter'];
function MyController($filter) {
var data = [
{
"product": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
},
{
"product": "product-2",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
]
this.product = $filter('filter')(data, {product: "product-2"})[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MyController as vm">
Product-2: {{vm.product}}
</div>
</div>
Well, if you don't know how product-2 will be nested and you actually need to search for it, then you need to do a recursive search. A recursive function is a function that calls itself.
This means that you iterate over each of the keys, and if the key is an object, call the recursive function on that key as well, until the key you want is found.
Here is a similar question, with a few algorithms provided for doing recursive search on a JSON structure in JavaScript: traversing through JSON string to inner levels using recursive function
I think your JSON is wrong , So please correct it
Correct JSON
{
"attributes": [],
"portfolio": [
{
"conn": [
{
"product-1": {
"label": "product-1",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
},
{
"product-2": {
"label": "product-2",
"description": "Description in here",
"attributes": [
"OriginPostcode",
"Size",
"Bandwidth"
],
}
}
]
}
]
}
And to parse above json and return product information following is the code
$(document).ready(function() {
$.each(dict['portfolio'][0], function(key, list){
$.each(list, function(index, value){
$.each(value, function(product, info){
if (product == "product-2"){
answer = {}
answer[product] = info;
return JSON.stringify(answer);
}
});
});
});
});
Fiddle link :-
http://fiddle.jshell.net/2t8uknkc/

Categories