CODEWITHSUNDEEP
angular
Mike Trinh
Mike Trinh

Reputation: 1303

Angular 2 array extract specific data by id

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>

Upvotes: 0

Views: 1025

Answers (2)

Andrei Zhytkevich
Andrei Zhytkevich

Reputation: 8099

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

Upvotes: 1

Ankit Singh
Ankit Singh

Reputation: 24945

@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>

Upvotes: 1

Related Questions