javascript - Create html element for every element in array (Angular) - Stack Overflow

I have Angular ponent

Here is code

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

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

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

  ngOnInit() {}

  search() {
    this.http.get('='+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": "/img/avatar/chuck-norris.png", "id": "cq6hLP0ETeW4VSrm7SYg5A", "url": "", "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

I have Angular ponent

Here is code

    @Component({
  selector: 'app-testponent',
  templateUrl: './testponent.ponent.html',
  styleUrls: ['./testponent.ponent.scss']
})
export class TestponentComponent 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

• javascript
• html
• css
• angular
• typescript

Share Improve this question Follow edited Jun 24, 2019 at 6:13 Udara Abeythilake 1,21311 gold badge2222 silver badges3232 bronze badges asked Jul 31, 2018 at 11:42 Eugene SukhEugene Sukh 2,72755 gold badges5151 silver badges9797 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

expose your data in your ponent 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 ponent template to bind to your data:

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

---

update for ments around not using an array:

expose your data in your ponent 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;
    ])
  }

ponent template:

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