Data Binding with Smart table from json file - javascript

i want to bind the json file to a smart table. How to use the loop function for the iteration.. please help
It only shows the design of smart table.
didn't binding the data from json
this is the json file
[
{
"year": 2013,
"id": "",
"doctor": "Dr. Smith",
"illness": "Flu",
"apptdate": "3/12/2013",
"details":"Patient had flu for 5 days. No medicines prescribed"
}
]
i used to retrieve data using
#Injectable()
export class SmartTablesService {
constructor(private http: Http) {
}
smartTableData = [];
loadData() {
console.log('loadData');
this.http.get('http://192.168.0.100:8000/medical')
.subscribe((data) => {
setTimeout(() => {
var contactData = [];
$.each(data.json(), function (key, value) {
var tempData = value.source;
contactData.push(tempData);
});
this.smartTableData = contactData;
}, 1000);
});
}
getData(): Promise<any> {
console.log("Promise");
this.loadData();
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(this.smartTableData);
resolve(this.smartTableData);
}, 3000);
});
}
}
constructor(private http: Http) { }
getComments() {
return this.http.get('http://192.168.0.100:8000/article' )
.map((res: Response) => res.json())
.catch((error:any) => Observable.throw(error));
}
}*/
this is the component part
#Component({
selector: 'new',
template: '<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>'
})
export class NewComponent {
query: string = '';
settings = {
noDataMessage: 'Loading...',
columns: {
year: {
title: 'YEAR',
type: 'string'
},
id: {
title: 'ID',
type: 'string'
},
doctor: {
title: 'DOCTOR',
type: 'string'
},
illness: {
title: 'ILLNESS',
type: 'string'
},
apptdate: {
title: 'APPTDATE',
type: 'string'
},
details: {
title: 'DETAILS',
type: 'string'
}
}
};
// data
source: LocalDataSource = new LocalDataSource();
constructor(protected service: SmartTablesService){
this.service.getData().then((data) => {
this.source.load(data);
});
}
}
please anyone anyone know how to bind it ..help

simply change the subscribe part in the service page to
var tempData = value;
so .subscriber looks like
.subscribe((data) => {
setTimeout(() => {
var contactData = [];
$.each(data.json(), function (key, value) {
var tempData = value; contactData.push(tempData);
});
this.smartTableData = contactData;
}, 1000);
});
}
it works..!

Related

Angular Firebase integration in template

