<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.VersionsForThisPlunker = {
angular: 'latest',
jquery: 'latest',
datatables: '1.10.16',
angulardatatables: '5.0.0'
};
</script>
<title>angular-datatables playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
var versions = {};
for (var prop in window.VersionsForThisPlunker) {
if (window.VersionsForThisPlunker.hasOwnProperty(prop)) {
versions[prop] = setVersion(window.VersionsForThisPlunker[prop]);
}
}
function setVersion(version) {
if (version === 'latest') {
return ''; //picks up latest
} else {
return '@' + version;
}
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core' + versions.angular + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + versions.angular + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + versions.angular + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + versions.angular + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + versions.angular + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + versions.angular + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + versions.angular + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + versions.angular + '/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + versions.angular + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + versions.angular + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + versions.angular + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + versions.angular + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + versions.angular + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + versions.angular + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + versions.angular + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + versions.angular + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + versions.angular + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + versions.angular + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + versions.angular + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + versions.angular + '/bundles/router-testing.umd.js',
'jquery': 'npm:jquery' + versions.jquery + '/dist/jquery.js',
'datatables.net': 'npm:datatables.net' + versions.datatables + '/js/jquery.dataTables.js',
'angular-datatables': 'npm:angular-datatables' + versions.angulardatatables + '/bundles/angular-datatables.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
meta: {
// set meta for loading the local vendor files
'datatables.net': {
deps: [
'jquery'
]
},
'angular-datatables': {
deps: [
'jquery',
'datatables.net'
]
}
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {OnInit, AfterViewInit, Component, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import { HttpModule, Http, Response } from '@angular/http';
import {DataTablesModule} from 'angular-datatables';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
@Component({
selector: 'my-app',
templateUrl: 'src/app.html',
})
export class App implements OnInit, AfterViewInit{
@ViewChild(DataTableDirective)
private datatableElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
constructor(private http: Http) {
}
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10
};
this.http.get('data/data.json')
.map(this.extractData)
.subscribe(persons => {
this.persons = persons;
// Calling the DT trigger to manually render the table
this.dtTrigger.next();
this.datatableElement.dtInstance.then(
(dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
const that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this['value']) {
that
.search(this['value'])
.draw();
}
});
});
}
);
});
}
private extractData(res: Response) {
const body = res.json();
return body || [];
}
}
@NgModule({
imports: [ BrowserModule, DataTablesModule, HttpClientModule, HttpModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
[
{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
},
{
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
},
{
"id": 474,
"firstName": "Toto",
"lastName": "Bar"
},
{
"id": 476,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 464,
"firstName": "Cartman",
"lastName": "Kyle"
},
{
"id": 505,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 308,
"firstName": "Louis",
"lastName": "Kyle"
},
{
"id": 184,
"firstName": "Toto",
"lastName": "Bar"
},
{
"id": 411,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 154,
"firstName": "Luke",
"lastName": "Moliku"
},
{
"id": 623,
"firstName": "Someone First Name",
"lastName": "Moliku"
},
{
"id": 499,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 482,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 255,
"firstName": "Louis",
"lastName": "Kyle"
},
{
"id": 772,
"firstName": "Zed",
"lastName": "Whateveryournameis"
},
{
"id": 398,
"firstName": "Zed",
"lastName": "Moliku"
},
{
"id": 840,
"firstName": "Superman",
"lastName": "Lara"
},
{
"id": 894,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 591,
"firstName": "Luke",
"lastName": "Titi"
},
{
"id": 767,
"firstName": "Luke",
"lastName": "Moliku"
},
{
"id": 133,
"firstName": "Cartman",
"lastName": "Moliku"
},
{
"id": 274,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 996,
"firstName": "Superman",
"lastName": "Someone Last Name"
},
{
"id": 780,
"firstName": "Batman",
"lastName": "Kyle"
},
{
"id": 931,
"firstName": "Batman",
"lastName": "Moliku"
},
{
"id": 326,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 318,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 434,
"firstName": "Zed",
"lastName": "Bar"
},
{
"id": 480,
"firstName": "Toto",
"lastName": "Kyle"
},
{
"id": 187,
"firstName": "Someone First Name",
"lastName": "Bar"
},
{
"id": 829,
"firstName": "Cartman",
"lastName": "Bar"
},
{
"id": 937,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 355,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 258,
"firstName": "Someone First Name",
"lastName": "Moliku"
},
{
"id": 826,
"firstName": "Cartman",
"lastName": "Yoda"
},
{
"id": 586,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 32,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 676,
"firstName": "Batman",
"lastName": "Kyle"
},
{
"id": 403,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 222,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 507,
"firstName": "Zed",
"lastName": "Someone Last Name"
},
{
"id": 135,
"firstName": "Superman",
"lastName": "Whateveryournameis"
},
{
"id": 818,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 321,
"firstName": "Luke",
"lastName": "Kyle"
},
{
"id": 187,
"firstName": "Cartman",
"lastName": "Someone Last Name"
},
{
"id": 327,
"firstName": "Toto",
"lastName": "Bar"
},
{
"id": 187,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 417,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 97,
"firstName": "Zed",
"lastName": "Bar"
},
{
"id": 710,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 975,
"firstName": "Toto",
"lastName": "Yoda"
},
{
"id": 926,
"firstName": "Foo",
"lastName": "Bar"
},
{
"id": 976,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 680,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 275,
"firstName": "Louis",
"lastName": "Kyle"
},
{
"id": 742,
"firstName": "Foo",
"lastName": "Someone Last Name"
},
{
"id": 598,
"firstName": "Zed",
"lastName": "Lara"
},
{
"id": 113,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 228,
"firstName": "Superman",
"lastName": "Someone Last Name"
},
{
"id": 820,
"firstName": "Cartman",
"lastName": "Whateveryournameis"
},
{
"id": 700,
"firstName": "Cartman",
"lastName": "Someone Last Name"
},
{
"id": 556,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 687,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 794,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 349,
"firstName": "Someone First Name",
"lastName": "Whateveryournameis"
},
{
"id": 283,
"firstName": "Batman",
"lastName": "Someone Last Name"
},
{
"id": 862,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 674,
"firstName": "Cartman",
"lastName": "Bar"
},
{
"id": 954,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 243,
"firstName": "Superman",
"lastName": "Someone Last Name"
},
{
"id": 578,
"firstName": "Superman",
"lastName": "Lara"
},
{
"id": 660,
"firstName": "Batman",
"lastName": "Bar"
},
{
"id": 653,
"firstName": "Luke",
"lastName": "Whateveryournameis"
},
{
"id": 583,
"firstName": "Toto",
"lastName": "Moliku"
},
{
"id": 321,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 171,
"firstName": "Superman",
"lastName": "Kyle"
},
{
"id": 41,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 704,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 344,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 840,
"firstName": "Toto",
"lastName": "Whateveryournameis"
},
{
"id": 476,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 644,
"firstName": "Superman",
"lastName": "Moliku"
},
{
"id": 359,
"firstName": "Superman",
"lastName": "Moliku"
},
{
"id": 856,
"firstName": "Luke",
"lastName": "Lara"
},
{
"id": 760,
"firstName": "Foo",
"lastName": "Someone Last Name"
},
{
"id": 432,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 299,
"firstName": "Superman",
"lastName": "Kyle"
},
{
"id": 693,
"firstName": "Foo",
"lastName": "Whateveryournameis"
},
{
"id": 11,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 305,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 961,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 54,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 734,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 466,
"firstName": "Cartman",
"lastName": "Titi"
},
{
"id": 439,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 995,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 878,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 479,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 252,
"firstName": "Cartman",
"lastName": "Moliku"
},
{
"id": 355,
"firstName": "Zed",
"lastName": "Moliku"
},
{
"id": 355,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 694,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 882,
"firstName": "Cartman",
"lastName": "Yoda"
},
{
"id": 620,
"firstName": "Luke",
"lastName": "Lara"
},
{
"id": 390,
"firstName": "Superman",
"lastName": "Lara"
},
{
"id": 247,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 510,
"firstName": "Batman",
"lastName": "Moliku"
},
{
"id": 510,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 472,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 533,
"firstName": "Someone First Name",
"lastName": "Kyle"
},
{
"id": 725,
"firstName": "Superman",
"lastName": "Kyle"
},
{
"id": 221,
"firstName": "Zed",
"lastName": "Lara"
},
{
"id": 302,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 755,
"firstName": "Louis",
"lastName": "Someone Last Name"
},
{
"id": 671,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 649,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 22,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 544,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 114,
"firstName": "Someone First Name",
"lastName": "Titi"
},
{
"id": 674,
"firstName": "Someone First Name",
"lastName": "Lara"
},
{
"id": 571,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 554,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 203,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 89,
"firstName": "Luke",
"lastName": "Whateveryournameis"
},
{
"id": 299,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 48,
"firstName": "Toto",
"lastName": "Bar"
},
{
"id": 726,
"firstName": "Batman",
"lastName": "Whateveryournameis"
},
{
"id": 121,
"firstName": "Toto",
"lastName": "Bar"
},
{
"id": 992,
"firstName": "Superman",
"lastName": "Whateveryournameis"
},
{
"id": 551,
"firstName": "Toto",
"lastName": "Kyle"
},
{
"id": 831,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 940,
"firstName": "Luke",
"lastName": "Moliku"
},
{
"id": 974,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 579,
"firstName": "Luke",
"lastName": "Moliku"
},
{
"id": 752,
"firstName": "Cartman",
"lastName": "Yoda"
},
{
"id": 873,
"firstName": "Batman",
"lastName": "Someone Last Name"
},
{
"id": 939,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 240,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 969,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 247,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 3,
"firstName": "Cartman",
"lastName": "Whateveryournameis"
},
{
"id": 154,
"firstName": "Batman",
"lastName": "Bar"
},
{
"id": 274,
"firstName": "Toto",
"lastName": "Someone Last Name"
},
{
"id": 31,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 789,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 634,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 972,
"firstName": "Toto",
"lastName": "Kyle"
},
{
"id": 199,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 562,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 460,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 817,
"firstName": "Cartman",
"lastName": "Someone Last Name"
},
{
"id": 307,
"firstName": "Cartman",
"lastName": "Bar"
},
{
"id": 10,
"firstName": "Cartman",
"lastName": "Titi"
},
{
"id": 167,
"firstName": "Toto",
"lastName": "Someone Last Name"
},
{
"id": 107,
"firstName": "Cartman",
"lastName": "Whateveryournameis"
},
{
"id": 432,
"firstName": "Batman",
"lastName": "Kyle"
},
{
"id": 381,
"firstName": "Luke",
"lastName": "Yoda"
},
{
"id": 517,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 575,
"firstName": "Superman",
"lastName": "Kyle"
},
{
"id": 716,
"firstName": "Cartman",
"lastName": "Titi"
},
{
"id": 646,
"firstName": "Foo",
"lastName": "Whateveryournameis"
},
{
"id": 144,
"firstName": "Someone First Name",
"lastName": "Yoda"
},
{
"id": 306,
"firstName": "Luke",
"lastName": "Whateveryournameis"
},
{
"id": 395,
"firstName": "Luke",
"lastName": "Bar"
},
{
"id": 777,
"firstName": "Toto",
"lastName": "Moliku"
},
{
"id": 624,
"firstName": "Louis",
"lastName": "Someone Last Name"
},
{
"id": 994,
"firstName": "Superman",
"lastName": "Moliku"
},
{
"id": 653,
"firstName": "Batman",
"lastName": "Moliku"
},
{
"id": 198,
"firstName": "Foo",
"lastName": "Bar"
},
{
"id": 157,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 955,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 339,
"firstName": "Foo",
"lastName": "Bar"
},
{
"id": 552,
"firstName": "Batman",
"lastName": "Titi"
},
{
"id": 735,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 294,
"firstName": "Batman",
"lastName": "Bar"
},
{
"id": 287,
"firstName": "Someone First Name",
"lastName": "Bar"
},
{
"id": 399,
"firstName": "Cartman",
"lastName": "Yoda"
},
{
"id": 741,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 670,
"firstName": "Foo",
"lastName": "Bar"
},
{
"id": 260,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 294,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 294,
"firstName": "Zed",
"lastName": "Lara"
},
{
"id": 840,
"firstName": "Zed",
"lastName": "Titi"
},
{
"id": 448,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 260,
"firstName": "Luke",
"lastName": "Whateveryournameis"
},
{
"id": 119,
"firstName": "Zed",
"lastName": "Someone Last Name"
},
{
"id": 702,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 87,
"firstName": "Zed",
"lastName": "Someone Last Name"
},
{
"id": 161,
"firstName": "Foo",
"lastName": "Lara"
},
{
"id": 404,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 871,
"firstName": "Toto",
"lastName": "Lara"
},
{
"id": 908,
"firstName": "Someone First Name",
"lastName": "Moliku"
},
{
"id": 484,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 966,
"firstName": "Cartman",
"lastName": "Titi"
},
{
"id": 392,
"firstName": "Someone First Name",
"lastName": "Lara"
},
{
"id": 738,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 560,
"firstName": "Louis",
"lastName": "Kyle"
},
{
"id": 507,
"firstName": "Zed",
"lastName": "Whateveryournameis"
},
{
"id": 660,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 929,
"firstName": "Superman",
"lastName": "Moliku"
},
{
"id": 42,
"firstName": "Batman",
"lastName": "Moliku"
},
{
"id": 853,
"firstName": "Luke",
"lastName": "Titi"
},
{
"id": 977,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 104,
"firstName": "Toto",
"lastName": "Kyle"
},
{
"id": 820,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 187,
"firstName": "Batman",
"lastName": "Titi"
},
{
"id": 524,
"firstName": "Louis",
"lastName": "Yoda"
},
{
"id": 830,
"firstName": "Cartman",
"lastName": "Whateveryournameis"
},
{
"id": 156,
"firstName": "Someone First Name",
"lastName": "Lara"
},
{
"id": 918,
"firstName": "Foo",
"lastName": "Whateveryournameis"
},
{
"id": 286,
"firstName": "Batman",
"lastName": "Moliku"
},
{
"id": 715,
"firstName": "Louis",
"lastName": "Kyle"
},
{
"id": 501,
"firstName": "Superman",
"lastName": "Whateveryournameis"
},
{
"id": 463,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 419,
"firstName": "Toto",
"lastName": "Yoda"
},
{
"id": 752,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 754,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 497,
"firstName": "Someone First Name",
"lastName": "Kyle"
},
{
"id": 722,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 986,
"firstName": "Batman",
"lastName": "Someone Last Name"
},
{
"id": 908,
"firstName": "Someone First Name",
"lastName": "Titi"
},
{
"id": 559,
"firstName": "Superman",
"lastName": "Bar"
},
{
"id": 816,
"firstName": "Foo",
"lastName": "Bar"
},
{
"id": 517,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 188,
"firstName": "Superman",
"lastName": "Bar"
},
{
"id": 762,
"firstName": "Batman",
"lastName": "Someone Last Name"
},
{
"id": 872,
"firstName": "Batman",
"lastName": "Titi"
},
{
"id": 107,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 968,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 643,
"firstName": "Toto",
"lastName": "Someone Last Name"
},
{
"id": 88,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 844,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 334,
"firstName": "Batman",
"lastName": "Someone Last Name"
},
{
"id": 43,
"firstName": "Zed",
"lastName": "Lara"
},
{
"id": 600,
"firstName": "Someone First Name",
"lastName": "Kyle"
},
{
"id": 719,
"firstName": "Luke",
"lastName": "Lara"
},
{
"id": 698,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 994,
"firstName": "Zed",
"lastName": "Whateveryournameis"
},
{
"id": 595,
"firstName": "Someone First Name",
"lastName": "Someone Last Name"
},
{
"id": 223,
"firstName": "Toto",
"lastName": "Yoda"
},
{
"id": 392,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 972,
"firstName": "Toto",
"lastName": "Whateveryournameis"
},
{
"id": 155,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 956,
"firstName": "Louis",
"lastName": "Yoda"
},
{
"id": 62,
"firstName": "Foo",
"lastName": "Kyle"
},
{
"id": 689,
"firstName": "Superman",
"lastName": "Titi"
},
{
"id": 46,
"firstName": "Foo",
"lastName": "Someone Last Name"
},
{
"id": 401,
"firstName": "Toto",
"lastName": "Someone Last Name"
},
{
"id": 658,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 375,
"firstName": "Someone First Name",
"lastName": "Bar"
},
{
"id": 877,
"firstName": "Toto",
"lastName": "Someone Last Name"
},
{
"id": 923,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 37,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 416,
"firstName": "Cartman",
"lastName": "Yoda"
},
{
"id": 546,
"firstName": "Zed",
"lastName": "Yoda"
},
{
"id": 282,
"firstName": "Luke",
"lastName": "Lara"
},
{
"id": 943,
"firstName": "Superman",
"lastName": "Yoda"
},
{
"id": 319,
"firstName": "Foo",
"lastName": "Whateveryournameis"
},
{
"id": 390,
"firstName": "Louis",
"lastName": "Lara"
},
{
"id": 556,
"firstName": "Luke",
"lastName": "Kyle"
},
{
"id": 255,
"firstName": "Cartman",
"lastName": "Whateveryournameis"
},
{
"id": 80,
"firstName": "Zed",
"lastName": "Kyle"
},
{
"id": 760,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 291,
"firstName": "Louis",
"lastName": "Titi"
},
{
"id": 916,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 212,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 445,
"firstName": "Luke",
"lastName": "Whateveryournameis"
},
{
"id": 101,
"firstName": "Someone First Name",
"lastName": "Someone Last Name"
},
{
"id": 565,
"firstName": "Superman",
"lastName": "Kyle"
},
{
"id": 304,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 557,
"firstName": "Foo",
"lastName": "Titi"
},
{
"id": 544,
"firstName": "Toto",
"lastName": "Kyle"
},
{
"id": 244,
"firstName": "Zed",
"lastName": "Titi"
},
{
"id": 464,
"firstName": "Someone First Name",
"lastName": "Bar"
},
{
"id": 225,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 727,
"firstName": "Superman",
"lastName": "Someone Last Name"
},
{
"id": 735,
"firstName": "Louis",
"lastName": "Bar"
},
{
"id": 334,
"firstName": "Foo",
"lastName": "Lara"
},
{
"id": 982,
"firstName": "Batman",
"lastName": "Kyle"
},
{
"id": 48,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 175,
"firstName": "Luke",
"lastName": "Moliku"
},
{
"id": 885,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 675,
"firstName": "Toto",
"lastName": "Moliku"
},
{
"id": 47,
"firstName": "Superman",
"lastName": "Someone Last Name"
},
{
"id": 105,
"firstName": "Toto",
"lastName": "Titi"
},
{
"id": 616,
"firstName": "Cartman",
"lastName": "Lara"
},
{
"id": 134,
"firstName": "Someone First Name",
"lastName": "Someone Last Name"
},
{
"id": 26,
"firstName": "Foo",
"lastName": "Moliku"
},
{
"id": 134,
"firstName": "Toto",
"lastName": "Whateveryournameis"
},
{
"id": 680,
"firstName": "Zed",
"lastName": "Lara"
},
{
"id": 208,
"firstName": "Luke",
"lastName": "Someone Last Name"
},
{
"id": 233,
"firstName": "Someone First Name",
"lastName": "Moliku"
},
{
"id": 131,
"firstName": "Louis",
"lastName": "Moliku"
},
{
"id": 87,
"firstName": "Toto",
"lastName": "Yoda"
},
{
"id": 356,
"firstName": "Batman",
"lastName": "Kyle"
},
{
"id": 39,
"firstName": "Louis",
"lastName": "Whateveryournameis"
},
{
"id": 867,
"firstName": "Batman",
"lastName": "Lara"
},
{
"id": 382,
"firstName": "Someone First Name",
"lastName": "Bar"
}
]