how to get json data in angular5

Question

this is my service.ts

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



@Injectable()
export class BarserviceService {
public http: Http;
people:any;
constructor(http: Http) {
this.http = http;  


}

get() {
// return this.mediaItems;
let charts = this.http.get("http://localhost:3000/charts")
.map(response => {  this.people =  response.json()
console.log("pople", this.people)

});

return charts;

}

this is my barchart.component.ts

ngOnInit() {
// this.getEarthquakes(); 
this.options = {
  chart: {
    type: 'discreteBarChart',
    height: 450,
    margin : {
      top: 20,
      right: 20,
      bottom: 50,
      left: 55
    },
    x: function(d){return d.label;},
    y: function(d){return d.value;},
    showValues: true,
    valueFormat: function(d){
      return d3.format(',.4f')(d);
    },
    duration: 500,
    xAxis: {
      axisLabel: 'X Axis'
    },
    yAxis: {
      axisLabel: 'Y Axis',
      axisLabelDistance: -10
    }
  }
}
this.data =

      [{
        values: [

    ]
  }
]
 this.baroneService.get().subscribe(c => {
// console.log("pep",this.people);
// this.media = c.charts
 console.log( "media",this.media = c.charts)

 this.data = this.media
 console.log("pep",this.data);});

this will be my json

{
"charts": [
    {
        "values": [
            {
                "label": "A",
                "value": -29.765957771107
            },
            {
                "label": "B",
                "value": 0
            } ]} ]}

am getting the json data in console pople in service.ts file but am not understanding how to get it in this.data in the component.ts file so i can display chart through json data and am getting an error in console.log( "media",this.media = c.charts) in component.ts .can anyone help me with this.

score 0 · Answer 1 · answered Jan 12 '18 at 11:04

You Can Inject The Service to The Constructer.

Like This.

import { Service Class Name } from 'location of service file';

Then You Can Inject to Constructer.

constructer(private nameofyourown:Service Class Name)
  {
    }

You Can use all The variables Declared inside The Service.

Here is The Syntax.

name used in constructer ex:

if i used like This.

Constructer(private name:serviceclassname)

you can used to call the variables like this.

name.variablename

variablename is declared inside service you can use it like the above syntax.

how to get json data in angular5

1 Answers1