In my current Angular 2 project, I am dealing with a .json file structured like this:
{
"PropertyName": "Occupation",
"DefaultPromptText": "occupation text",
"ValuePromptText": {
"WebDeveloper": "for web developer",
"Administrator": "for admin"
}
},
{
"PropertyName": "FirstName",
"DefaultPromptText": "first name text",
"ValuePromptText": ""
}
To retrieve this file, I have set up a service as follows:
import { Injectable } from "@angular/core";
import { Http } from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class PromptService {
constructor(private http: Http) { }
fetchPrompts() {
return this.http.get('/temp.json').map(
(Response) => Response.json()
);
}
}
The form inputs in my HTML are designed like this:
<fieldset class="one-quarter sm-padding">
<label>First name</label>
<input name="FirstName" placeholder="Firstname" type="text" tabindex="1" required>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>Occupation</label>
<input name="Occupation" placeholder="Occupation" type="text" tabindex="2" required>
</fieldset>
<div class="prompt-bubble active md-padding bottom-sm-margin">
<h2>Help Text</h2>
<ul>
<li *ngFor="let promptText of promptTexts">
<p>{{promptText.DefaultPromptText}}</p>
</li>
</ul>
</div>
The component.ts file has the following code:
import { Component, OnInit } from '@angular/core';
import { PromptService } from '../../services/prompt.service';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [PromptService]
})
export class HomeComponent implements OnInit {
promptTexts = [];
constructor(private promptService: PromptService) { }
ngOnInit() {
this.promptService.fetchPrompts().subscribe(
(data) => this.promptTexts = data
);
}
}
I aim to display a specific array based on whether the 'PropertyName' value matches the input name. For instance, clicking on the 'FirstName' input should show the array with 'PropertyName' equal to "FirstName" and include the corresponding 'DefaultPromptText.'
Please let me know if you need further clarification.
Thank you!