Displaying data with '_' characters from Flask API with Angular

Question

I'm trying to build components from my flask API. When I hit the route, I can see the data for the objects I want. However, when I intreprolate in hopes to see it from my front end, I only see certain properties(the ones that have no '_' in their names).

For example.. this is what I get when I hit the route .../measurements :

[
  {
    "availability": 100.0, 
    "id": 1, 

    "time": "2015-11-28T00:10:00+00:00", 
    "wind_direction": 30, 
    "wind_speed": 1.41, 
    "wind_speed_dispersion": 0.22
  }, 
  {
    "availability": 100.0, 
    "id": 2, 

    "time": "2015-11-28T00:20:00+00:00", 
    "wind_direction": 30.4, 
    "wind_speed": 1.45, 
    "wind_speed_dispersion": 0.2
  }, 
  {
    "availability": 100.0, 
    "id": 3, 

    "time": "2015-11-28T00:30:00+00:00", 
    "wind_direction": 30.1, 
    "wind_speed": 1.01, 
    "wind_speed_dispersion": 0.2
  },....
} 

However when I integrate Flask with Angular and wish to display that same data a list. I only get values for those without any '_' in the angular model name. For example I get:

• id: 1

• Time: 2015-11-28T00:10:00+00:00

• Wind Speed:

• Wind Direction:

• Wind Dispersion:

• Availability:100

• Measurement point id:

My model on Flask app looks like this..

class AggregatedMeasurement(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    created = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)

    time = db.Column(db.DateTime, nullable=False)
    wind_speed = db.Column(db.Float, nullable=False)  # in m/s
    wind_direction = db.Column(db.Float, nullable=False)  # in degrees
    wind_speed_dispersion = db.Column(db.Float, nullable=False)  # in m/s

    availability = db.Column(db.Float, nullable=False)  # in percent

And the model on my angular app is:

export class AggregatedMeasurement {
    constructor(
        public id: number,
        public time: Date,
        public windSpeed: number,
        public windDirection: number,
        public windSpeedDispersion: number,
        public availability: number,

    ) { }
}

I ended up using marshmallow for object serialization/deserialization. And this is how schema looks.

class AggregatedMeasurementSchema(Schema):
    id = fields.Int(dump_only=True)

    time = fields.DateTime()
    windSpeed = fields.Number()
    wind_direction = fields.Number()
    wind_speed_dispersion = fields.Number()
    availability = fields.Number()

Angular component.html

  <ul *ngFor="let aggregatedMeasurement of aggregatedMeasurementsList">
      <li> id: {{ aggregatedMeasurement.id }} </li>
      <li> Time: {{ aggregatedMeasurement.time }} </li>
      <li> Wind Speed:{{ aggregatedMeasurement.windSpeed }} </li>
      <li> Wind Direction: {{ aggregatedMeasurement.windDirection }} </li>
      <li> Wind Dispersion:{{ aggregatedMeasurement.windSpeedDispersion }} </li>
      <li> Availability:{{ aggregatedMeasurement.availability }}  </li>
  </ul>

I made the flask models with such names to keep python naming practices. I just attempted changing the angular model to have names match the flask model and schema so.. instead of public windSpeed to public wind_speed , cleared my cache and restarted the servers... and it's still only displaying the ones from earlier.

This is my first time using Angular/ using Flask API.. Thanks

Answer 1

There's an angular package called json2typescript... Run npm install json2typescript and import it into your app.module.ts and in your angular model you can add a JsonProperty that says what the json property is and it will map it to your model. I'm not positive this will fix it, but it seems angular just doesn't like '_' characters in the json properties so maybe it will work:

import { JsonObject, JsonProperty } from 'json2typescript';

@JsonObject
export class AggregatedMeasurementSchema {
id: number = undefined;
time: Date = undefined;
windSpeed: number = undefined;
@JsonProperty('wind_direction')
windDirection: number = undefined;
@JsonProperty('wind_speed_dispersion')
windSpeedDispersion: number = undefined;
availability: number = undefined;
};

and in your angular service you convert the json to your typescript model with:

this.http.get(someUrl).map(response => {
    let jsonConvert: JsonConvert = new JsonConvert();
    let measurementObject: AggregatedMeasurementSchema = jsonConvert.deserializeObject(response, AggregatedMeasurementSchema);
})

and in your tsconfig.json you might have to add this to your compiler options:

"experimentalDecorators": true,
    "emitDecoratorMetadata": true,