<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="style.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 angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

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'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //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 {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { RouterModule, RouteReuseStrategy } from '@angular/router';
import { SearchComponent } from './search.component';
import { EditComponent } from './edit.component';
import { CustomReuseStrategy } from './custom-reuse-strategy';
import { SimpleReuseStrategy } from './simple-reuse-strategy';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
      <h2>Angular reuse strategy</h2>
      <router-outlet></router-outlet>
  </div>
  `,
})
export class App {
  constructor() {
  }
}

@NgModule({
  imports: [ 
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'search', pathMatch: 'full' },
      { path: 'search', component: SearchComponent },
      { path: 'edit/:id', component: EditComponent }
    ])
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
  ],
  declarations: [
    App, SearchComponent, EditComponent
  ],
  bootstrap: [ App ]
})
export class AppModule {}
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-search',
    template: `
  <p><strong>Search List</strong></p>
  <input type="text" [(ngModel)]="q" placeholder="email, keywords: ab">
  <button (click)="search()">Search</button>
  <table class="table mt-3" *ngIf="list.length > 0">
    <thead>
        <tr>
            <th>name</th>
            <th>email</th>
            <th>gender</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let i of list">
            <th>{{i.name.last}} {{i.name.first}}</th>
            <th>{{i.email}}</th>
            <th>{{i.gender}}</th>
            <th><a [routerLink]="['/edit', i.login.md5]">edit</a></th>
        </tr>
    </tbody>
  </table>
  `,
})
export class SearchComponent {
    q = '';
    list: any[] = [];

    constructor(private http: HttpClient) {
        console.log('constructor', 'search page');
    }

    search() {
        this.http
            .get(`./assets/data.json`)
            .map((res: any[]) => {
                console.log('load data');
                return res.filter(w => w.email.includes(this.q));
            })
            .subscribe(res => this.list = res);
    }
}
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-edit',
    template: `
  <h2>edit</h2>
  <div *ngIf="i">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10"><p class="form-control-plaintext">{{i.name.last}} {{i.name.first}}</p></div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10"><p class="form-control-plaintext">{{i.email}}</p></div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">gender</label>
        <div class="col-sm-10"><p class="form-control-plaintext">{{i.gender}}</p></div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">username</label>
        <div class="col-sm-10"><p class="form-control-plaintext">{{i.login.username}}</p></div>
    </div>
    <button (click)="save()" class="btn btn-primary">Save</button>
  </div>
  `
})
export class EditComponent implements OnInit {
    id: string;
    i: any;

    constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.route.params.subscribe(p => {
            this.id = p['id'];
            this.get();
        });
    }

    get() {
        this.http
            .get(`./assets/data.json`)
            .map((res: any[]) => {
                return res.find(w => w.login.md5 === this.id);
            })
            .subscribe(res => this.i = res);
    }

    save() {
        this.router.navigate([ '/search' ]);
    }
}
// tslint:disable
import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

    _cacheRouters: { [key: string]: any } = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // 对所有路由允许复用
        return true;
    }
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        // 按path作为key存储路由快照&组件当前实例对象
        // path等同RouterModule.forRoot中的配置
        this._cacheRouters[route.routeConfig.path] = {
            snapshot: route,
            handle: handle
        };
    }
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        // 在缓存中有的都认为允许还原路由
        return !!route.routeConfig && !!this._cacheRouters[route.routeConfig.path];
    }
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        // 从缓存中获取快照,若无则返回null
        if (!route.routeConfig || !this._cacheRouters[route.routeConfig.path]) return null;
        return this._cacheRouters[route.routeConfig.path].handle;
    }
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        // 同一路由时复用路由
        return future.routeConfig === curr.routeConfig;
    }
}
[{
  "gender": "female",
  "name": {
    "title": "ms",
    "first": "abigail",
    "last": "morgan"
  },
  "location": {
    "street": "3481 victoria road",
    "city": "newcastle upon tyne",
    "state": "west glamorgan",
    "postcode": "BV2Y 5LN"
  },
  "email": "abigail.morgan@example.com",
  "login": {
    "username": "beautifulrabbit373",
    "password": "santana",
    "salt": "GTrIFNEw",
    "md5": "18bcedf31f14fa652f5d82b52349099b",
    "sha1": "3b65fa5f116157c4b221d3fd02e526f1e8d6b96f",
    "sha256": "18430224c7fcb3dc723388899a47aed8b58e01660fa5cff8c82c9e346fc34da6"
  },
  "dob": "1995-04-13 23:15:24",
  "registered": "2013-09-14 07:09:29",
  "phone": "0115854 898 3779",
  "cell": "0776-316-405",
  "id": {
    "name": "NINO",
    "value": "BX 02 17 84 N"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/23.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/23.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/23.jpg"
  },
  "nat": "GB"
}, {
  "gender": "female",
  "name": {
    "title": "miss",
    "first": "oya",
    "last": "koyuncu"
  },
  "location": {
    "street": "7351 bağdat cd",
    "city": "eskişehir",
    "state": "kırıkkale",
    "postcode": 92587
  },
  "email": "oya.koyuncu@example.com",
  "login": {
    "username": "greenbutterfly241",
    "password": "edgar",
    "salt": "mgGvjSBL",
    "md5": "3fc84202aa829eee6ba8f4d64e14fb64",
    "sha1": "d6deb1c80e6ca88aa4474b860213b9850cceba56",
    "sha256": "af5504fd7ca04ec84f4f1ee4d572bf08802ef448210dcf0086413db80332bb4e"
  },
  "dob": "1982-08-23 11:26:53",
  "registered": "2014-07-13 02:22:38",
  "phone": "(169)-217-3134",
  "cell": "(961)-254-7369",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/61.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/61.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/61.jpg"
  },
  "nat": "TR"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "xavier",
    "last": "campbell"
  },
  "location": {
    "street": "4859 frederick ave",
    "city": "victoria",
    "state": "northwest territories",
    "postcode": 18788
  },
  "email": "xavier.campbell@example.com",
  "login": {
    "username": "blackbear876",
    "password": "2580",
    "salt": "f9yBs1dd",
    "md5": "1e2242779e4ed9f89514c04450d10d29",
    "sha1": "cac81f79996c836a9408f5260f93593db6fa441f",
    "sha256": "a03138606dc7f49097f31336f16ef9aca3cb10447137dc5f01215b139f6df1eb"
  },
  "dob": "1952-10-30 15:10:55",
  "registered": "2007-10-30 04:33:19",
  "phone": "967-432-2132",
  "cell": "128-141-2005",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/22.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/22.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/22.jpg"
  },
  "nat": "CA"
}, {
  "gender": "female",
  "name": {
    "title": "madame",
    "first": "victoire",
    "last": "philippe"
  },
  "location": {
    "street": "3208 place du 8 novembre 1942",
    "city": "grancy",
    "state": "neuchâtel",
    "postcode": 2483
  },
  "email": "victoire.philippe@example.com",
  "login": {
    "username": "beautifulfrog819",
    "password": "1776",
    "salt": "zeienAe0",
    "md5": "c0b3f2514e88404372cd08c6520a4d93",
    "sha1": "18660f64aabacca8de986104d5556f275527ba6c",
    "sha256": "f8c6b37d3e5d5282401dad048084e74c9f929e033caf0c3198cfb9cf0ba2d84c"
  },
  "dob": "1969-06-27 01:36:56",
  "registered": "2007-07-22 08:02:21",
  "phone": "(414)-130-4676",
  "cell": "(030)-847-6683",
  "id": {
    "name": "AVS",
    "value": "756.GLUN.FMGX.30"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/92.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/92.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/92.jpg"
  },
  "nat": "CH"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "marcel",
    "last": "sauer"
  },
  "location": {
    "street": "6926 tannenweg",
    "city": "nienburg (weser)",
    "state": "hamburg",
    "postcode": 58625
  },
  "email": "marcel.sauer@example.com",
  "login": {
    "username": "ticklishfrog424",
    "password": "000007",
    "salt": "i8LaVVea",
    "md5": "2855cb6dbf7dcefc9f3c8d77fefbd2a9",
    "sha1": "1997f3a84c2b927712c1132f482ddff295139936",
    "sha256": "271138b9a8372e7a0c2076a886f8744c9cab24b976b11f8a91b0143a5250fa04"
  },
  "dob": "1973-12-17 16:58:37",
  "registered": "2011-10-20 11:43:06",
  "phone": "0182-1523145",
  "cell": "0175-4286272",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/23.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/23.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/23.jpg"
  },
  "nat": "DE"
}, {
  "gender": "female",
  "name": {
    "title": "ms",
    "first": "agnieszka",
    "last": "kerkhoven"
  },
  "location": {
    "street": "9024 adriaen van ostadelaan",
    "city": "tiel",
    "state": "utrecht",
    "postcode": 43167
  },
  "email": "agnieszka.kerkhoven@example.com",
  "login": {
    "username": "blackcat331",
    "password": "flyfish",
    "salt": "2FCje3KQ",
    "md5": "3a2af808b48cb54cf80ed89fa7bb0528",
    "sha1": "dad3c8ec79afd77fbafe70fd617eb568d79c1782",
    "sha256": "91b61f99b97e0c77001a99be335726a1c41d89f3cec9ed40fa98de71f6b7b45d"
  },
  "dob": "1978-11-21 07:46:21",
  "registered": "2015-04-02 13:43:47",
  "phone": "(106)-064-4925",
  "cell": "(187)-656-7041",
  "id": {
    "name": "BSN",
    "value": "09489564"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/87.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/87.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/87.jpg"
  },
  "nat": "NL"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "enrique",
    "last": "anderson"
  },
  "location": {
    "street": "5878 richmond park",
    "city": "carrigaline",
    "state": "cork city",
    "postcode": 24363
  },
  "email": "enrique.anderson@example.com",
  "login": {
    "username": "goldensnake878",
    "password": "jayjay",
    "salt": "NNHozulm",
    "md5": "3cd0491332699e24a654b164aa20d64c",
    "sha1": "dc013cd66297a10a51a4a0a9f4d2d8739932dc4b",
    "sha256": "c876bf468a55e48cfdc37c7ddd006de7832529335f430e7fa6a7f7409fe1f153"
  },
  "dob": "1952-07-02 13:49:08",
  "registered": "2003-10-13 11:46:33",
  "phone": "041-577-8013",
  "cell": "081-970-9913",
  "id": {
    "name": "PPS",
    "value": "5426816T"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/48.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/48.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/48.jpg"
  },
  "nat": "IE"
}, {
  "gender": "female",
  "name": {
    "title": "ms",
    "first": "heather",
    "last": "ellis"
  },
  "location": {
    "street": "7834 school lane",
    "city": "city of london",
    "state": "dumfries and galloway",
    "postcode": "KZ0 6SA"
  },
  "email": "heather.ellis@example.com",
  "login": {
    "username": "blackkoala779",
    "password": "sheep",
    "salt": "h2eYg0Dh",
    "md5": "daebc135887db88730a6dbecca334907",
    "sha1": "405246f8baa21ec903b0172ce40ae251321ea195",
    "sha256": "68b4db21a5a96a78d63bbc344ef65328db64e15ac80054b7228c7d0518304878"
  },
  "dob": "1979-12-08 05:24:00",
  "registered": "2010-01-20 10:34:22",
  "phone": "016977 3343",
  "cell": "0779-069-045",
  "id": {
    "name": "NINO",
    "value": "TP 84 56 83 U"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/55.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/55.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/55.jpg"
  },
  "nat": "GB"
}, {
  "gender": "female",
  "name": {
    "title": "ms",
    "first": "crystal",
    "last": "rogers"
  },
  "location": {
    "street": "7796 lakeview st",
    "city": "palm bay",
    "state": "west virginia",
    "postcode": 17294
  },
  "email": "crystal.rogers@example.com",
  "login": {
    "username": "silverfrog986",
    "password": "killme",
    "salt": "dVrpf2Fv",
    "md5": "35dee3745b629d9d7d618165f9bba67f",
    "sha1": "4b37ad7fba041579b73a2e4f04f6386c272d204a",
    "sha256": "b207c99ea3ecd54f92b844d2e259492d79302ccadb3cb61f28b3fbb5adc93ab2"
  },
  "dob": "1988-04-24 17:51:18",
  "registered": "2002-12-26 13:31:31",
  "phone": "(729)-084-0385",
  "cell": "(419)-537-4559",
  "id": {
    "name": "SSN",
    "value": "888-30-9374"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/34.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/34.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/34.jpg"
  },
  "nat": "US"
}, {
  "gender": "female",
  "name": {
    "title": "mrs",
    "first": "یسنا",
    "last": "كامياران"
  },
  "location": {
    "street": "7682 واعظی",
    "city": "یزد",
    "state": "مازندران",
    "postcode": 91623
  },
  "email": "یسنا.كامياران@example.com",
  "login": {
    "username": "purplelion621",
    "password": "19841984",
    "salt": "2bzKfSS6",
    "md5": "d2581aa4f0d181a90c48062d202e5f8d",
    "sha1": "a1982e223aeac8f7aedb8c64c059d6023f9fcab8",
    "sha256": "49325a0ab1d4e4098762c490149d068a5c0f6b2bcd54ec9fd80fbb344104f50d"
  },
  "dob": "1993-02-10 16:34:12",
  "registered": "2004-08-28 20:55:05",
  "phone": "054-27665214",
  "cell": "0925-074-6759",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/32.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/32.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/32.jpg"
  },
  "nat": "IR"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "hudson",
    "last": "clarke"
  },
  "location": {
    "street": "9286 port hills road",
    "city": "whanganui",
    "state": "west coast",
    "postcode": 42695
  },
  "email": "hudson.clarke@example.com",
  "login": {
    "username": "smalltiger725",
    "password": "donuts",
    "salt": "fAp2knOx",
    "md5": "67aee9e1f5adb039a1e7ac75cca1e95a",
    "sha1": "8e95cff3b0980784c2d846f1b3f15c71157045a5",
    "sha256": "0333fe263ccaadc1a7ebe32dfebf039a0460573b7e6443b144761d00f623cdb8"
  },
  "dob": "1970-08-04 07:17:47",
  "registered": "2015-10-04 19:35:18",
  "phone": "(043)-033-3063",
  "cell": "(806)-285-9709",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/19.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/19.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/19.jpg"
  },
  "nat": "NZ"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "عرشيا",
    "last": "کامروا"
  },
  "location": {
    "street": "7533 سباری",
    "city": "یزد",
    "state": "گیلان",
    "postcode": 86233
  },
  "email": "عرشيا.کامروا@example.com",
  "login": {
    "username": "tinypeacock400",
    "password": "gargoyle",
    "salt": "PEjKRpM3",
    "md5": "d9cdae5c3680b9953ad809c02aba3aaa",
    "sha1": "1c47870ba50780eafe2ae7b9eb5331ec7685ed5f",
    "sha256": "e6021eb2148bfc8dc1cc4d4df7b02c1bd7ac3ef54f94f5d102851fea7a7f4e7c"
  },
  "dob": "1993-04-27 18:45:56",
  "registered": "2010-11-04 14:48:03",
  "phone": "065-67508197",
  "cell": "0953-838-1815",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/92.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/92.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/92.jpg"
  },
  "nat": "IR"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "dylan",
    "last": "chen"
  },
  "location": {
    "street": "7159 main street east",
    "city": "upper hutt",
    "state": "bay of plenty",
    "postcode": 55972
  },
  "email": "dylan.chen@example.com",
  "login": {
    "username": "goldenfrog367",
    "password": "lifetime",
    "salt": "VAoEFfEc",
    "md5": "a1d68c6e533f776058413f2e65c2f820",
    "sha1": "e16d51d4bde74d424a360058f78ac8ea0e291777",
    "sha256": "463eec9720a7721d29d708be06a54227ef87a5d6ba602efb643ce7752ce0c4ab"
  },
  "dob": "1960-09-01 06:31:24",
  "registered": "2008-03-13 12:13:36",
  "phone": "(357)-903-8915",
  "cell": "(206)-835-3354",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/25.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/25.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/25.jpg"
  },
  "nat": "NZ"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "hans",
    "last": "köster"
  },
  "location": {
    "street": "5359 waldweg",
    "city": "bad doberan",
    "state": "rheinland-pfalz",
    "postcode": 53670
  },
  "email": "hans.köster@example.com",
  "login": {
    "username": "crazyleopard638",
    "password": "skunk",
    "salt": "M3jxmm0s",
    "md5": "9b74bf37987c2828f57383180285513a",
    "sha1": "3b315c5561e44a218cf231717d3bfbca7410d825",
    "sha256": "32aaafe58edb2f699a2d916668c25f0a0d43f5fa31ce67c822ceb74f902a5f92"
  },
  "dob": "1969-10-29 13:09:24",
  "registered": "2005-10-31 03:10:18",
  "phone": "0109-2250208",
  "cell": "0174-4397200",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/46.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/46.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/46.jpg"
  },
  "nat": "DE"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "earl",
    "last": "price"
  },
  "location": {
    "street": "7472 mockingbird hill",
    "city": "surrey",
    "state": "minnesota",
    "postcode": 24440
  },
  "email": "earl.price@example.com",
  "login": {
    "username": "heavywolf145",
    "password": "chiefs",
    "salt": "ufuaExL9",
    "md5": "512392d2973851dcaa4bffe2bd10834e",
    "sha1": "2feae53f19ef2623e41424393e1538d9008a6b95",
    "sha256": "9fcca672006fe2f3d033b0bc2092a728246a705d4d27f13fe318a3bc3b4a0106"
  },
  "dob": "1950-10-17 22:27:52",
  "registered": "2007-09-27 07:50:41",
  "phone": "(602)-956-9169",
  "cell": "(511)-547-1704",
  "id": {
    "name": "SSN",
    "value": "091-41-3503"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/86.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/86.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/86.jpg"
  },
  "nat": "US"
}, {
  "gender": "female",
  "name": {
    "title": "mrs",
    "first": "nicole",
    "last": "black"
  },
  "location": {
    "street": "9110 forest ln",
    "city": "fresno",
    "state": "maryland",
    "postcode": 75145
  },
  "email": "nicole.black@example.com",
  "login": {
    "username": "beautifulduck831",
    "password": "ne1469",
    "salt": "LY4LfQUN",
    "md5": "513ca1537c007d9035a68b4ba469e509",
    "sha1": "b092c5aafac7d3600a7ee6233ab92d063bb3feae",
    "sha256": "ad672b2388585f4e557a0b89938421b14d124c26d2535c0abd31e00ecec703cd"
  },
  "dob": "1982-05-14 18:02:44",
  "registered": "2013-01-06 15:18:00",
  "phone": "(755)-812-9075",
  "cell": "(487)-683-7716",
  "id": {
    "name": "SSN",
    "value": "025-66-9425"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/95.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/95.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/95.jpg"
  },
  "nat": "US"
}, {
  "gender": "male",
  "name": {
    "title": "mr",
    "first": "levi",
    "last": "hayes"
  },
  "location": {
    "street": "5738 white oak dr",
    "city": "geraldton",
    "state": "australian capital territory",
    "postcode": 9861
  },
  "email": "levi.hayes@example.com",
  "login": {
    "username": "yellowmeercat534",
    "password": "webber",
    "salt": "hN97AMkq",
    "md5": "33126f5bcecf3a1a678e2bd957d64e26",
    "sha1": "153b6301105ff6ce34b5cd93bf7cd6d9cbebb265",
    "sha256": "8919c5f77cb00adf6ce49df4ff69c2c4040dc354cb7d12d3b5b7ec15c30c54d0"
  },
  "dob": "1948-07-22 14:00:39",
  "registered": "2016-04-15 09:05:13",
  "phone": "00-2998-9390",
  "cell": "0499-767-197",
  "id": {
    "name": "TFN",
    "value": "909580877"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/men/90.jpg",
    "medium": "https://randomuser.me/api/portraits/med/men/90.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/men/90.jpg"
  },
  "nat": "AU"
}, {
  "gender": "female",
  "name": {
    "title": "ms",
    "first": "isabella",
    "last": "wright"
  },
  "location": {
    "street": "3992 southampton street",
    "city": "invercargill",
    "state": "northland",
    "postcode": 25775
  },
  "email": "isabella.wright@example.com",
  "login": {
    "username": "bigmouse481",
    "password": "abgrtyu",
    "salt": "R5STx1Wg",
    "md5": "847a8982f93903eaa9c928ceff47bde5",
    "sha1": "339c9b626411bec531555a09da125cb317ab0cda",
    "sha256": "b82e41194fb398e39869134af1d08e04dc89607c6c1faa6df77e108dcbd8f703"
  },
  "dob": "1980-04-17 01:01:34",
  "registered": "2002-05-05 09:38:19",
  "phone": "(953)-937-3539",
  "cell": "(928)-879-0642",
  "id": {
    "name": "",
    "value": null
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/30.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/30.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/30.jpg"
  },
  "nat": "NZ"
}, {
  "gender": "female",
  "name": {
    "title": "mrs",
    "first": "ellen",
    "last": "walli"
  },
  "location": {
    "street": "6605 pispalan valtatie",
    "city": "mänttä",
    "state": "kainuu",
    "postcode": 76797
  },
  "email": "ellen.walli@example.com",
  "login": {
    "username": "organicswan568",
    "password": "hunting",
    "salt": "3V6iYM5d",
    "md5": "31aafaf77df7b83140a3a0b5543ae8dd",
    "sha1": "dd84418b59b9248c772e200ce3307c5a0ba68f02",
    "sha256": "238bf01c7783d44fd7f7c6d7390556d2e5f275c066b7e83a4a4ad1cb23db398e"
  },
  "dob": "1961-10-30 12:29:07",
  "registered": "2014-06-01 10:12:42",
  "phone": "06-225-850",
  "cell": "044-998-73-76",
  "id": {
    "name": "HETU",
    "value": "1061-5385"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/32.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/32.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/32.jpg"
  },
  "nat": "FI"
}, {
  "gender": "female",
  "name": {
    "title": "mrs",
    "first": "khouloud",
    "last": "pruijn"
  },
  "location": {
    "street": "9858 rubenslaan",
    "city": "alkmaar",
    "state": "limburg",
    "postcode": 65357
  },
  "email": "khouloud.pruijn@example.com",
  "login": {
    "username": "blackladybug741",
    "password": "mexico",
    "salt": "iJlMalMg",
    "md5": "e7cb1d6cdea9b91924d909c3a3dee7c2",
    "sha1": "2903b6c6db50edccb5c6f47b142acf6da7cf3620",
    "sha256": "899e93fc818d7cca52f4e41cd6f86e8f7182585899f7269e2063a57619ff8bd4"
  },
  "dob": "1970-09-04 18:20:57",
  "registered": "2012-10-26 07:45:54",
  "phone": "(335)-396-7974",
  "cell": "(678)-860-8545",
  "id": {
    "name": "BSN",
    "value": "83110179"
  },
  "picture": {
    "large": "https://randomuser.me/api/portraits/women/14.jpg",
    "medium": "https://randomuser.me/api/portraits/med/women/14.jpg",
    "thumbnail": "https://randomuser.me/api/portraits/thumb/women/14.jpg"
  },
  "nat": "NL"
}]