How do I scroll one JSON file for each object so that it appears on Ionic tinder maps?

Question

So, I am following this tutorial on how to create tinder cards for Ionic 2. The tutorial uses the randomuser.me interface, but I would like to use my own JSON file.

Below is my typescript file (although I omitted some pieces of code that are irrelevant), and the lowest function is what I changed to try to get my own JSON data, but it does not work properly: (I I think something is wrong with the way I am trying to iterate over an array in my JSON file?

export class HomePage {

  @ViewChild('myswing1') swingStack: SwingStackComponent;
  @ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;

  cards: Array<any>;
  stackConfig: StackConfig;
  recentCard: string = '';

  constructor(public http: Http) {
    this.stackConfig = {
      throwOutConfidence: (offsetX, offsetY, element) => {
        return Math.min(Math.abs(offsetX)/(element.offsetWidth/2),1);
      },
      transform: (element, x, y, r) => {
        this.onItemMove(element, x, y, r);
      },
      throwOutDistance: (d) => {
        return 800;
      }
    };
  }

  ngAfterViewInit(){
    this.swingStack.throwin.subscribe((event: DragEvent) => {
      event.target.style.background = '#ffffff';
    });

    this.cards = [{email: ''}];
    this.addNewCards(1);
  }

  voteUp(like: boolean) {
    let removedCard = this.cards.pop();
    this.addNewCards(1);
    if (like){
      this.recentCard = 'You liked: ' + removedCard.email;
    } else{
      this.recentCard = 'You disliked: ' + removedCard.email;
    }
  }

  addNewCards(count: number){
    this.http.get('../../assets/data/pics.json').map(data => data.json().results).subscribe(result => {
      for (let val of result){
        for (var count = count; count<pic.length; count++){
          this.cards.push(val);
        }
      }
    })
  }

Run codeHide result

JSON , . JSON, , , . .

, , - < undefined, .

Ionic Typescript, ( ), !

( JSON , :)

{
    "pics": [
             {
                "name": "balls",
                "pic": "assets/img/pics/01.jpg"
            },
            {
                "name": "snowy field",
                "pic": "assets/img/pics/02.jpg"
            },
            {
                "name": "hotel bedroom",
                "pic": "assets/img/pics/03.png"
            },
            {
                "name": "apartments",
                "pic": "assets/img/pics/04.jpg"
            }
        ]
}

Hide result

Answer 1

, , , .

, :

addNewCards(count: number){
    this.http.get('https://randomuser.me/api/?results=' + count).map(data => data.json().results).subscribe(result => {
        for (let val of result){
            for (var count = count; count<pic.length; count++){
                this.cards.push(val);
            }
        }
     })
}

, , , :

• JSON, API randomuser.me(this.http.get('https://randomuser.me/api/?results' + count)? JSON (this.http.get('../../assets/data/pics.json').
• , (.map(data => data.json().results)). JSON, API (https://randomuser.me/api/?results=1), , "" " , .map(data => data.json().results) : , , JSON . JSON " ", . .map(data => data.json().pics), .
• , "" , , 3, 3 . , API, , 10 JSON, , JSON 10 .

• : for (let val of result){ , , . , ( "var" , "count", "pic" ), , , . , , - :

  for (let i = 0; i < count; i++) {
      this.cards.push(result[i[);
  }
  

, :

addNewCards(count: number) {
    this.http.get('../../assets/data/pics.json')
    .map(data => data.json().pics)
    .subscribe(result => {
        for (let i = 0; i < count; i++) {
            this.cards.push(result[i]);
        }
    })
}

, : , , .

- , , JSON .

Answer 2

Rosco , , Disqus JB JSON . HTML ( zIndex marginTop ):

<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)" id="card-stack" [style.zIndex]="-1000">
<ion-card #mycards1 swing-card *ngFor="let c of cards; trackBy:trackByCards; let i=index;" [style.zIndex]="-1 * i" [style.marginTop]="i === 0 ? '0px' : '12px'">

Typescript voteUp():

let removedCard = this.cards.shift();

shift() ( pop()), first JSON. . JB!!

: , , ;