Forum PHP.pl

Witam, mam aplikację z listą userów, listę dostaje z API
ale chciałabym aby wyświetliło mi pierwszych 10, kolejnych po kliknięciu ładuj więcej userów...
i ma dołdowywać po 5 userów do listy...

da się to zrobić jakoś sensownie?

w tej chwili mam już wszystkich userów, wyświetla mi tak jak chciałam, sortuje, ale nie mogę sobie poradzić z LayLoadingiem

To jest kwestia tego czy API umożliwia stronicowanie wyników.

Api jest zwykłe, bezstanowe, zwraca listę w jsonie

Ten post edytował poczatkujaca12 6.11.2020, 18:42:34

jeśli masz listę wszystkich userów to o co Ci chodzi z tym lazyloading ? Nie wiesz jak stworzyć komponent do wyświetlania tych użytkowników ?

mam listę wszystkich userów,
wyswietlam z jsona...
i teraz muszę jakoś dołączyć lazyloading... aby wyświelić na raz 10 userów, a później po kliknięciu doładować kolejnych...
to że w jsonie pobierze mi wszystkich to nie jest problem

Poczytaj: https://jasonwatmore.com/post/2019/06/18/an...ination-example

tylko to ma dodawać wyniki, a nie stronnicować

Nie rozumiem. Co masz na myśli przez "dawać wyniki"? Co z nimi robisz?

Gosc chce wczytywanie danych partiami. Tak jak to jest na niektorych sajtach ze na samym dole jest przycisk "pokaz wiecej" i wczyytuja sie dane ale nie wszystkie tyko jakas wlasnie część. Tu chce pewnie wczytywac jak napisal po 10 userow czy costam. Dopuki sa dane bedzie mozliwos i wyswietlania partiami.
Ja to tak rozumiem

To idea podobna jak przy paginacji, tylko że dodajesz kolejne wyniki. Skoro wszystko jest od razu wczytane, to wystarczy pobrać dane raz i potem je kolejno odkrywać. Sposobów implementacji tego jest mnóstwo.

Dokładnie...
idea podobna jak przy pagainacji, tylko jednak przy pagainacji nie spotkałam się z tym, aby nie ukrywało wcześniejszych wyników

Nie używam Angulara, ale zrobiłem dla Ciebie przykład w Vue.js, powinno być podobnie:

[JAVASCRIPT] pobierz, plaintext 
const app = new Vue({
    el: '#app',
    data: {
        albums: [],
        visibleAlbums: 10,
        albumBatch: 10
    },
    async created() {
        const url = 'https://jsonplaceholder.typicode.com/albums';
        const response = await fetch(url);
        this.albums = await response.json();
    },
    template: `
        <div>
            <div v-for="album in albums.slice(0, visibleAlbums)">{{ album.title }}</div>
            <button v-if="visibleAlbums < albums.length" @click="visibleAlbums += albumBatch">
                Pokaż więcej
            </button>
        </div>
    `
});
[JAVASCRIPT] pobierz, plaintext 

Dzięki...zrobiłam tak:
user.component.ts:

[HTML] pobierz, plaintext 
export class UserComponent implements OnInit {
  users = [];
  visibleUsers: 10;
  newUsers: 5;
  constructor(private dataService: DataService) { }
 
  ngOnInit(): void {
    this.dataService.sendGetRequest().subscribe((data: any[])=>{
      data.sort((a,b) => b.registerDate- a.registerDate);
      this.user = data;
    })  
  }
[HTML] pobierz, plaintext 

user.component.html

[HTML] pobierz, plaintext 
    <div  class="users"  *ngFor="let user of users.slice(0, visibleUsers)">    
        <h3>{{user.name}}</h3>
</div>
[HTML] pobierz, plaintext 

data.service.ts

[HTML] pobierz, plaintext 
export class DataService {
 
  private API_SERVER = "https://link/api/users";
 
  constructor(private httpClient: HttpClient) { }
 
  public sendGetRequest(){
    return this.httpClient.get(this.API_SERVER);
  }
}
[HTML] pobierz, plaintext 

Ale nadal wyświetla mi wszystkich userów...

Ten post edytował poczatkujaca12 7.11.2020, 21:47:11

Tak, dzięki działa...

Ten post edytował poczatkujaca12 8.11.2020, 00:29:19

https://www.jqueryscript.net/tags.php?/load%20more/