5
Answers

Cannot read property , undefined in node js

SeethaPartha

SeethaPartha

7y
300
1
his is my project with angular cli. I tried sql server as backend for my project and to configure it, I have created node server file with node js. While posting my data to Component page, it shows below error. Please check and assist me further to proceed.Thanks in advance.
Here are my codes.
 
server.js
 
var express = require('express'); // Web Framework
var app = express();
var sql = require('mssql'); // MS Sql Server client
// Connection string parameters.
var sqlConfig = {
user: 'sa',
password: 'Server@2009',
server: '172.20.10.95',
database: 'sample'
}
// Start server and listen on http://localhost:8080/
var server = app.listen(8080, function () {
var host = server.address().address
var port = server.address().port
console.log("app listening at http://%s:%s", host, port)
});
var connection = sql.connect(sqlConfig, function (err) {
if (err)
throw err;
});
module.exports = connection;
app.get('/Employee', function (req, res, err) {
var request = new sql.Request();
request.query('select * from employee', function(err, recordset) {
if(err) console.log(err);
res.end(JSON.stringify(recordset)); // Result in JSON format
});
});
 
ApiService
 
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';
import {Http} from '@angular/http';
import { Employee } from './Employee';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class ApiService {
private heroesUrl = 'http://localhost:8080/Employee';
/** GET heroes from the server */
getHeroes (): Observable<Employee[]> {
return (this.http.get<Employee[]>(this.heroesUrl));
}
constructor( private http: HttpClient,
) { }
}
// @Injectable()
// export class HeroService {
// private heroesUrl = 'api/heroes'; // URL to web api
// constructor(
// private http: HttpClient,
// private messageService: MessageService) { }
// /** GET heroes from the server */
// getHeroes (): Observable<Hero[]> {
// return this.http.get<Hero[]>(this.heroesUrl)
// .pipe(
// tap(heroes => this.log(`fetched heroes`)),
// catchError(this.handleError('getHeroes', []))
// );
// }
// /** GET hero by id. Return `undefined` when id not found */
// getHeroNo404<Data>(id: number): Observable<Hero> {
// const url = `${this.heroesUrl}/?id=${id}`;
// return this.http.get<Hero[]>(url)
// .pipe(
// map(heroes => heroes[0]), // returns a {0|1} element array
// tap(h => {
// const outcome = h ? `fetched` : `did not find`;
// this.log(`${outcome} hero id=${id}`);
// }),
// catchError(this.handleError<Hero>(`getHero id=${id}`))
// );
// }
// /** GET hero by id. Will 404 if id not found */
// getHero(id: number): Observable<Hero> {
// const url = `${this.heroesUrl}/${id}`;
// return this.http.get<Hero>(url).pipe(
// tap(_ => this.log(`fetched hero id=${id}`)),
// catchError(this.handleError<Hero>(`getHero id=${id}`))
// );
// }
// /* GET heroes whose name contains search term */
// searchHeroes(term: string): Observable<Hero[]> {
// if (!term.trim()) {
// // if not search term, return empty hero array.
// return of([]);
// }
// return this.http.get<Hero[]>(`api/heroes/?name=${term}`).pipe(
// tap(_ => this.log(`found heroes matching "${term}"`)),
// catchError(this.handleError<Hero[]>('searchHeroes', []))
// );
// }
// //////// Save methods //////////
// /** POST: add a new hero to the server */
// addHero (hero: Hero): Observable<Hero> {
// return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
// tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
// catchError(this.handleError<Hero>('addHero'))
// );
// }
// /** DELETE: delete the hero from the server */
// deleteHero (hero: Hero | number): Observable<Hero> {
// const id = typeof hero === 'number' ? hero : hero.id;
// const url = `${this.heroesUrl}/${id}`;
// return this.http.delete<Hero>(url, httpOptions).pipe(
// tap(_ => this.log(`deleted hero id=${id}`)),
// catchError(this.handleError<Hero>('deleteHero'))
// );
// }
// /** PUT: update the hero on the server */
// updateHero (hero: Hero): Observable<any> {
// return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
// tap(_ => this.log(`updated hero id=${hero.id}`)),
// catchError(this.handleError<any>('updateHero'))
// );
// }
// /**
// * Handle Http operation that failed.
// * Let the app continue.
// * @param operation - name of the operation that failed
// * @param result - optional value to return as the observable result
// */
// private handleError<T> (operation = 'operation', result?: T) {
// return (error: any): Observable<T> => {
// // TODO: send the error to remote logging infrastructure
// console.error(error); // log to console instead
// // TODO: better job of transforming error for user consumption
// this.log(`${operation} failed: ${error.message}`);
// // Let the app keep running by returning an empty result.
// return of(result as T);
// };
// }
// /** Log a HeroService message with the MessageService */
// private log(message: string) {
// this.messageService.add('HeroService: ' + message);
// }
// }
 
Appcomponent.ts
 
import { Component } from '@angular/core';
import{HttpClient,HttpHeaders} from '@angular/common/http';
import {Http} from '@angular/http';
import { Observable} from 'rxjs/Observable';
import {Employee} from './Employee';
import { Response } from '@angular/http/src/static_response';
import { error } from 'selenium-webdriver';
import { ApiService } from './api.service';
import { catchError, map, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
//url:String="http://localhost:8081/Employee";
Employeedata:Employee[];
ngOnInit(){
this.getdata();
}
getdata():void{
this.apiservice.getHeroes().subscribe(res=>this.Employeedata=res);
}
constructor(private http : Http,private apiservice:ApiService){
}
}
// getHeroes(): void {
// this.heroService.getHeroes()
// .subscribe(heroes => this.heroes = heroes);
// /** GET heroes from the server */
// getHeroes (): Observable<Hero[]> {
// return this.http.get<Hero[]>(this.heroesUrl)
// .pipe(
// tap(heroes => this.log(`fetched heroes`)),
Appcomponent.html
<div>
<table>
<tr >
<td>
Id:{{Employeedata.EmpNo}}
<br/>
Name:{{Employeedata.EmpName}}
<br/>
Salary:{{Employeedata.EmpSalary}}
<br/>
Dept:{{Employeedata.EmpDept}}
<br/>
</td>
</tr>
</table>
</div>
 
 
Answers (5)
0
sankeerth R

sankeerth R

NA 98 3.9k 7y
Initialize array like this and try to execute..
 
Employeedata:Employee[]=[];
0
SeethaPartha

SeethaPartha

NA 43 1.8k 7y
Can you please tell which file paths and all i need to check as i checked it already. whether i need to change my data from APi in any other format??  Please if any others know kindly guide.
0
Ankit Sharma

Ankit Sharma

NA 8.8k 140.9k 7y
Hi,
Your code looks correct to me.
There may be some issue with file paths since Employeedata is not getting initialized with Employee class.
0
SeethaPartha

SeethaPartha

NA 43 1.8k 7y
I Have created .
 
export class Employee{
EmpNo :number;
EmpName :string;
EmpSalary :number;
EmpDept :number;
}
 
That alone i have imported in Appcomponent.ts file
0
Ankit Sharma

Ankit Sharma

NA 8.8k 140.9k 7y
Hi,
 
Where is your Employee class?
 
You need to create a class file with Employee properties.