Angular 2 array extract specific data by id

Question

How can i extract specific data from the array with the id and use it in the div.

home.component.ts file

import { Component } from '@angular/core';
import { HomeProjectComponent } from './home-project.component';
import { NewsletterComponent } from './../shared/newsletter/newsletter.component';

export class Project {
  id: number;
  name: string;
  title: string;
  status: string;
}

const PROJECTS: Project[] = [
  { id: 1,
    name: 'name1',
    title: 'title1',
    status: 'status1'
  },
  { id: 2,
    name: 'name2',
    title: 'title2',
    status: 'status2'
  },
  { id: 3,
    name: 'name3',
    title: 'title3',
    status: 'status3'
  },
....
{ id: 100,
    name: 'name100',
    title: 'title100',
    status: 'status100'
  },
];


@Component({
  selector: 'home',
  templateUrl: './app/home/home.component.html',
  styleUrls: ['./app/home/home.component.css'],
  directives: [HomeProjectComponent, NewsletterComponent]
})

export class HomeComponent {
  projects = PROJECTS;
}

This is my html code were i m trying to get the name, title and status of the project with ID home.component.html

The {{project.name}}, {{project.title}} and {{project.status}} must be the same

get data with id 20
<home>
  <h1>{{project.name}}</h1>
  <h2>{{project.title}}</h2>
  <p>{{project.status}}</p>
</home>

// SOME HTML

get data with id 64
<home>
  <h1>{{project.name}}</h1>
  <h2>{{project.title}}</h2>
  <p>{{project.status}}</p>
</home>

// SOME HTML

get data with id 69
<home>
  <h1>{{project.name}}</h1>
  <h2>{{project.title}}</h2>
  <p>{{project.status}}</p>
</home>

@Component({ selector: 'home', templateUrl: './app/home/home.component.html', styleUrls: ['./app/home/home.component.css'], directives: [HomeProjectComponent, NewsletterComponent] }) — Mike Trinh
– Mike Trinh, Commented Jun 17, 2016 at 12:20
And the component class? Please edit your question and add the code there. Code in comments is almost unreadable. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 17, 2016 at 12:21

Ankit Singh · Accepted Answer · 2016-06-17 12:33:06Z

1

@Component({
  selector: 'home',
  templateUrl: './app/home/home.component.html',
  styleUrls: ['./app/home/home.component.css'],
  directives: [HomeProjectComponent, NewsletterComponent]
})

export class HomeComponent {
  projects = PROJECTS;

  projectId2 = this.extractProjectWithId(2);

  extractProjectWithId(id){
      let i;
      for(i = 0; i< this.projects.length; i++)
      {
         if(this.projects[i].id === id)
          return this.projects[i];
      }

      return null;
    }
}

<div *ngIf="projectId2"> // extract data with ID 2 from project 
  <h1>{{projectId2.name}}</h1>
  <h2>{{projectId2.title}}</h2>
  <p>{{projectId2.status}}</p>
</div>

answered Jun 17, 2016 at 12:33

Ankit Singh

25k12 gold badges68 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike Trinh Over a year ago

This way i can only extract the data with id2. And i want 3* same html element but extract others id

Mike Trinh Over a year ago

I just update my question so you can understand what i mean

Ankit Singh Over a year ago

you can just use *ngFor then

Mike Trinh Over a year ago

ngFor display all objects in order. i'd like to use a home-id-x then some html codes then home-id-xx some html code and home-id-xxx.

Andrei Zhytkevich · Accepted Answer · 2016-06-17 13:39:17Z

1

I would write a method returning object with id 2. Something like:

getObjectById(id: number) {
  return PROJECTS.filter(x => x.id == id);
}

Reading it

<home> // extract data with ID 2 from project 
  <h1>{{ getObjectById(2)[0].name }}</h1>
  <h2>{{ getObjectById(2)[0].title }}</h2>
  <p>{{ getObjectById(2)[0].status }}</p>
</home>

Update for new edit:

Since you need all project from array why don't you print them using *ngFor:

<home *ngFor="let project of PROJECTS"> // extract data with ID 2 from project 
  <h1>{{ project.name }}</h1>
  <h2>{{ project.title }}</h2>
  <p>{{ project.status }}</p>
</home>

That simplifies interpolations {{ }} and you won't need any other functions to get specific element. If you care about the sequence of projects, then create a member variable

projectInSequence: Project[];

and push projects in desired sequence, ngFor will change to *ngFor="let project of projectInSequence. Filling projectInSequence can be done in a life-cycle hook https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

edited Jun 17, 2016 at 13:39

answered Jun 17, 2016 at 12:35

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

2 Comments

Mike Trinh Over a year ago

Well, i don't need/want to display all the projects. I have over 20 projects and i wan t to display only 9 of them, i want to have one project id-x then some html than project-id-y some html project-id-zz some html and so on

Andrei Zhytkevich Over a year ago

Then better go with projectsInSequence way

Collectives™ on Stack Overflow

Angular 2 array extract specific data by id

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related