Angular 2 onclick add new item in array

Question

I need to create new list item(value from api)on button press but don't know how to do it. Any help please? here is the code:

<ul>
<li *ngFor="let joke of jokes">{{joke.value}}</li>
</ul>
<button (click)="loadMore">more jokes</button>
`,
providers: [RandomService]

})
export class PocetnaComponent  { 
jokes: Joke[];

constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {this.jokes = 
[jokes]});
}

loadMore(){
this.jokes.push();
}

}
 interface Joke{
 id: number;
 value: string;
}

here is the service:

@Injectable()
export class RandomService {  
constructor(private http: Http){
    console.log('working');

}
getRandomJokes(){
    return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
}
}

first you need to call your api inside loadMore function once you got result then you need to use this.jokes = _.union(this.jokes, apiResult) ; hope so this will help you — vipin kumar
– vipin kumar, Commented May 25, 2017 at 16:23
Not too sure what you are expecting to happen with this code. your this.jokes.push() has no parameters, so you are pushing nothing. Can you add a little more detail? — Daniel Cooke
– Daniel Cooke, Commented May 25, 2017 at 16:25
isn't there a simpler way to do it? And can you write a complete function? — Nadan Marenković
– Nadan Marenković, Commented May 25, 2017 at 16:26
loadMore() { this.RandomService.getRandomJokes().subscribe(jokes => {this.jokes = _.union(this.jokes, apiResult) ; }); } you can use like that — vipin kumar
– vipin kumar, Commented May 25, 2017 at 16:35

AJ_ · Accepted Answer · 2017-05-25 19:55:59Z

2

Just push an empty object

this.jokes.push({});

or if its going to be hooked up to a modal Create a class and push that

Class IJoke {
 id: number;
 value: string;
 constructor(){
 }
}
this.jokes.push(new IJoke());

Or if you want to push from an API

@Injectable()
export class RandomService {  
constructor(private http: Http){
    console.log('working');

}
getRandomJokes(){
    return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
}
getNextJoke(){
    return this.http.get('https://api.chucknorris.io/jokes/next')
    .map(res => res.json());
}
}

Directive

loadMore(){
    this.jokesService.getNextJoke().subscribe(joke => {
        this.jokes.push(joke); 
    });
}

I'm not sure if you load some random jokes and you want to load one more, or if you want to keep loading random jokes. If the later, you will want to take out the next function, and instead init your jokes array and keep pushing/applying to it. like so

jokes: Joke[] = new Array();
constructor(private jokesService: RandomService){
this.jokesService.getRandomJokes().subscribe(jokes => {
    this.jokes.push(jokes)
});

edited May 25, 2017 at 19:55

answered May 25, 2017 at 16:26

AJ_

4,01912 gold badges51 silver badges86 bronze badges

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

2 Comments

Nadan Marenković Over a year ago

Push from an API goes into service? (result => this.jokes.push(result)); - it says jokes doesn't exist

AJ_ Over a year ago

Yeah because jokes is in your directive. When i answered, you will have to return a value from the service and subscribe to it in your directive.

AVJT82 · Accepted Answer · 2017-05-25 18:03:09Z

You have a few problems...

You have this interface:

interface Joke{
 id: number;
 value: string;
}

what you are receiving is much more properties, so you'd need to pick the properties you want:

getRandomJokes(){
  return this.http.get('https://api.chucknorris.io/jokes/random')
    .map(res => res.json());
    // pick the properties you want/need
    .map(joke => <Joke>{id: joke.id, value: joke.value})
}

Then you have problems in the subscribe, you should push the data to your jokes array and not do:

.subscribe(jokes => {this.jokes = [jokes]})

but:

.subscribe(joke => this.jokes.push(joke)}

notice above that I named this (joke => this.jokes.push(joke)) to make it clearer that you are actually just receiving one joke.

Also I would remove the request from the constructor, we have the OnInit hook for this. Also I would apply the request in a separate function, so that it's easy to call when you want to retrieve new jokes and also therefore reuse the function, so something like this:

ngOnInit() {
  this.getJoke()
}

getJoke() {
  this.jokesService.getRandomJokes()
    .subscribe(joke => {
       this.jokes.push(joke)
    })    
}

So then in your template just call getJoke when you want to retrieve a new joke:

<ul>
  <li *ngFor="let joke of jokes">{{joke.value}}</li>
</ul>
<button (click)="getJoke()">more jokes</button>

Here's a DEMO

Collectives™ on Stack Overflow

Angular 2 onclick add new item in array

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related