So I’m making parse application. I’m parsing information from https://www.reddit.com/r/artificial/.json. I can show the content in app. Only thing that is bothering me is that some posts don’t have image and then I get border with no image in it. So what I’m trying to do is to load some other image as a “default one” (from internet perhaps) when there is no image near reddit post. I tried something with *nfIf and ng-switch but nothing worked. Here is the code:
HTML:
<ion-header>
<ion-navbar>
<ion-title>Reddit news</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label fixed>Category</ion-label>
<ion-select (ionChange)="changeCategory()" [(ngModel)]="category" name="category">
<ion-option value="artificial">Artificial inteligence</ion-option>
<ion-option value="TechNewsToday">Techonology</ion-option>
<ion-option value="gamernews">Gaming</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-item *ngFor = "let item of items" text-wrap>
<ion-thumbnail *ngIf="item.data.thumbnail" item-left>
<img ng-switch-default src="{{item.data.thumbnail}}">
</ion-thumbnail>
<h2 class="wrap item-text-wrap">{{item.data.title}} </h2>
<p class="wrap item-text-wrap" style="word-wrap: break-word; word-break: break-all;">
<ion-icon name="person" item-left>{{item.data.author}}</ion-icon>
<ion-icon name="thumbs-up">{{item.data.score}}</ion-icon>
<ion-icon name="chatboxes">{{item.data.num_comments}}</ion-icon>
</p>
<a ion-button block target="_blank" href="http://reddit.com/{{item.data.permalink}}">VIEW ON REDDIT</a>
</ion-item>
</ion-list>
</ion-content>
TypeScript:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {MyRedditApi} from '../../providers/my-reddit-api';
/*
Generated class for the Reddits page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'page-reddit',
templateUrl: 'reddit.html',
providers: [MyRedditApi]
})
export class RedditPage {
items: any;
category:any;
limit:any;
constructor(public navCtrl: NavController, public navParams: NavParams, private redditProvider: MyRedditApi) {}
ionViewDidLoad() {
this.getDefaults();
this.getPosts(this.category, this.limit);
}
getDefaults(){
this.category = 'artificial';
this.limit = 30;
}
getPosts(category, limit){
this.redditProvider.getPosts(category, limit).subscribe(response => {
this.items = response.data.children;
});
}
changeCategory(){
this.limit = 30;
this.getPosts(this.category, this.limit);
}
}
And API
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the MyReddit provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MyRedditApi {
http: any;
baseUrl: String;
constructor(http: Http) {
this.http = http;
this.baseUrl = "https://www.reddit.com/r";
//console.log('Hello MyReddit Provider');
}
getPosts(category, limit){
console.log (this.baseUrl + '/' + category + '/.json?limit='+limit);
return this.http.get(this.baseUrl + '/' + category + '/.json?limit='+limit)
.map(res => res.json());
}
}