diff --git a/router/src/app/resume/resume.component.html b/router/src/app/resume/resume.component.html
index 617f10d..89393b0 100644
--- a/router/src/app/resume/resume.component.html
+++ b/router/src/app/resume/resume.component.html
@@ -1,21 +1,9 @@
-
Resume: {{jobIndex}}
-
- -
-
- - 2010-2011, 2013-Present
- - Crushed It
-
-
- -
-
- - 2008-2010
- - Chief Code Jockey at jockey.com
-
-
- -
-
- - 2003-2008
- - Software Engineer at Initech
-
-
-
+Job Description For: {{job.title}}
+
+ - Dates
+ - {{job.dates}}
+ - Title
+ - {{job.title}}
+ - Description
+ - {{job.description}}
+
diff --git a/router/src/app/resume/resume.component.ts b/router/src/app/resume/resume.component.ts
index fff9545..cfc5a7b 100644
--- a/router/src/app/resume/resume.component.ts
+++ b/router/src/app/resume/resume.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
+import { JOBS } from './jobs';
@Component({
selector: 'app-resume',
@@ -8,14 +9,20 @@ import { ActivatedRoute } from '@angular/router';
})
export class ResumeComponent implements OnInit {
- jobIndex: Number; //set up public class member
+ job; //set up public class member
constructor(
private route: ActivatedRoute //make URL routes available to class
) { }
ngOnInit() {
- this.route.params.forEach( param => this.jobIndex = param.id )
+ this.route.params.forEach(
+ param => {
+ this.job = JOBS.find( job => {
+ return job.id === parseInt(param.id)
+ });
+ }
+ );
}
}
diff --git a/url_params.md b/url_params.md
index 2345525..71a2af7 100644
--- a/url_params.md
+++ b/url_params.md
@@ -138,3 +138,51 @@ Test that this works by showing `jobIndex` in `src/app/resume/resume.component.h
```
## Show specific job data based on id param
+
+Import the `JOBS` data object:
+
+```javascript
+import { JOBS } from './jobs';
+```
+
+Now alter the `ResumeComponent` to
+
+1. have a `job` property, set by the URL param
+1. find the job that has a matching id to the one specified in the URL
+ - NOTE: `param.id` is a string, and `job.id` is a number, so we must call `parseInt(param.id)`
+
+```javascript
+export class ResumeComponent implements OnInit {
+
+ job; //set up public class member
+
+ constructor(
+ private route: ActivatedRoute //make URL routes available to class
+ ) { }
+
+ ngOnInit() {
+ this.route.params.forEach(
+ param => {
+ this.job = JOBS.find( job => { //find the element in the JOBS array...
+ return job.id === parseInt(param.id) //... that has a matching id
+ });
+ }
+ );
+ }
+
+}
+```
+
+Now in `src/app/resume/resume.component.html` display the data:
+
+```html
+Job Description For: {{job.title}}
+
+ - Dates
+ - {{job.dates}}
+ - Title
+ - {{job.title}}
+ - Description
+ - {{job.description}}
+
+```