I'm using metronic v5.0.7.1 i have a datatable which is contains nested array so i just want to search in this array.
I'm able to bind my case status like that;
{
field: 'case.case_status',
title: "Status",
}
there is my search field;
var query = datatable.getDataSourceQuery();
$('#m_form_durum').on('change', function () {
datatable.search($(this).val(), 'case.case_status');
}).val(typeof query.case.case_status !== 'undefined' ? query.case.case_status : '');
After that im getting this error "Cannot read property 'case_status' of undefined". How can I specify the nested field in this case?
By the way if I replace my field to 'count' which is in my array instead of 'case.case_status' its work very well. Just nested fields give this error.
Also this is my sample data:
[
{
"id": 93,
"case": {
"id": 99,
"case_status": 1,
},
"user": "1",
"count": "2",
"created_at": "2018-02-08T09:00:00.884590+03:00",
"modified_at": "2018-02-08T09:00:00.884612+03:00",
"is_deleted": false,
}
]
Related
I am using Material UI DataGrid component to render EXCEL file. Each Excel file has several column Names and have specific types. For example:
const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Amazing column Name ",
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "dev",
"flex": 1,
"minWidth": 150,
"editable": true
}
]
The column Name Building TSI is of type number. And I am adding class name invalid using cellClassName, something like:
classnames({
invalid: !isPositiveNumber(params.value)
})
It works fine and renders class name and indicates error cells. The problem is, I want to count total number of error cells. The reason is, we only allow to save the grid values to the database, if there are no errors in any cells.
Solutions, I have tried so far:
Add state for errorCount and increment errorCount when I add class. This causes several re-renders and exceeds memory limit.
I tried to use document.getElementByClassNames('invalid') and check its length. It works only for the rendered item. That is to say, if excel file has more than 10 rows, it is paginated. The invalid cells count is only done for the currently rendered page.
I tried to use preProcessEditCellProps props to indicate error. However, I could not find anyway to get the total error cells count. Only thing, I could get out of this props is an ability to not allow user to enter incorrect value.
I even tried using localStorage. It has the exact same issue as solution number 2.
I would appreciate if anyone has faced similar scenario. It would be nice to get overall error cells count, so, I can enable to disable SAVE button.
One of the constraints that I have is the excel files are huge and contains on average of 30-40k rows and 25-40 columns. Adding state for each cells becomes less performant.
Thanks in advance!
Having another property in columns and referring to it before exporting for each cell/row can help.
In this example, invoke eligibleForExport function with the columns definiton and the actual data as parameters will give a boolean stating if error exists or not. Can be changed to count errors as well.
const isInvalidBuildingTSI=(value)=>!isPositiveNumber(value);
const isPositiveNumber=(num)=>num>=0;
const eligibleForExport=(columns,data)=>{
return !(data.find(row=>columns.find(column=>row[column.field]
&& typeof column["isValid"] === "function" && column["isValid"](row[column.field]))))
}
const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true,
"isValid" : isInvalidBuildingTSI,
"cellClassName":isInvalidBuildingTSI(param.value)?"invalid":""
}
];
If the initial data is always valid an easy way to solve your issue would be to follow the DataGrid documentation about clients side validation:
Client-side validation 🔗
To validate the value in the cells, first add a
preProcessEditCellProps callback to the column definition of
the field to validate. Once it is called, validate the value provided
in params.props.value. Then, return a new object contaning
params.props and also the error attribute set to true or false. If
the error attribute is true, the value will never be committed.
const columns: GridColDef[] = [
{
field: 'firstName',
preProcessEditCellProps: (params: GridEditCellPropsChangeParams) => {
const hasError = params.props.value.length < 3;
return { ...params.props, error: hasError };
},
},
];
For your scenario this would result in the following:
const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Amazing column Name ",
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true,
preProcessEditCellProps(params) {
const invalid = !isPositiveNumber(params.props.value);
return { ...params.props, error: invalid };
}
},
{
"field": "dev",
"flex": 1,
"minWidth": 150,
"editable": true
}
]
There is an important difference with what you currently have. This validation only effects edits. So the initial data has to be valid. The advantage is that you no longer have to use classnames({ invalid: !isPositiveNumber(params.value) }) and the save button can always be enabled, since all committed changes can be assumed to be valid.
If the initial data can be invalid, this is probably not the answer you're looking for.
FormatSelection in select2Option removing data.
I am receiving my data in
$scope.superclasses = superclassDataList.data;
where superclassDataList is coming from service in angular.
Data i received from service is :
{
"data": [{
"name": "new Test",
"id": 4506898162253824,
"attendanceAllowed": true,
"subclasses": [{
"title": "HIN",
"children": null,
"entityName": "MyClass",
"entityId": 5136918324969472
},
{
"title": "ENG 101 A",
"children": null,
"entityName": "MyClass",
"entityId": 5699868278390784
}]
}
],
"success": true,
"errorMessage": ""
}
Code where i am applying my ng-grid to show this data:
<div ng-show="superclasses[row.rowIndex].edit"><div id="subclasses" ng-model="superclasses[row.rowIndex].subclasses" ui-select2="select2Options" data-placeholder="Add Subclasses" style="width:100%" multiple></div></div>
<div class="ngCellText" ng-class="col.colIndex()" style="display:inline" ng-show="!superclasses[row.rowIndex].edit" ng-repeat="subclass in superclasses[row.rowIndex].subclasses">{{subclass.title}} ,</div>
(I added one extra field "edit" in superclasses so don't be confuse with that. If it's true first div(Editable mode) will be visible else second(View mode))
Code for select2 i write is:
$scope.subclassNameFormat="";
$scope.select2Options = {
allowClear : true,
multiple: true,
width : 550,
minimumInputLength: 3,
query: function (query){
SuperclassService.getSubclassesUnassigned({searchTerm: query.term.toUpperCase()}, function(response) {
$scope.classesList = response.data;
var data = {
results: []
};
$.each($scope.classesList, function(){
if(this.list === undefined || this.list.length === 0) {
data.results.push({id: this.id, text: this.title,isApplied: false});
}
});
query.callback(data);
}, function(error){
console.log("Superclass is not deleted.... Please try again");
});
},
formatSelection: function format(state) {
if((state.title === undefined || state.title === "") && (state.text !== undefined && state.text !== "")){
$scope.subclassNameFormat = state.text;
}else if((state.text === undefined || state.text === "") && (state.title !== undefined && state.title !== "") ){
$scope.subclassNameFormat = state.title;
}
}
};
here getSubclassesUnassigned() method retrieve data from server on the basis of 3 character i entered to search: (minimumInputLength: 3),
Question: The data in $scope.superclasses comes from server is complete(JSON Data written above). And for a moment complete data of subclasses visible(when edit is false) (in this case name of subclasses HIN, ENG 101 A). Once it entered in "formatSelection" part of "$scope.select2Options" one data from "subclasses" array will be remove and it reflect on the "subclasses" column in grid (the code i write above) and show only one name (either "HIN" or "ENG 101 A"). I don't know why it get entered in "formatSelection" part of "select2options" because till data time "edit" field was false. (See in div code ng-show="!superclasses[row.rowIndex].edit" ). I don't know how it reflect the data. and even delete the data completely(2nd object of subclasses array.).
Have a same problem when value of div is in editable mode(ng-show="superclasses[row.rowIndex].edit") it only show one value of subclasses array.
data after passing control from FormatSelection:
{
"data": [{
"name": "new Test",
"id": 4506898162253824,
"attendanceAllowed": true,
"subclasses": [{
"title": "HIN",
"children": null,
"entityName": "MyClass",
"entityId": 5136918324969472
}]
}],
"success": true,
"errorMessage": ""
}
I tried everything from reading complete doc. about query and formatSelection from select2 but didn't find or understand anything, and also search on stackoverflow but didn't find any relevant link or didn't understand from those already on site. I know it might be silly question for some professionals but i started working on angular just 2 days ago.
Ask me in more explanation is required. I will try to provide everything that i know.
Thanks in advance.
PS: Please ignore My grammatical mistakes.
Try this code before "query :" in select2Option
initSelection: function(element, callback) {},
It will initialize your data for select2 which you are receiving in $scope.superclasses. It is working fine for me.
Is it possible to supply a variable to select a particular element within a JSON array element in order to select it?
Assuming I have many users:
"users": [
{ "id":"000000", "uname": "admin", "password": "admin", "phash": "b109f3bbbc244eb82441917ed06d618b9008dd09b3befd1b5e07394c706a8bb980b1d7785e5976ec049b46df5f1326af5a2ea6d103fd07c95385ffab0cacbc86",
"profile": {
"fullname" : "Admin Admin",
"datejoined": "01-01-2014",
"reputation": "100",
"displaypic": "http://www.google.com/logo.png",
"cart": {
"Cid" : "1000000",
"item": [
{ "Iid": "00000001", "quantity": "10" }
]
}
}
},
Is it possible to select the above element by supplying just the username using jQuery?
I have tried:
Note: uname in the jQuery is a variable with "admin" assigned
$.getJSON('ssUsers.json', function (data) {
$(data.users[uname].profile.cart.item).each(function () {
++cartItems;
});
With little luck:
[Error] TypeError: 'undefined' is not an object (evaluating 'data.users[uname].profile')
Using grep:
thisUser = $.grep(data.users, function(e) { return e.uname==uname});
Try this:
$.getJSON('ssUsers.json', function (data) {
for(i=0; i<data.users.length ; i++){
$(data.users[i].uname.profile.cart.item).each(function () {
++cartItems;
}
});
I am receiving a large JSON object having large volume of data in ajax success method
but when i am iterating over the JSON list and want add individual class to each element things are not working.
The code snippet i am pasting here is inside ajax success method
$.each(data, function(index,jsonObject){
console.log(jsonObject.spanId+":"+jsonObject.status)
if(jsonObject.status != null && jsonObject.status != undefined){
if(jsonObject.status == "Available"){
$('#'+jsonObject.spanId).addClass("availableTime");
}else{
$('#'+jsonObject.spanId).addClass("vacantTime");
}
}
});
I have tried lot but not able to accomplish, please help me.
I am adding chunk of my json object
[
{
"spanId": null,
"status": null
},
{
"spanId": null,
"status": null
},
{
"spanId": "25_31_15:00",
"status": "Available"
},
{
"spanId": "25_31_15:30",
"status": "Available"
},
{
"spanId": "25_31_16:00",
"status": "Available"
},
{
"spanId": "25_31_16:30",
"status": "Available"
},
{
"spanId": "25_31_17:00",
"status": "Available"
}
]
You span ids are not advised and it may be what is not working.
Plus : for selectors is a reserved word for pseudo classes.
Source
Contrary to what you might expect, the use of colons in ids is okay, though only HTML5 started to accept ids starting with a digit. For better interoperability, it's recommended to start ids with a letter and not use colons in the first place.
That said, if you must use colons in your identifiers, you must escape them when you use them as part of a selector:
$('25_31_17\\:00') // this works fine
Alternatively, if you're going to find elements by their identifier, you might also want to consider:
$(document.getElementById(jsonObject.spanId)) // this will work too
H i, just missing a couple of things and data is in the wrong place ( by the looks )
try running this :
$.each(data, function(index){
console.log(data[index].spanId+":"+data[index].status)
});
notice that you need to tell the loop which array item to reference :
data[index]
and that the 'each' is looping over the array:
$.each(data, function(index){ ...
EDIT with data ref:
var data = [
{
"spanId": null,
"status": null
},
{
"spanId": null,
"status": null
},
{
"spanId": "25_31_15:00",
"status": "Available"
},
{
"spanId": "25_31_15:30",
"status": "Available"
},
{
"spanId": "25_31_16:00",
"status": "Available"
},
{
"spanId": "25_31_16:30",
"status": "Available"
},
{
"spanId": "25_31_17:00",
"status": "Available"
}
]
I have a JSON object which returns following values.
{
"articles":[
{
"paper-id":"id",
"paper-id-type":"type",
"title":"title",
"url":"url",
"abstract":"abs",
"date":"date",
"publication-forum":"forum",
"publication-forum-type":"type",
"authors":"auth",
"keywords":"key1,key2"
}
}
I tried to access these results through JavaScript.
First I created an array and assigned these results to the array.
The content of the array (named articles) object looks like this;
abstract: "xxx"
authors: "yyy"
date: "1111"
keywords: "key1, key2"
paper-id: "abc"
paper-id-type: "xxx"
publication-forum: "yyy"
publication-forum-type: "zzz"
title: "www"
url: "url"
Then I tried to access each value in these elements using the format,
articles[0]["abstract"]
It works for elements that do not have "-" character. So when I tried to extract the paper-id;
articles[0]["paper-id"]
I'm getting the error [Exception: SyntaxError: Unexpected token []
Does anyone know how to solve this problem ?
The problem is because you forgot to close the [] and the {} in your JSON
You JSON should look like this
{
"articles":[
{
"paper-id":"id",
"paper-id-type":"type",
"title":"title",
"url":"url",
"abstract":"abs",
"date":"date",
"publication-forum":"forum",
"publication-forum-type":"type",
"authors":"auth",
"keywords":"key1,key2"
}]
}
abc = {
"articles": [{
"paper-id": "id",
"paper-id-type": "type",
"title": "title",
"url": "url",
"abstract": "abs",
"date": "date",
"publication-forum": "forum",
"publication-forum-type": "type",
"authors": "auth",
"keywords": "key1,key2"
}
]
};
for (i in abc['articles'][0]) {
console.log(abc['articles'][0][i]);
}