Create html element for every element in array (Angular)

Question

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

BlackICE · Accepted Answer · 2018-07-31 12:08:40Z

9

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>

edited Jul 31, 2018 at 12:08

answered Jul 31, 2018 at 11:54

BlackICE

8,9563 gold badges56 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Prashant Pimpale Over a year ago

is it like: data => { console.log(data) this.jokes = data; })

Eugene Sukh Over a year ago

yeah, but I get error

Type 'Object' is not assignable to type 'any[]'.   The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?

Eugene Sukh Over a year ago

So maybe Object instead of any?

BlackICE Over a year ago

looks like your API is returning a single JSON object, not an array of objects. An array would be enclosed in []

BlackICE Over a year ago

I would change the API code to return an array instead of the single object it is currently returning, since you said the API is returning an array, and that's what makes sense. If you only have a single object using *ngFor wouldn't apply.

|

Collectives™ on Stack Overflow

Create html element for every element in array (Angular)

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related