Here I am stuck on printing responsibility in the project. You can refer below json to see. I am not able to access this.project.responsibility.Responsibility in HTML. Please help me. I tried many ways to access it But I cant.Please tell how can we access array within array means inside array.
project.component.html
<p-dataList [value]="projects">
<p-header>
projects
</p-header>
<ng-template let-project let-i="index" pTemplate="item">
<div class="ui-g ui-fluid car-item">
<div class="ui-g-12 ui-md-4" style="text-align:center">
</div>
<div class="ui-g-12 ui-md-8 car-details">
<div class="ui-g">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b></div>
<div class="ui-g-10 ui-sm-6"></div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ this.project.CustomerName }}</div>
<div class="ui-g-2 ui-sm-6">Responsibility: </div>
<div class="ui-g-10 ui-sm-6">{{ this.project.responsibility.Responsibility }}</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<div class="ui-g-10 ui-sm-6">{{ this.project.responsibility.description }}</div>
</div>
</div>
</div>
</ng-template>
</p-dataList>
project.component.ts
import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { PersonListService,Person, Project, ProjectResponsibility} from './person-list.service';
import {DataListModule} from 'primeng/datalist';
@Component({
moduleId: module.id,
selector: 'sd-project',
templateUrl: 'project.component.html',
styleUrls: ['project.component.css']
})
export class ProjectComponent implements OnInit {
errorMessage: any;
projects: Project[];
projectresponsibilities:ProjectResponsibility[];
constructor(public personListService:PersonListService){}
ngOnInit() {
// console.log(jwt.AuthConfig);
this.getperson();
console.log("creaea");
}
getperson(){
this.personListService.getProject()
.subscribe(
resp => this.projects = resp.Projects,
//resp => this.addresses = resp.Addresses,
error => this.errorMessage = <any>error
);
}
}
person-list.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
export class Project{
ProjectId:number;
CustomerName:string="";
ProjectTitle:string="";
ProjectType:string="";
FromDate:Date;
TodaysDate:Date;
ProjectDescription:string="";
Role:string="";
ResponsibilityId:number;
Responsibility:string="";
Description:string="";
}
export class Person{
Projects:Project [];
}
@Injectable()
export class PersonListService {
/**
* Creates a new NameListService with the injected HttpClient.
* @param {HttpClient} http - The injected HttpClient.
* @constructor
*/
constructor(private http: HttpClient) {}
/**
* Returns an Observable for the HTTP GET request for the JSON resource.
* @return {string[]} The Observable for the HTTP request.
*/
getProject(): Observable<{ Projects: Project[]}>{
console.log("Inside the get service")
return this.http.get('app/person/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
* Handle HTTP error
*/
private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
const errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}
person.json
{
"Projects": [
{
"ProjectId":1,
"CustomerName":"Abc Company",
"ProjectTitle":"Website",
"ProjectType":"Educational",
"FromDate":"2/2011",
"ToDate":"2/2012",
"ProjectDescription":"It is the college website",
"Role":"Data analysis",
"Responsibilities": [
{
"ResponsibilityId":1,
"Responsibility":"Find requirements",
"description":"It is the practice of finding the requirements"
}
]
}
]
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { APP_BASE_HREF } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeModule } from './home/home.module';
import { ServicesModule } from './services/services.module';
import { TestimonialModule } from './testimonial/testimonial.module';
import { PersonModule } from './person/person.module';
import { FormModule } from './form/form.module';
import { SharedModule } from './shared/shared.module';
import { FormsModule } from '@angular/forms';
import { CardModule } from 'primeng/card';
import { DemographicComponent } from './person/demographic.component';
import { ContactComponent } from './person/contact.component';
import {DataListModule} from 'primeng/datalist';
import { EduQualificationComponent } from './person/eduqualification.component';
import {SidebarModule} from 'primeng/sidebar';
import {CalendarModule} from 'primeng/calendar';
import { LoginFormComponent } from './authentication/loginform.component';
import { LoginFormModule } from './authentication/loginform.module';
import {AutoCompleteModule} from 'primeng/autocomplete';
import {Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
import {Message,SelectItem} from 'primeng/api';
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [CommonModule,BrowserModule, BrowserAnimationsModule,FormsModule, ReactiveFormsModule, HttpClientModule, AutoCompleteModule , AppRoutingModule, HomeModule, ServicesModule, CardModule,
TestimonialModule,PersonModule,FormModule,LoginFormModule,DataListModule,SidebarModule,CalendarModule,FormsModule, SharedModule.forRoot()],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }
project.component.html
<div *ngIf="let project of projects; let i=index">
<div class="ui-g-2 ui-sm-6"><b>Project no {{i+1}}</b>
</div>
<div class="ui-g-2 ui-sm-6">Customer Name:</div>
<div class="ui-g-10 ui-sm-6"> {{ project.CustomerName }}</div>
<div class="ui-g-2 ui-sm-6">Responsibility: </div>
<div *ngIf="let item of projects.Responsibilities;">
<div class="ui-g-10 ui-sm-6">
<p>Id {{ item.Responsibility }} </p>
</div>
<div class="ui-g-2 ui-sm-6">description:</div>
<p>Id {{ item.description }} </p>
</div>
</div>
Please tell how can we access array within array means inside array.Thank you.
