Angular - Push service array with itself

Question

I've created a service to display a list iterating through an array. I want that list to be infinite (on scrolling). Hence my approach was to push the displayed array with itself on scroll.

This worked, but since I've decided to go with services, I can't make it function again.

Service:

import { Case } from './case';

export const CASES: Case[] = [
  { name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' }
];

To iterate through this array, I fetched it inside of the case-list component.ts:

import {Component, OnInit} from '@angular/core';
import { CASES } from '../mock/mock-cases';

@Component({
  selector: 'app-case-list',
  templateUrl: './case-list.component.html',
  styleUrls: ['./case-list.component.scss']
})
export class CaseListComponent implements OnInit {

  cases = CASES;

  ...

How can I push cases again, so that it contains multiple CASES arrays?

I've tried: this.cases.push(CASES), but this one won't work.

I want cases to look like this (CASES x3):

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' },

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' },

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' }

examples are very hard to read. consider making a simplified version of the examples — gatsbyz
– gatsbyz, Commented Jun 17, 2019 at 21:33
@gatsbyz it's just the standard CASES service, multiplied by 3 - as mentioned — Tom
– Tom, Commented Jun 17, 2019 at 21:34

gatsbyz · Accepted Answer · 2019-06-17 21:44:53Z

1

You should try this.cases.push(...CASES). It's called the spread syntax.

For function calls:

myFunction(...iterableObj);
For

array literals or strings:

[...ite`rableObj, '4', 'five', 6];

For object literals (new in ECMAScript 2018):

let objClone = { ...obj };

answered Jun 17, 2019 at 21:44

gatsbyz

1,0751 gold badge11 silver badges26 bronze badges

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

9 Comments

Tom Over a year ago

This one seems to work, but it instantly adds thousands of entries on scroll to the array which causes the browser to freeze.

gatsbyz Over a year ago

@Tim Where do you add on to the array? ngOnInit?

Tom Over a year ago

To create infinite scrolling with the repeating list I push the array on (scroll) - I think that might be the problem, any bypass? I did this before, but by solely pushing a usual array - didn't cause any issues.

Tom Over a year ago

Is there a way to add CASES in a more "controlled" way?

gatsbyz Over a year ago

@Tim Can you add if (cases.length < CASES.length * 3) { to that?

|

Collectives™ on Stack Overflow

Angular - Push service array with itself

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related