1

I have been building an angular2 application using this api : https://api.coinmarketcap.com/v1/ticker/

This api returns an array of dictionaries (sample):

[
{
    "id": "bitcoin",     <------ Wanna use this id
    "name": "Bitcoin", 
    "symbol": "BTC", 
    "rank": "1", 
    "price_usd": "9347.32", 
    "price_btc": "1.0", 
    "24h_volume_usd": "7926060000.0", 
    "market_cap_usd": "158936099373", 
    "available_supply": "17003387.0", 
    "total_supply": "17003387.0", 
    "max_supply": "21000000.0", 
    "percent_change_1h": "-0.24", 
    "percent_change_24h": "1.1", 
    "percent_change_7d": "6.62", 
    "last_updated": "1524926675"
}, 

I am using routing parameters to go to a different page like this:

<tr *ngFor="let curr of currency" [routerLink]="['/currdetail',curr.id]">    <------ Here 
      <th scope="row">{{ curr.rank }}</th>
      <td>{{curr.name}}</td>
      <td>{{curr.symbol}}</td>
      <td>{{curr.market_cap_usd}}</td>
      <td>{{curr.price_usd}}</td>
      <td>{{curr.price_btc}} </td>
      <td>{{curr.available_supply}} </td>
      <td>{{curr['24h_volume_usd']}} </td>
      <td>{{curr.percent_change_1h}} </td>
      <td>{{curr.percent_change_24h}}</td>
      <td>{{curr.percent_change_7d}} </td>
    </tr>

Now i have written routes like this and included in my routing module:

export const routes: Routes = [
    { path: 'table',  component: TableComponent },
    { path: 'currdetail/:id',     component: CurrdetailComponent },
    { path: '', redirectTo: '/table', pathMatch: 'full' },
];

Currdetail component looks like this:

import { Component, OnInit } from '@angular/core';
import { CrypdataService } from '../crypdata.service'
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-currdetail',
  templateUrl: './currdetail.component.html',
  styleUrls: ['./currdetail.component.css'],
  providers: [CrypdataService],
})
export class CurrdetailComponent implements OnInit {

  private curr;

  constructor(private crypdataservice: CrypdataService, private route: ActivatedRoute, private location: Location) { }

  ngOnInit() {
  let id = +this.route.snapshot.params['id'];
  this.curr = this.crypdataservice.getcurr(id);
  }

  goBack(): void{
    this.location.back();
  }

}

Here is the crypdataservice file:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CrypdataService {

  private baseUrl: string = 'https://api.coinmarketcap.com/v1/ticker/';

  constructor(private http: Http) { }

  getcurr(id : string){
      return this.http.get(`https://api.coinmarketcap.com/v1/ticker/`+id).map((res:Response) => res.json());
  }

  getall(){
      return this.http.get(`https://api.coinmarketcap.com/v1/ticker/`).map((res:Response) => res.json());
  }
}

It gives the following error :

ERROR in src/app/currdetail/currdetail.component.ts(20,44): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

I never specified id as a number, so can't figure out what is going wrong. Thanks for reading.

I want to use the api for details of the particular currency : https://api.coinmarketcap.com/v1/ticker/bitcoin/ <---- this is the id

1 Answer 1

1

Remove the + in your id declaration:

let id = this.route.snapshot.params['id'];

so that when you call getcurr(id) TypeScript doesn't think that id is a number

Unary plus (+) (docs)

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to NaN.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.