Not able to display image from API's URL in Angular dynamically

Question

as i said in title, i'm using free api for displaying crypto currency news for my practice project. Seems like everything is fine except displaying the images in card view. I will post here my code, so if you have any idea how to fix, please help me.

From the app service:

 getNews(): Observable<any> {
return this._http.get("https://min-api.cryptocompare.com/data/v2/news/?lang=EN")
  .map(result => this.result = result)
  .pipe(catchError(this.handleError('getPriceSingle', [])));

} Controller:

this._data.getNews()
    .subscribe(res => {
    this.receiveData = res.Data 
    let newsObj: any = Object.keys(this.receiveData);
    let newsValues: any = Object.values(this.receiveData);

    for (let i = 0; i < newsValues.length; i++) {
      this.newsX[newsValues[i]] = {
        title: newsValues[i].title,
        url: newsValues[i].url,
        body: newsValues[i].body,
        image: newsValues[i].imageurl,
        date: newsValues[i].published_on,
        tags: newsValues[i].tags
      };
    }

    this.newsData = JSON.parse(JSON.stringify(Object.values(newsValues)));
    console.log(this.newsData)
});

And view:

<nz-layout>
<nz-content>
  <header>
    <h1>Latest Crypto Currency News</h1>
  </header>
  <div class="band">
    <div class="item-7" *ngFor="let news of newsData">
      <a href="{{news.url}}" class="card">
        <div class="thumb">
          <img [src]='news.image' />
        </div>
        <article>
          <h1>{{news.title}}</h1>
          <span>Release Date: {{today | date:'dd/MM/yyyy'}}</span>
        </article>
      </a>
    </div>
  </div>
    </nz-content>

can you share the result of the console.log(this.newsData) please — vlad katz
– vlad katz, Commented Mar 24, 2021 at 12:01
{ "id": "26935554", "guid": "ambcrypto.com/?p=149399", "published_on": 1616587240, "imageurl": "images.cryptocompare.com/news/default/ambcrypto.png", "title": "Genesis Shards raises $2.7M to create new pre-IDO market using DeFi NFT options", "url": "ambcrypto.com/…", "tags": "HideCryptopanic|PR|Press Release", "categories": "Market|ICO|Sponsored", "upvotes": "0", "downvotes": "0", "lang": "EN", } — andrijad durutov
– andrijad durutov, Commented Mar 24, 2021 at 12:10

Barremian · Accepted Answer · 2021-03-24 12:25:15Z

Seeing what you're trying to accomplish, I'd say the back and forth conversions using Object.keys and Object.values aren't required here. Try the following

Avoid the subscription in the controller. Use Angular async pipe instead. This also avoids potential memory leaks due to open subscriptions.
Use RxJS map operator along with JS Array#map function to transform the data as per your requirement.
This is more of a subjective semantic opinion. While binding variables in the template, using the same quotes across all the bindings is more elegant compared to using double for few and single for others like you're doing.

Controller

import { Component } from "@angular/core";

import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Component({ ... })
export class NzDemoLayoutFixedComponent {
  newsData$: Observable<any>;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.newsData$ = this._data.getNews().pipe(
      map((res: any) =>
        res["Data"].map(item => ({
          title: item["title"],
          url: item["url"],
          body: item["body"],
          image: item["imageurl"],
          date: new Date(item["published_on"] * 1000), // credit: https://stackoverflow.com/a/847196/6513921
          tags: item["tags"]
        }))
      )
    );
  }
}

Template

<ng-container *ngIf="(newsData$ | async) as newsData">
  <nz-layout class="layout">
    <nz-content style="padding:0 50px;margin-top:64px;">
      <header>
        <h1>Latest Crypto Currency News</h1>
      </header>
      <div class="band">
        <div class="item-7" *ngFor="let news of newsData">
          <a [href]="news.url" class="card">
            <div class="thumb">
              <img [src]="news.image" />
            </div>
            <article>
              <h1>{{ news.title }}</h1>
              <span>Release Date: {{ news.date | date: "dd/MM/yyyy hh:mm" }}</span>
            </article>
          </a>
        </div>
      </div>
    </nz-content>
  </nz-layout>
</ng-container>

Working example: Stackblitz

Collectives™ on Stack Overflow

Not able to display image from API's URL in Angular dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related