CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Eugene Sukh
Eugene Sukh

Reputation: 2737

Create html element for every element in array (Angular)

I have Angular component

Here is code

    @Component({
  selector: 'app-testcomponent',
  templateUrl: './testcomponent.component.html',
  styleUrls: ['./testcomponent.component.scss']
})
export class TestcomponentComponent implements OnInit {

  version: string = environment.version;
  error: string;
  searchForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private http: HttpClient
    ) {
    this.createForm();
   }

  ngOnInit() {}

  search() {
    this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
    data => [
      console.log(data)
    ])
  }

  private createForm() {
    this.searchForm = this.formBuilder.group({
      jokevalue: ['', Validators.required],
    });
  }
}

Function search() is related to get values from API and make HTML markup for every element in the array on submit button. Here is template HTML

<div class="container-fluid">
  <form class="form-inline" (ngSubmit)="search()" [formGroup]="searchForm" novalidate>
      <label for="text">Enter value:</label>
      <input formControlName="jokevalue" style="margin-left:20px;" type="text" class="form-control" id="email">
      <button style="margin-left:20px;" type="submit" class="btn btn-primary">Submit</button>
  </form>

Getting array is done and here is an array of response

{ "category": null, "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png", "id": "cq6hLP0ETeW4VSrm7SYg5A", "url": "https://api.chucknorris.io/jokes/cq6hLP0ETeW4VSrm7SYg5A", "value": "Chuck Norris knows WAZZZUP!" }

So now I need to loop from the array(it can have more than one element) and create HTML markup for every element

For example this

<div>
<p>Number of array element</p>
<p>"value"</p>
</div>

I try to do it like this

 data => [
  for (let i = 0; i < data.length; i++) {

  }
])

But seems it not right.

How I can solve my problem.

Thank's

Upvotes: 1

Views: 3837

Answers (1)

BlackICE
BlackICE

Reputation: 8926

expose your data in your component source:

  public jokes: any[]; //or create an interface instead of using "any" for "strong" typing support

  search() {
    this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
    data => [
      console.log(data)
      this.jokes = data;
    ])
  }

use an *ngFor in your component template to bind to your data:

<div *ngFor="let joke of jokes">
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

update for comments around not using an array:

expose your data in your component source:

  public joke: any; //or create an interface instead of using "any" for "strong" typing support

  search() {
    this.http.get('https://api.chucknorris.io/jokes/search?query='+this.searchForm.value.jokevalue ).subscribe(
    data => [
      console.log(data)
      this.joke = data;
    ])
  }

component template:

<div>
    <p>{{joke.category}}</p>
    <p>{{joke.value}}</p>
</div>

Upvotes: 9

Related Questions