Angular DataTable : On Button Click to load JSON data to the DataTable - javascript

Angular Datatable : Click to load json data to the datatable. Have json data in one variable and one button, and Once click on button, need to pass the json data and populate datatable. If button click, JSON data is not populated in datatable. Below code I tried, any issue pls suggest
ngOnInit(): void {}
loadJsonData() {
alert("inside");
const jsondata = [
{ id: 860, firstName: "Superman", lastName: "Yoda" },
{ id: 861, firstName: "xyz", lastName: "Abc" }
];
this.dtOptions[2] = {
data: jsondata,
columns: [
{
data: "id"
},
{
data: "firstName"
},
{
data: "lastName"
}
]
};
}
Working Stackblitz

Related

Server side pagination in KTDatatable (Metronic)

I am new to KTDatatable in Metronic.
I am trying to use server side pagination in Metronic dashboard, and I am parsing the data in a KTDatatable, but I can't find a way to parse the returned data from the API and to view number of pages and each page URL.
The code that I was able to write so far is:
data: {
type: 'remote',
source: {
read: {
url: dataURL,
method: 'GET',
contentType: 'application/json',
map: function(data) {
var cards = data.cards.data;
var currentPage = data.cards.current_page;
var lastPage = data.cards.last_page;
return cards;
}
},
},
pageSize: 10,
serverPaging: true,
},
In this code I was able to get the first ten records but:
1- I wasn't able to parse them the way I want in the table.
2- I wasn't able to show the pages number nor calling the API for the second page or the (x) page I want.
These are the things I want to do.
Thanks in advance.
You can go back to the end of the KT-Datatable documentation to find most of answers you want KT-Datable documentation, but I am gonna explain more hoping it will be more clear.
So the returned value from the API (Json) should look have two main objects meta and data, and it looks something like this:
{
"meta": {
"sort": "desc",
"field": "IssueName",
"page": 1,
"pages": 2,
"perpage": "10",
"total": 11
},
"data": [
{
"IssueName": "******",
"CardNumber": "******"
},
{
"IssueName": "******",
"CardNumber": "******"
}
]
}
And after getting the values of the response from the API you should only return the data object to be parsed by the datatable so the map function should look something like this:
map: function(data) {
return data.data;
}
and it will process the meta data itself.
To parse the data into the columns you should use the same key name of the data in column definition array, so in my example I used it like this:
columns: [
{
field: 'IssueName',
title: columnsTitles.issue,
type: 'string',
},
{
field: 'CardNumber',
title: columnsTitles.card_number,
type: 'string',
},
]
And every time the datatable calls the API it will send more data that will help you give the right response, the data will be on a shape of an array (The field name should be the same as the key):
[
"pagination" => array:4 [
"page" => "1"
"pages" => "2"
"perpage" => "10"
"total" => "11"
],
"sort" => array:2 [
"field" => "IssueName"
"sort" => "desc"
],
]
The sent data is related with the pagination and sorting type you have to get from the API, and you can also add filters and they will be stored in the array in the "query" field, and you can handle them in the backend.

ext 7 chart proxy data format

I try to load json data with direct proxy on a cartesian chart in ext 7 like this:
https://fiddle.sencha.com/#view/editor&fiddle/3bae
In this example I load data from ajax but the return data is the same. (its actually copy pasted from my direct api). I have the same result on my testsystem: I can load hardcoded data but not from proxy.
How do I have to format the data so it populates my chart?
the root property of your JSON must be 'result.data'
the data are object, NOT an Array
For yor custom JSON you can write reader transformer, something like this:
...
...
proxy: {
type: 'ajax',
url: 'test.json',
reader: {
type: 'json',
rootProperty: 'data',
fields: ['month', 'value'], // What is it?
transform: {
fn: function (data) {
return Object.values(data.result.data);
},
scope: this
}
}
},
autoLoad: true
});
Or you can change the backend to generate standard extjs json, sample:
{
"users": [
{
"id": 1,
"name": "Ed Spencer",
"email": "ed#sencha.com"
},
{
"id": 2,
"name": "Abe Elias",
"email": "abe#sencha.com"
}
]
}

check boxes are not functioning in react-bootstrap-table-next

