Async loop shows the last object 6 times instead of 6 different objects

[edgy portal]

Hey, I am using an observable to get 6 items from an API, and the observable is getting all the objects correctly, however when displaying them it seems to just repeat the last added object for the amount of objects there is.

html code

<div>
    <table class="table table-light">
      <thead>
        <tr>
          <th scope="col">Title</th>
          <th scope="col">Price</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let list of listing$ | async">
          <td>{{list.title}}</td>
          <td>{{list.price}}</td>
          <td>{{list.description}}</td>
        </tr>        
      </tbody>
    </table>
  </div>

observable/ngOnInit code

listings: Listing[] = [];

  listing$: Observable<Listing[]> = this.listingQuery.selectAll();

  
  constructor(private listingService: ListingService, private listingQuery: ListingQuery) {}

  ngOnInit() {
    this.listListingsSub = this.listingQuery.selectAreListingLoaded$.pipe(
      filter(areListingLoaded => !areListingLoaded),
      switchMap(areListingLoaded => {
        if (!areListingLoaded) {
          return this.listingService.getAllListings().pipe(
            map(result => {
              console.log(result);
              this.listings = result;
              return result;
            })
          );
        } else return '';
      })
    ).subscribe(result => {console.log(this.listings)});
  }

observable type

export interface Listing{
    _id: string;
    title: string;
    description:string;
    price:string;
    image_url:string;
    seller: {name: string, email: string, phone: string};
  }

[plain wigeon]

<tbody *ngIf="listing$ | async as listing">
  <tr *ngFor="let list of listing">
    <td>{{list.title}}</td>
    <td>{{list.price}}</td>
    <td>{{list.description}}</td>
  </tr>        
</tbody>

[edgy portal]

still same thing

no extra errors or anything, idk its so weird, ive done it the exact same way in other stuff and its worked

[plain wigeon]

In you sub you're assigning to listings, the variable you log, the payload returned by this.listingService.getAllListings(), while to listing$ the obs you subscribe in template with async gets assigned a different call: this.listingQuery.selectAll()

[edgy portal]

so would I change the listing$ to listingService.getAllListings()?

wrong format sory

[plain wigeon]

I don't know why you have that listListingsSub in first place.

[edgy portal]

I am trying to use akita to have states, not sure if or how im doing that though...

I can give u more code if it will help

[plain wigeon]

To me it should everything reduce to this

listing$: Observable<Listing[]>;

  
  constructor(private listingService: ListingService, private listingQuery: ListingQuery) {

    this.listings$ = this.listingQuery.selectAreListingLoaded$.pipe(
      filter(areListingLoaded => !areListingLoaded),
      switchMap(() =>  this.listingService.getAllListings()),
      startWith([])
    )
  }

But I never used Akita.

[edgy portal]

I'll give that a try and see if it works

[plain wigeon]

Ps:
I don't know why your filter wait for areListingLoaded to be false.
I'd expect the opposite.

[edgy portal]

So it worked, but is not async now. ie. i deleted from the db but does not update until i refresh page

although at this point im not too bothered, just want this over and done with lol. im following a tutorial from my lecturer with akita and below with OnDestroy it checks for the listListingSub etc, not exactly sure why areListingLoaded is false...