Access json field in Angular 5 and put into variable

Question

It is relatively easy to put json into html using ngFor, but I need to get the value of a json field in the ts of my component so I can put it into a graph.

I have a field called 'value' in my json. How do I put all the values into an array?

My code so far:

import { WeatherstatsService } from '../weatherstats.service';
import 'rxjs/add/operator/map';

@Component({
  selector: 'weatherchart',
  templateUrl: './weatherchart.component.html',
  styleUrls: ['./weatherchart.component.css']
})
export class WeatherchartComponent implements OnInit {

  constructor(private weatherstatsservice: WeatherstatsService) { }

  title = "Title";
  data: any;
  datavalues = [];

  chart = new Chart({
        chart: {
          type: 'line'
        },
        title: {
          text: this.title,
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Line 1',
          data: [1, 2, 3]
        }]
      });

    // add point to chart serie
    add() {
      this.chart.addPoint(Math.floor(Math.random() * 10));
    }

    getyeardata(data, datavalues) {

    }

    ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
          this.data = data;
        })

        console.log(value);
      // console.log(this.data)
    }
}

My json looks like this, but is massive:

[{"id":1,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JAN","value":6.1},{"id":2,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"FEB","value":7.2},{"id":3,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAR","value":8.9},{"id":4,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"APR","value":9.6},{"id":5,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"MAY","value":14.5},{"id":6,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUN","value":17.1},{"id":7,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"JUL","value":17.3},{"id":8,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"AUG","value":16.9},{"id":9,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"SEP","value":15.6},{"id":10,"measurement_type":"Tmax","location":"Wales","year":1910,"month_or_season":"OCT","value":12.5},

The json fields are id, measurement_type, location, year, month_or_season

Error log:

WeatherchartComponent.html:7 ERROR TypeError: Cannot read property 'year' of null
    at Object.eval [as updateRenderer] (WeatherchartComponent.html:7)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14378)
    at checkAndUpdateView (core.js:13514)
    at callViewAction (core.js:13859)
    at execEmbeddedViewsAction (core.js:13817)
    at checkAndUpdateView (core.js:13510)
    at callViewAction (core.js:13859)
    at execComponentViewsAction (core.js:13791)
    at checkAndUpdateView (core.js:13515)
    at callViewAction (core.js:13859)

Chaya Sandamali · Accepted Answer · 2017-12-01 14:09:32Z

2

Try this one.

ngOnInit() {
      this.weatherstatsservice.getWeatherData()
        .subscribe(data => {
         if(JSON.stringify(data)!=[]){
           this.data=data;
           this.data.forEach( res => {
              this.datavalues.push(res.value);
           });
        }
    })
  }

(Brackets corrected)

edited Dec 1, 2017 at 14:09

answered Dec 1, 2017 at 13:17

Chaya Sandamali

6679 silver badges22 bronze badges

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

4 Comments

Davtho1983 Over a year ago

I still get this error? compiler.js:466 Uncaught Error: Unexpected value 'undefined' declared by the module 'AppModule' - do I need to import something else in App.Module?

Chaya Sandamali Over a year ago

Have you added WeatherstatsService to providers in App.Module?

Davtho1983 Over a year ago

Yeah it's there!

Davtho1983 Over a year ago

Ok I just restarted the angular server from the command line and it seems to be working now!

chitanum · Accepted Answer · 2017-12-01 14:07:29Z

1

let array;
array.push(object.value);

Have you tried this?

Post the object too

Update: post a normal form of the object so i can understand better

.subscribe(data => {
this.data = data;
 this.data.forEach( result => {
      this.datavalues.push(result.value);
   });
})

try to put the request and everything in the constructor not in ngOnInit

edited Dec 1, 2017 at 14:07

answered Dec 1, 2017 at 12:32

chitanum

112 bronze badges

3 Comments

Davtho1983 Over a year ago

I have to do this.data.value and it won't let me?

Davtho1983 Over a year ago

I get ERROR TypeError: Cannot read property 'push' of undefined

Davtho1983 Over a year ago

Still got this error? Uncaught Error: Unexpected value 'undefined' declared by the module 'AppModule' at syntaxError (compiler.js:466) at compiler.js:15121 at Array.forEach (<anonymous>) ...

Collectives™ on Stack Overflow

Access json field in Angular 5 and put into variable

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related