So I'm following this tutorial on how to build tinder cards for Ionic 2. The tutorial makes use of randomuser.me's API, but I'd like to use my own JSON file.
Below is my typescript file (though I have omitted some snippets of code that are irrelevant), and the bottom-most function is what I have changed to try retrieving my own JSON data, but it is not working properly :( I think there is something wrong with how I'm trying to loop through the 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);
}
}
})
}I have also tried making individual JSON files for the objects and retrieve it this way, but have also failed. I tried console logging the JSON data to see what it retrieves, but is always only the second object. No card appears in the stack after that.
The output for both methods I did were just a single card and an "undefined" string appearing below the card after swiping it.
I'm new to using Ionic and Typescript, by the way (and I'm sort of rushing), so any help or suggestions would be appreciated!
(also here is what my JSON file looks like, if it helps:)
{
"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"
}
]
}