[Feature Request] - New function > push: To add arrays to an existing object

[SvenBudak]

Hi! First of all I want to thank you for sharing this great library with us! :)

I always had problems with pushing more arrays into an existing object. Are you planning to implement a new function for this?

[cyrilletuzi]

Hi, thanks for the love. 👍

pushing more arrays into an existing object

You mean adding new values to an existing array, right?

[SvenBudak]

Hmm. I always thought that was called an object.)

Unfortunately I am not a good coder. I am actually a frontend designer :) Since a few hours I'm trying to add more arrays

I mean, I have something like this in storage at first:

IndexedDB = [
    {
        "id": 1,
        "name": "Test",
    }
]

And I'd like to turn it into this:

IndexedDB = [
    {
        "id": 1,
        "name": "Test",
    },
    {
        "id": 2,
        "name": "Test",
    }
]

Up to four items.

I also do not understand why I cannot iterate through vehicles:

this.dataSubscription = this.storage.watch('compareVehicles').subscribe((result: CarInterface) => {
    this.vehicles = result;
});

I know that this is an issue board and not a stackoverflow ;) But is what I have in mind easily possible only with your service?

[cyrilletuzi]

.push() may seem natural in JavaScript, but in fact it is quite unusual in programming languages.

This lib is structured as a Map, and you can see on MDN, there is no .push() method in such data structures. When you want to modify a value, you need to set the whole new value.

So in the case of an array, there are 3 steps:

1. get the current array (but note that usually you will/should already have this data somewhere in your code),
2. push a new value into it,
3. store the whole modified array in the Map.

So you need something like that:

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  products: string[] = [];

  constructor(
    private storage: StorageMap,
  ) {

    this.storage.get('products', {
      type: 'array',
      items: {
        type: 'string',
      },
    }).pipe(
      /* Following operators are optional, they are here to be sure to have a default value */
      catchError(() => of([])),
      map((products) => products ?? []),
    ).subscribe((products) => {
      this.products = products;
    });

  }

  add(product: string): void {

    this.products.push(product);

    this.storage.set('products', this.products).subscribe();

  }

}

For your second question, .watch() is not here to iterate over the value when the value is an array. .watch() is to listen when the value changed.

If your value is an array, just iterate normally over it:

this.storage.get('products', {
  type: 'array',
  items: {
    type: 'string',
  },
}).pipe(
  /* Following operators are optional, they are here to be sure to have a default value */
  catchError(() => of([])),
  map((products) => products ?? []),
).subscribe((products) => {

  for (const product of products) {}

});

[SvenBudak]

Oh that helped me alot! Thank you! But i really need the watch function ;)
I need to update the list in realtime. So its not possible to iterate on a .watch() list?

And isnt it possible to use an angular interface for the schema? because everytime i change some on the data structure i also need to change it in the schemas to.

[cyrilletuzi]

You can do the for ... of inside the .watch() callback too.

[SvenBudak]

Thank you! I have tried many things, but I guess I just don't have enough basic knowledge in JavaScript. 😅

export interface CarInterface {
    id: number;
    manufacturer: string;
    model: string;
    trim_level: string;
    year: number;
    price: number;
    mileage: number;
    fuelType: string;
    gearboxes: string;
    images: string[];
}
export class VehicleCompareComponent implements OnInit, OnDestroy {

    public vehicles: CarInterface;
    private dataSubscription: Subscription;

    constructor(private storage: StorageMap) {
    }

    // Any way to delete by index (remove maybe item [3] for example)
    deleteVehicle(key, index) {
        this.storage.delete(key).subscribe(() => {});
    }

    ngOnInit(): void {
        this.dataSubscription = this.storage.watch('compareVehicles').subscribe((result: CarInterface) => {
            this.vehicles = result;
        });
    }

    ngOnDestroy() {
        this.dataSubscription.unsubscribe();
    }

}

HTML

<ul>
    <ng-template [ngIf]="vehicles" [ngIfElse]="loading">
        <li *ngFor="let vehicle of vehicles; index as index">
            <img [src]="vehicles.images[0]" alt="">
            <h2 class="h6-style">{{vehicles.manufacturer}} {{vehicles.model}}</h2>
            <button mat-icon-button (click)="deleteVehicle('products', index)">Delete</button>
        </li>
    </ng-template>
    <ng-template #loading>
        <li>
            <div class="image">
                <mat-spinner diameter="32"></mat-spinner>
            </div>
        </li>
    </ng-template>
</ul>

This results in endless loop for me...

[cyrilletuzi]

From where does index come from in your template?

Your delete method must follow the same logic as the add one: delete the index you want in the class property, then store the whole updated array in local storage.