Angular2 and AWS Lambda: How to load data before rendering the component

Question

I am using a Lambda function to get my data from a database and would like to wait until it arrives before my page gets rendered.

I know there is a combination of promises and *ngIf to get this done (as it is explained here), however I am not sure how to implement this in my code.

This is my code :

overview.component.ts

export class OverviewComponent implements OnInit {
  businessPartner: any;
  bpNumber: number;
  paymentDetail: PaymentDetails;
  response: any;

  constructor() { }

  ngOnInit() {
        AWS.config.update({
            //Testuser
            accessKeyId: "XXXXXXXXXXXXX",
            secretAccessKey: "XXXXXXXXXXXXXXXXXX",
            region: "eu-west-1",
        });

        //get bpNumber from session storage
        this.bpNumber = +JSON.parse(sessionStorage.getItem('bpNumber'));

        this.lambdaGetBp(this.bpNumber);

        };


  lambdaGetBp(bpNumber: number): any{
      var lambda = new AWS.Lambda();
        var params = {
        FunctionName: 'readFromDynamoDb', /* required */
            Payload: JSON.stringify({ 
                bpNumber : bpNumber,
            })
        };
       lambda.invoke(params, function(err, data) {
            if (err) console.log(err, err.stack);    // an error occurred
            else {
                var jsonObj = JSON.parse(data.Payload)
                console.log(jsonObj)           // successful response
                return jsonObj;
            }    
        });
  }

  click(){
      console.log(this.businessPartner);
  }


}

And my Lambda function index.js

'use strict';

var AWS = require('aws-sdk');

var docClient = new AWS.DynamoDB.DocumentClient({ region: 'eu-west-1' });


exports.handler = function(e, ctx, callback) {
    let table = "dsbTable";
    let bpNumber = e.bpNumber;
    let params = {       
        TableName: table,
        Key: {
            "bpNumber": bpNumber
        },
    };
    docClient.get(params, function(err, data) {
        if (err) {
            console.error("Unable to read item. Error JSON:", JSON.stringify(err, null, 2));
            callback(err, null);
        } else {
            var xml2js = require('xml2js'); // XML2JS Module
            var parser = new xml2js.Parser(); // Creating XML to JSON parser object

            parser.parseString(data.Item.getBp, function(err, result) { // creating javascript objects from every XML-entry <=== THIS IS NOT PRETTY :(
                if (err) {
                    console.log('Error!!!!!!')
                } else {
                    data = result;
                    console.log('Done');
                }

            });
        };
        callback(null, data);

    });

};

Thank you for your help :)

score 2 · Accepted Answer · answered Aug 30 '16 at 12:04

Okay, I finally figured it out and it was actually super easy. I just had to put a Promise around the lambdaGetBp()-Method, or rather around the code inside it.

It now looks like this:

  lambdaGetBp(bpNumber: number){
      return new Promise((resolve, reject) => {          //HERE
        var lambda = new AWS.Lambda();
            var params = {
                FunctionName: 'readFromDynamoDb', /* required */
                Payload: JSON.stringify({ 
                    bpNumber : bpNumber
                })
            };
        lambda.invoke(params, function(err, data) {
                if (err) console.log(err, err.stack);    // an error occurred
                else {
                    var jsonObj = JSON.parse(data.Payload);
                    console.log(jsonObj);           // successful response
                    resolve(jsonObj);                    // AND HERE
                }    
            });
        });
  }

and then call it like a normal promise in the ngOnInit()

this.lambdaGetBp(this.bpNumber).then(data => this.bp= data);

Angular2 and AWS Lambda: How to load data before rendering the component

1 Answers1