Angular2 : JSON Rendering

Question

I am new to Angular 2 and want to check if correct username and password is entered by user.

I have attached JSON format. Also i need to pass value from one component to another. IS there any feature to cache value other than localstorage.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginService]
})
export class LoginComponent {
usernameModel: string;
passwordModel: string;
validLogin: Boolean;
loginData: any;
loginDataLength: number;
  constructor(private router: Router, private loginService: LoginService) { }

  homeNav(){

    this.loginService.getLoginData()
      .subscribe(data => {
        this.loginData = data;
        this.loginDataLength = data.length;
      });

      for(var i = 0; i < this.loginDataLength; i++)
      {
        if(this.loginData[i].username === this.usernameModel){
            console.log(this.loginData[i].username+', '+this.loginData[i].password);
        }
        else{
            console.log('Login issue');
        }
      };

  }
}

/* JSON

[{
 "username": "jay",
 "password": "jay",
 "userType": "standard"
}, {
 "username": "Admin",
 "password": "Admin",
 "userType": "admin"
}, {
 "username": "newuser",
 "password": "newuser",
 "userType": "standard"
}, {
 "username": "anonmyous",
 "password": "anonmyous",
 "userType": "standard"
}]

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="loginBox">
    <div class="alert alert-danger" *ngIf="validLogin === false">
        <strong>Alert!</strong> Wrong Username/Password.
    </div>
    <form class="form-group" #loginForm="ngForm">
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" placeholder="Username" [(ngModel)]="usernameModel" name="username" #username="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="username.errors && (username.dirty || username.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!username.errors.required"></i>
          </span>
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input type="password" class="form-control" placeholder="Password" [(ngModel)]="passwordModel" name="password" #password="ngModel" required />
          <span class="input-group-addon errorBox" *ngIf="password.errors && (password.dirty || password.touched)">
              <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!password.errors.required"></i>
          </span>
        </div>
        <button class="btn btn-primary btn-block" [disabled]="!loginForm.valid" (click)="homeNav()" >Login</button>
    </form>
</div>

Are you trying to check for the correct username/password on the client? If so, you should be sending the username/password to the server to validate. — micah, Mar 28 '17 at 14:50
https://angular.io/docs/ts/latest/cookbook/component-communication.html I guess you'd want a service :) — AT82, Mar 28 '17 at 14:51

score 0 · Answer 1 · answered Mar 28 '17 at 15:23

0

You can use a shared service.

Here an official example on angular.io

answered Mar 28 '17 at 15:23

al37350

139
2
8

score 0 · Accepted Answer · answered Mar 28 '17 at 15:28

0

first you have to wait until getLoginData resolves, secondly don't bring passwords to the clients side:

   //... 

   constructor(private router: Router, private loginService: LoginService) { }

   ngOnInit(){

    this.loginService.getLoginData()
      .subscribe(data => {
        this.loginData = data;
        this.loginDataLength = data.length;
      });
  }
  homeNav(){
      for(var i = 0; i < this.loginDataLength; i++)
      {
        if(this.loginData[i].username === this.usernameModel){
            console.log(this.loginData[i].username+', '+this.loginData[i].password);
        }
        else{
            console.log('Login issue');
        }
      };

  }
}

answered Mar 28 '17 at 15:28

El houcine bougarfaoui

35,805
9
37
37

check if `this.loginData !== undefined` – El houcine bougarfaoui Mar 28 '17 at 16:55
I am getting this error "./~/rxjs/Observable.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * C:\angularjs2\testApp\node_modules\rxjs\Observable.js Used by 20 module(s), i. e. C:\angularjs2\testApp\node_modules\@angular\core\src\facade\async.j C:\angularjs2\testApp\node_modules\@ngtools\webpack\src\index.js!C:\angularjs2\testApp\src\app\detail.service.ts" – Jay Mar 28 '17 at 17:05
make sure you're importing files with their exact name. here `import { smting } from '../exact_name'` – El houcine bougarfaoui Mar 28 '17 at 17:11
Thanks for the help. Do you have any reference for cache value in a variable and pass data between 2 components while routing – Jay Mar 28 '17 at 17:15
for variable storage see https://github.com/marcj/angular2-localstorage – El houcine bougarfaoui Mar 28 '17 at 17:17
for pass data between 2 components while routing : http://stackoverflow.com/questions/37157838/angular-2-passing-data-to-routes#answer-40861275 – El houcine bougarfaoui Mar 28 '17 at 17:24
Thanks, one last query when i call this.loginService.getLoginData() inside oninit i get this.loginData undefined. do i need to call getlogindata function ngOnInit(){ this.loginService.getLoginData() .subscribe(data => { this.loginData = data; this.loginDataLength = data.length; }); if(this.loginData === undefined){ console.log('this.loginData undefined'); } else{ console.log('this.loginData successful'); } } – Jay Mar 28 '17 at 17:29

Angular2 : JSON Rendering

2 Answers2