I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e
I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result.
My code
For selecting the row
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
classes: 'selection-row',
};
Table rendering
<BootstrapTable
keyField="id"
data={tableData[0].rowsData}
columns={tableData[0].columnsData}
selectRow={selectRow}
/>
I Think issue is coming because of my data, as it is nested one And I am rendering it, but I am not able to resolve it.
My data
let tableData = [
{
rowsData: [
{
fname: "john",
lname: "smith"
},
{
fname: "steve",
lname: "warn"
},
{
fname: "michel",
lname: "clark"
}
],
columnsData: [
{
dataField: "fname",
text: "First name",
sort: true
},
{
dataField: "lname",
text: "last Name",
sort: true
}
]
}
];
Here is my code sandbox link This
You're telling keyField="id" yet each of your rowsData has no id. Give each of them an id and it should work.

Add fields in DevExpress Pivot using AngularJS

I'm looking at this template to build a web application: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/
In the example there are static data. I have to retrieve them from the server. So, I wrote this:
$scope.testData = [];
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
fields: [{
caption: "Nome",
dataField: "fullName",
area: "row"
}, {
caption: "Country",
dataField: "country",
area: "column"
}, {
caption: "Count",
dataField: "countOne",
dataType: "number",
summaryType: "sum",
area: "data"
}],
store: $scope.testData
});
$scope.pivotGridOptions = {
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
showBorders: true,
dataSource: $scope.pivotGridDataSource,
fieldChooser: {
enabled: false
}
},
$scope.fieldChooserOptions = {
dataSource: $scope.pivotGridDataSource,
texts: {
allFields: "All",
columnFields: "Columns",
dataFields: "Data",
rowFields: "Rows",
filterFields: "Filter"
},
width: 400,
height: 400,
bindingOptions: {
layout: "layout"
}
};
// Now I call the server to retrieve data
$scope.getTestData = () => {
$scope.testData.length = 0;
result.forEach(e => {
$scope.testData.push(e);
);
$scope.pivotGridDataSource.reload();
}
$scope.getTestData();
The problem is that when the data are loaded, in the Fields below it shows just the fields written at the beginning (so the name, the count and the country). But I saw in the demo that it should be display ALL parameters of the object.
For example, if the object is so structured:
{ "name": "Test1", "country": "Germany", "creationDate": "xxx", "surname": "yyy" }
So, I expect that in the fields there should be ALL parameters, so name, country, creationDate, surname. So, I did this at the beginning:
I changed $scope.testData = [] into:
$scope.testData = [{ "name": "", "country": "", "creationDate": "", "surname": "" }]
so the component will preparare all fields. And this works. But what if the server gives me back an Object that has another parameters? How can I display them?
I tried so after the calling and before the reload():
let fields = $scope.pivotGridDataSource.fields();
let newField = {
llowExpandAll: false,
allowFiltering: true,
allowSorting: true,
allowSortingBySummary: true,
caption: "This is a new field",
dataField: "newField",
dataType: "string",
displayFolder: "",
index: fields.length
}
$scope.pivotGridDataSource.fields().push(newField);
$scope.pivotGridDataSource.reload();
But it doesn't work yet. Worse, it does not even initialize the Pivot.
The fieldChooser uses the store fields, in this case $scope.testData fields, in your code I see your store is first declared (as null or with some format as you described) and then you have a function to fill it.
I don't know how your code looks and why you create your store that way, but that is basically your problem (the flow).
In the sample code the flow is:
Store with data (static in this case)
PivotGridDataSource
FieldChooser
In your code the flow is:
Store (empty)
PivotGridDataSource
FieldChooser
Store (fill) --> at this point your FieldChooser has been initialized with the fields of the empty version of your store so not much to do (in Jquery you could re-create your object, you dan do it using Jquery within AngularJs see a simple code sample here and below)
$('#chartContainer').dxChart('instance').dispose();
$('#chartContainer').dxPieChart({
...
});
To avoid all of this you can just use the DevExpress.data.CustomStore and your flow will be basically identical to the demo.

ExtJS binding complex property to textfield

give a JSON data like this
{ name: { firstname: 'First Name', lastname: 'Last Name' } }
How can I load this data into ExtJS form field?
First Name: [ First Name ]
Last Name: [ Last Name ]
UPDATE:
after using this technique I arrived at second challenge when post my change back to the server Ext generate json in this format
{ "firstname": "New first name", "lastname": "New last name"}
// instead of
{ "name": { "firstname": "...", "lastname": "..."} }
is it expected behavior or is there anyway I can tell Ext to serialize the object back to the nest form, regards.
P.S: my Edit.js taking from Ext MVC application guide http://localhost/extjs/docs/index.html#!/guide/application_architecture
I suggest you map this into two separate fields in your model definition:
Ext.define("Person", {
extend: "Ext.data.Model",
fields: [
{name: "firstname", mapping: "name.firstname"},
{name: "lastname", mapping: "name.lastname"}
]
});

Categories

Resources