I'm brand new to Angular and typescript and still trying to make it through but now I can't.
I bought a template for Angular (VEX) and I would like to integrate data from firebase into a datatable already present in the template.
In the template, this table is fed by static data and I would like to replace that with my call to firebase.
I am really lost and I would like to understand how I can do to get there.
Here is the manage-users-component.ts
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '#angular/core';
import { Observable, of, ReplaySubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { Customer } from './interfaces/customer.model';
import { MatTableDataSource } from '#angular/material/table';
import { MatPaginator } from '#angular/material/paginator';
import { MatSort } from '#angular/material/sort';
import { MatDialog } from '#angular/material/dialog';
import { TableColumn } from '../../../#vex/interfaces/table-column.interface';
import { aioTableData, aioTableLabels } from '../../static-data/aio-table-data';
import { CustomerCreateUpdateComponent } from './customer-create-update/customer-create-update.component';
import icEdit from '#iconify/icons-ic/twotone-edit';
import icDelete from '#iconify/icons-ic/twotone-delete';
import icSearch from '#iconify/icons-ic/twotone-search';
import icAdd from '#iconify/icons-ic/twotone-add';
import icFilterList from '#iconify/icons-ic/twotone-filter-list';
import { SelectionModel } from '#angular/cdk/collections';
import icMoreHoriz from '#iconify/icons-ic/twotone-more-horiz';
import icFolder from '#iconify/icons-ic/twotone-folder';
import { fadeInUp400ms } from '../../../#vex/animations/fade-in-up.animation';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions } from '#angular/material/form-field';
import { stagger40ms } from '../../../#vex/animations/stagger.animation';
import { FormControl } from '#angular/forms';
import { UntilDestroy, untilDestroyed } from '#ngneat/until-destroy';
import { MatSelectChange } from '#angular/material/select';
import icPhone from '#iconify/icons-ic/twotone-phone';
import icMail from '#iconify/icons-ic/twotone-mail';
import icMap from '#iconify/icons-ic/twotone-map';
import firebase from 'firebase';
import { UserManageService } from '../../services/user-manage.service';
#UntilDestroy()
#Component({
selector: 'vex-manage-users',
templateUrl: './manage-users.component.html',
styleUrls: ['./manage-users.component.scss'],
animations: [
fadeInUp400ms,
stagger40ms
],
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'standard'
} as MatFormFieldDefaultOptions
}
]
})
export class ManageUsersComponent implements OnInit, AfterViewInit {
layoutCtrl = new FormControl('boxed');
/**
* Simulating a service with HTTP that returns Observables
* You probably want to remove this and do all requests in a service with HTTP
*/
subject$: ReplaySubject<Customer[]> = new ReplaySubject<Customer[]>(1);
data$: Observable<Customer[]> = this.subject$.asObservable();
customers: Customer[];
#Input()
columns: TableColumn<Customer>[] = [
{ label: 'Checkbox', property: 'checkbox', type: 'checkbox', visible: true },
{ label: 'ShipTo', property: 'extId', type: 'text', visible: true },
{ label: 'uid', property: 'uid', type: 'text', visible: true },
{ label: 'Compagny', property: 'compagny', type: 'text', visible: true },
{ label: 'Name', property: 'name', type: 'text', visible: true, cssClasses: ['font-medium'] },
{ label: 'First Name', property: 'firstName', type: 'text', visible: false },
{ label: 'Last Name', property: 'lastName', type: 'text', visible: false },
{ label: 'Email', property: 'email', type: 'text', visible: true },
{ label: 'Phone', property: 'phone', type: 'text', visible: true },
{ label: 'Role', property: 'role', type: 'text', visible: true },
{ label: 'Actions', property: 'actions', type: 'button', visible: true }
];
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 20, 50];
dataSource: MatTableDataSource<Customer> | null;
selection = new SelectionModel<Customer>(true, []);
searchCtrl = new FormControl();
labels = aioTableLabels;
icPhone = icPhone;
icMail = icMail;
icMap = icMap;
icEdit = icEdit;
icSearch = icSearch;
icDelete = icDelete;
icAdd = icAdd;
icFilterList = icFilterList;
icMoreHoriz = icMoreHoriz;
icFolder = icFolder;
#ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
#ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private dialog: MatDialog,
private usersManageService: UserManageService ) {
}
get visibleColumns() {
return this.columns.filter(column => column.visible).map(column => column.property);
}
/**
* Example on how to get data and pass it to the table - usually you would want a dedicated service with a HTTP request for this
* We are simulating this request here.
*/
getData() {
return of(aioTableData.map(customer => new Customer(customer)));
}
ngOnInit() {
const users = this.usersManageService.getUsers();
console.log(users);
this.getData().subscribe(customers => {
this.subject$.next(customers);
});
console.log(aioTableData);
this.dataSource = new MatTableDataSource();
this.data$.pipe(
filter<Customer[]>(Boolean)
).subscribe(customers => {
this.customers = customers;
this.dataSource.data = customers;
});
this.searchCtrl.valueChanges.pipe(
untilDestroyed(this)
).subscribe(value => this.onFilterChange(value));
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
createCustomer() {
this.dialog.open(CustomerCreateUpdateComponent).afterClosed().subscribe((customer: Customer) => {
/**
* Customer is the updated customer (if the user pressed Save - otherwise it's null)
*/
if (customer) {
/**
* Here we are updating our local array.
* You would probably make an HTTP request here.
*/
this.customers.unshift(new Customer(customer));
this.subject$.next(this.customers);
}
});
}
updateCustomer(customer: Customer) {
this.dialog.open(CustomerCreateUpdateComponent, {
data: customer
}).afterClosed().subscribe(updatedCustomer => {
/**
* Customer is the updated customer (if the user pressed Save - otherwise it's null)
*/
if (updatedCustomer) {
/**
* Here we are updating our local array.
* You would probably make an HTTP request here.
*/
const index = this.customers.findIndex((existingCustomer) => existingCustomer.uid === updatedCustomer.uid);
this.customers[index] = new Customer(updatedCustomer);
this.subject$.next(this.customers);
}
});
}
deleteCustomer(customer: Customer) {
/**
* Here we are updating our local array.
* You would probably make an HTTP request here.
*/
this.customers.splice(this.customers.findIndex((existingCustomer) => existingCustomer.uid === customer.uid), 1);
this.selection.deselect(customer);
this.subject$.next(this.customers);
}
deleteCustomers(customers: Customer[]) {
/**
* Here we are updating our local array.
* You would probably make an HTTP request here.
*/
customers.forEach(c => this.deleteCustomer(c));
}
onFilterChange(value: string) {
if (!this.dataSource) {
return;
}
value = value.trim();
value = value.toLowerCase();
this.dataSource.filter = value;
}
toggleColumnVisibility(column, event) {
event.stopPropagation();
event.stopImmediatePropagation();
column.visible = !column.visible;
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
trackByProperty<T>(index: number, column: TableColumn<T>) {
return column.property;
}
// onLabelChange(change: MatSelectChange, row: Customer) {
// const index = this.customers.findIndex(c => c === row);
// this.customers[index].labels = change.value;
// this.subject$.next(this.customers);
// }
}
Here is the Firebase Realtime database "users" that I would like to insert in my datatable
Here is the function I imaginated for do the job but I dont know where to put it into
getUsers() {
firebase.database().ref('/users').once('value').then((snapshot) => {
const users = snapshot.val();
return users;
});
}
I am completely stuck and I thank very much in advance anyone who can help me.
I made some progress in my case and I was able to recover the values ​​I wanted.
The array returned by my function matches the array of the example template.
getData() {
const users = [];
firebase.database().ref('/users').once('value').then((snapshot) => {
users.push(snapshot.val()) ;
const users2 = users[0];
const mapped = Object.keys(users2).map(key => (users2[key]));
console.log(mapped.map(customer => new Customer(customer)));
// console.log(aioTableData.map(customer => new Customer(customer)));
return of(mapped.map(customer => new Customer(customer)));
});
// return of(aioTableData.map(customer => new Customer(customer)));
The problem is that in ngOnInit, when the call to the function is done, it expects a subscribe and I don't know how to do it.
ngOnInit() {
this.getData().subscribe(customers => {
this.subject$.next(customers);
});
this.dataSource = new MatTableDataSource();
this.data$.pipe(
filter<Customer[]>(Boolean)
).subscribe(customers => {
this.customers = customers;
this.dataSource.data = customers;
});
this.searchCtrl.valueChanges.pipe(
untilDestroyed(this)
).subscribe(value => this.onFilterChange(value));
}
An idea?

How to update the echarts in angular

here's the code:
HTML
<div echarts [options]="alertsToday$ | async" (chartInit)="onChartInit(todayCharts.line, $event)"
[theme]="(darkMode$ | async) ? 'dark' : 'default'" style="max-height: 200px;"></div>
TS
todayOptions = chartOptions.today;
todayCharts: any = {
line: { options: _.cloneDeep(this.todayOptions) }
};
constructor(private report: ReportService){}
onChartInit(chart: object, instance: any) {
chart['instance'] = instance;
this.todayCharts.line['instance'].setOption(this.todayCharts.line.options);
}
getReports() {
this.report.getStatusReports();
this.report.alertsToday$.subscribe((data) => {
this.alertsToday$.next(data);
if (this.todayCharts.line['instance']) {
this.todayCharts.line['instance'].setOption(data);
}
}
SERVICE.TS
getStatusReports() {
const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
const reportModules = [
{ url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
{
url: 'application-and-severity',
params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
},
{
url: 'application-and-severity-and-date',
params: {
to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
}
},
{
url: 'application-and-status',
params: {
to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
}
}
];
const promises = reportModules.map(
target =>
new Promise(resolve => {
this.notificationService
.getSummary(target.url, target.params)
.pipe(take(1))
.subscribe(
(result: Response) => {
// console.log(target, result);
resolve({ target, result });
},
(err: Error) => {
// return reject(err);
}
);
})
);
Promise.all(promises).then(results => {
const options = chartOptions;
options.default.today.series[0].itemStyle.normal.label.formatter = function (params: any) { return params.value + '%\n'; };
const week = this.getWeek();
// console.log(options.default);
results.forEach((res: any) => {
if (res.target.url !== '') {
if (res.target.url === 'application-and-severity') {
const todaySummary = { total: 0, data: [] as any };
const groups = _.groupBy(res.result, (data: any) => data.severity);
severities.forEach(severity => {
const total = groups[severity]
? groups[severity].reduce((prev, curr) => ({ total: prev.total + curr.total }))
: {
total: 0
};
todaySummary.data.push({
name: severity,
value: total.total
});
todaySummary.total += total.total;
});
options.default.today.title.text = todaySummary.total;
options.default.today.series[0].data = todaySummary.data;
// this.loading.today = false;
return this.alertsToday$.next(options.default.today);
}
}
});
});
}
What I'm trying to do here is to update the charts of alertsToday. but when I try to use the setOption it doesn't work and I used the onChartInit().
first the data is displaying, but when there's a new update it doesn't reload/refresh or update the chart.
how to update the echarts? cause it load the first data then when I update the data it doesn't update the echarts it still the same.
I have chart.component.html and chart.component.ts and report.service also the acknowledge.component.ts

How to display the observable data using the service in angular

home.component.ts
<h1>{{ (reportsToday$ | async)}}</h1>
<div echarts [options]="alertsDaily$ | async">
<div echarts [options]="alertsToday$ | async">
<div [onDisplay]="alertsDaily$ | async">
report.component.ts
constructor(private report: ReportService) {}
getReports() {
this.report.getStatusReport();
}
report.service.ts
displayAlert$ = new BehaviorSubject(undefined);
reportsToday$ = new BehaviorSubject(undefined);
alertsToday$ = new BehaviorSubject(undefined);
alertsDaily$ = new BehaviorSubject(undefined);
constructor() {}
getStatusReport() {
loading = {
today: false,
daily: false
};
this.loading.today = true;
this.loading.daily = true;
const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
const reportModules = [
{ url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
{
url: 'application1',
params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
},
{
url: 'application2',
params: {
to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
}
},
{
url: 'application3',
params: {
to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
}
}
];
const promises = applicationModule.map(
target =>
new Promise(resolve => {
this.notificationService
.getSummary(target.url, target.params)
.pipe(take(1))
.subscribe(
(result: Response) =>
resolve({ target, result });
},
(err: Error) => {
// return reject(err);
}
);
})
);
Promise.all(promises).then(results => {
const options = this.preConfig;
const week = this.getWeek();
results.forEach((res: any) => {
....
if (res.target.url !== '') {
if (res.target.url === 'application1') {
....
this.loading.today = false;
this.alertsToday$.next(options.today);
}else {
if (res.target.url === 'application2') {
...
...
this.loading.daily = false;
this.alertsDaily$.next(options.daily);
} else {
....
....
this.loading.daily = false;
this.alertsDaily$.next(options.daily);
}
}
}else {
this.reportsToday$.next(res.result[0]);
}
}
});
}
The problem here is it doesn't display the observable data. When I run the application there's no error, but it doesn't display the data of displayAlert$, reportsToday$, alertsToday$ and alertsDaily$.
I used service it because, I will use it from the other components.
How to get the observable from service and display it on home component?
In component you can't see the variable directly from service. It should be from component itself.
Also you need to subscribe the values you are firing with .next(). Unless you subscribe them , the value won't be set.
I think new BehaviorSubject(undefined); is causing the problem.
Can you initialize like new BehaviorSubject([]); or if it is string then new BehaviorSubject(''); and if number then new BehaviorSubject(0);
I am assuming that you have correctly called service from components.

Angular jqxSchedular source localData Can't bind from remote

I am trying to use jqxSchedular for my web app.
Schedular couldn't bind from remote data.
Here is my Angular component:
export class CourseScheduleComponent implements OnInit {
appointmentDataFields: any =
{
from: "start",
to: "end",
description: "description",
subject: "subject",
resourceId: "calendar"
};
source = {
dataType: "array",
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'subject', type: 'string' },
{ name: 'calendar', type: 'string' },
{ name: 'start', type: 'date' },
{ name: 'end', type: 'date' }
],
localData: []
}
resources: any =
{
colorScheme: "scheme04",
dataField: "calendar",
source: new jqx.dataAdapter(this.source)
};
dataAdapter: any;
date: any = new jqx.date();
views: string[] | any[] =
[
'dayView',
'weekView',
'monthView',
'agendaView'
];
constructor(private repository: RepositoryService,private router: Router,
private activeRoute: ActivatedRoute ) { }
ngOnInit() {
this.getCourseSchedules().subscribe(res=>{
this.source.localData = res as CourseSchedule[];
},err=>{
console.log(err);
});
this.dataAdapter = new jqx.dataAdapter(this.source)
}
getCourseSchedules()
{
var courseId : string = this.activeRoute.snapshot.params['id'];
var apiUrl = `/api/course/schedule?courseId=${courseId}`;
return this.repository.getData(apiUrl).pipe(
map(data => {
let schedules = data as CourseSchedule[];
let newSchedules:CourseSchedule[] = [];
schedules.forEach((schedule) => {
const {start,end,...other} = schedule;
newSchedules.push(<CourseSchedule>{
start: new Date(start),
end: new Date(end),
...other
})
});
return newSchedules;
})
);
}
}
When I debug the ngOnInit there is no problem with setting localData. But when I consolled log source,it shows localdata is null.
I couldnt find for remote databinding example for Angular jqxSchedular.
So ,basicly it works with local data but at remote it doesnt work.
Please help about this.
You have to add them from the jqx component using addAppointment method as below:
getCourseSchedules()
{
let self = this;
var courseId : string = this.activeRoute.snapshot.params['id'];
var apiUrl = `/api/course/schedule?courseId=${courseId}`;
return this.repository.getData(apiUrl).pipe(
map(data => {
let schedules = data as CourseSchedule[];
let newSchedules:CourseSchedule[] = [];
schedules.forEach((schedule) => {
const {start,end,...other} = schedule;
var appointment = {
start: new Date(start),
end: new Date(end),
..other
};
self.myScheduler.addAppointment(appointment);
});
})
);
}
Please refer to the API for more details.

React.DOM: Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

Being a newbie to the React community...I'm blocked (for hours now) and unable to trace a solution to fix the error posted above:
Am I missing the right parameters to how the data object is fetched in through the app?
This is my ajax data response
The bug is living on props.personList.map inside of const ListContainer
For context here's the code on the entire file:
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
}).catch(err => console.log(err));
}
let getLastName = (fullName) => {
return fullName.match(/\w+/g)[1];
};
const getFirstName = (fullName) => {
return fullName.match(/\w+/g)[0];
};
//Remove any people that do not have the name we are searching for
let filterByName = (searchForName, personList) => {
return personList.filter((person) => {
return person.name === searchForName;
});
};
//VIEW (React)
const Search = ({ onChange }) => React.DOM.input({
type: 'input',
onChange
});
const Thumbnail = ({src}) => React.DOM.img({
className: 'image',
src
});
//CODE BREAKS HERE
const ListRow = (props) => React.DOM.tr({ key: props.person.name }, [
React.DOM.td({ key: 'headshot' }, React.createElement(Thumbnail, { src: props.person.url })),
React.DOM.td({ key: 'firstName' }, null, getFirstName(props.person.name)),
React.DOM.td({ key: 'lastName' }, null, getLastName(props.person.name)),
]);
const ListContainer = (props) => React.DOM.table({ className: 'list-container' }, [
React.DOM.thead({ key: 'firstName' }, React.DOM.tr({}, [
React.DOM.th({ key: 'lastName' }, null, 'headshot'),
React.DOM.th({ key: 'id' }, null, 'First Name'),
React.DOM.th({ key: 'last-h' }, null, 'Last Name')
])),
React.DOM.tbody({ key: 'tbody' }, props.personList.map((person, i) =>
React.createElement(ListRow, { key: `person-${i}`, person })))
]);
const App = React.createClass({
getInitialState() {
return {
personList: [],
visiblePersonList: []
};
},
componentDidMount() {
getPersonList().then((data) =>
this.setState({
data,
visiblePersonList: data
}));
},
_shuffleList() {
this.setState({
visiblePersonList: shuffleList(this.state.personList)
});
},
_sortByFirst() {
this.setState({
visiblePersonList: sortByFirstName(this.state.personList)
});
},
_sortByLast() {
this.setState({
visiblePersonList: sortByLastName(this.state.personList)
});
},
_onSearch(e) {
this.setState({
visiblePersonList: filterByName(e.target.value, this.state.personList)
});
},
render() {
const { visiblePersonList } = this.state;
return React.DOM.div({ className: 'app-container' }, [
React.createElement(Search, { key: 'search', onChange: this._onSearch }),
React.DOM.button({ key: 'shuffle', onClick: this._shuffleList }, null, 'Shuffle'),
React.DOM.button({ key: 'sort-first', onClick: this._sortByFirst }, null, 'Sort (First Name)'),
React.DOM.button({ key: 'sort-last', onClick: this._sortByLast }, null, 'Sort (Last Name)'),
React.createElement(ListContainer, { key: 'list', personList: visiblePersonList })
]);
}
});
ReactDOM.render(<App />, document.getElementById('app'));
Your callback with the console.log accesses the value and then discards it.
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
}).catch(err => console.log(err));
}
should be
function getPersonList() {
const api = 'apistring';
return axios.get(api).then(res => {
console.log(res);
return res.data.items;
}).catch(err => console.log(err));
}
When you use .then you are inserting a link into your promise chain. The value returned by .then becomes the value passed to the next handler. Because you are not returning any value, your
getPersonList().then((data) => {
// ...
});
callback will get data as undefined.
Another thing to note, though don't cause this specific error, is that your screenshot shows objects with .firstName and .lastName but all of the code in this file uses .name which does not exist.

Categories