How can I use some hardcoded data together with API in the same service in Anglular 2?

Question

I have a service which is retrieving data from API and displaying it in my component. All good, but together with the data from API I'm displaying in the component, I also want to display some hardcoded array data from the same service in the same component. (The hardcoded data would actually be displayed in another component and then nested in the component I use to display API data.)

Service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import 'rxjs/Rx';


@Injectable()
export class ProductService{
  result:any;
  ratings:any;
  constructor(private http: HttpClient) {}
    getProducts() {
        return this.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD').map(result => this.result = result);
        /*return
           [
            {
                imageUrl: "http://loremflickr.com/150/150?random=1",
                productName: "Product 1",
                releasedDate: "May 31, 2016",
                description: "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.",
                rating: 4,
                numOfReviews: 2
            },

as you can see after the return, I have some commented out array. I'm using rating component:

import { Component, Input } from '@angular/core'

@Component({
    selector: 'rating',
    templateUrl: 'rating.component.html',
    styles: [`
        .glyphicon-star {
            color: blue;
        }
    `]
})
export class RatingComponent{

    @Input('rating-value') rating = 0;
    @Input() numOfReviews = 0;

    onClick(ratingValue){
        this.rating = ratingValue;
    }
}

And then I want to display rating component with array data from service in crypto component:

import { Component } from '@angular/core';
import { ProductService } from './product.service';
import { RatingComponent } from './rating.component';
@Component({
  selector: 'crypto',
  styleUrls: ['./app.component.css'],
  template: `<div *ngIf="cryptos">
    <div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
      <span class="left">{{ crypto }}</span>
      <span class="right">{{ cryptos[crypto].USD | currency:'USD':true }}</span>
      <br />
      <rating
          [rating-value]="rating"
          [numOfReviews]="numOfReviews">
      </rating>
    </div>
  </div>`
})
export class CryptoComponent {
  objectKeys = Object.keys;
cryptos: any;
ratings: any;

constructor(private _data: ProductService) {

}

ngOnInit() {
  this._data.getProducts()
    .subscribe(res => {
      this.cryptos = res;

      console.log(res);

    });
}

    onClick($event){
      console.log("Clicked",$event)
    }
}

Something like this, but it's not working:

<rating
      [rating-value]="rating"
      [numOfReviews]="numOfReviews">
</rating>

How can I return HTTP get request from API and hard coded array data for ratings data in the same service and then access rating data from array in crypto.component.ts inside <rating> selector without getting undefined errors? Now it looks like this:

Sorry if explanation is not clear, I'm just trying to add star rating system to a component that is displaying data from service which is getting data from API. API only provides crypto name and price. Data for star rating component would be hardcoded inside array on my own.

Answer 1

Product service as follow:

return this.http.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,TRX&tsyms=USD')
  .map(result => {
    Object.keys(result).forEach(value => {

      // add logic to have each crypto a different rating

      result[value]['ratingInfo'] = {
        imageUrl: "http://loremflickr.com/150/150?random=1",
        productName: "Product 1",
        releasedDate: "May 31, 2016",
        description: "Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.",
        rating: 4,
        numOfReviews: 2
      }
    });
    return result;
  });

Then update your crypto component as follow:

<div *ngIf="cryptos">
<div id="crypto-container" *ngFor="let crypto of objectKeys(cryptos)">
  <span class="left">{{ crypto }}</span>
  <span class="right">{{ cryptos[crypto].USD | currency:'USD':true }}</span>
  <br />
  <rating
      [rating-value]="cryptos[crypto].ratingInfo.rating"
      [numOfReviews]="cryptos[crypto].ratingInfo.numOfReviews">
  </rating>
</div>

There are better and more clean ways to achieve what you want but requires a bit of refactoring of your code.