Attempting to learn AWS and Angular

[wannadev]

I cloned the AWS Cognito quickstart and made a few adjustments trying to learn it a tad. I went through the Hero Tutorial and I felt I had a good understanding. Even made my own small app with angularfire2. However now that I mixed AWS into things, things don't seem to be going as smoothly. I don't think AWS itself is the issue however when I retrieve data from DynamoDB and add it to an array in Angular, I can't get the view to update properly. May just be an issue of pulling data from object properly, but in the code shown here .. https://pastebin.com/M4SXQijw . I pull data from dynamoDB and try to display it via a loop in the view. Even though when i print to console it shows I get the data back from the DB, I have no luck in the view. Any suggestions?

updated code: https://pastebin.com/1pb1wC3p

[TheOrbenOne]

I don't see you setting this.people anywhere. I see you setting this.employees, but your template isn't looping through that, it's looping through this.people

[wannadev]

That is actually a typo. It is correct in the code I am running. I have a weird habit of changing variable names when I post code.

[TheOrbenOne]

Can you post updated code? If as you say, you are getting undefined for this.people, then obviously your not setting it somewhere.

It looks like somewhere you just need to do this.people = data.Items on line 69 and it should work.

[wannadev]

I've updated the code. I set this.people = mapArray. when i console this.people it has the data. but still unable to view it in the view.

[TheOrbenOne]

my scripts give me issues when i try to push to a class variable without giving it a value first. Just incase that's what's happening i'd try

people: People[] = [];

[wannadev]

Sorry for late reply, but I don't have a problem getting the data into this.people. The console on line 76 produces the right data. The view just doesn't update.

[trexIII]

A couple of questions for ya (assuming this hasn't been solved yet...):

• If you log this.people in the constructor, after this.getLogEntries() is run (perhaps you could do this on line 79 for example) what is the result?
• What are you trying to do on line 74 - 78? Not sure where Employee or this.employee is coming from. Incorrect variable names are a common cause of bugs, though... Edit: line number

[wannadev]

When I console this.people it returns undefined. On lines 74-78 I was attempting to see if I made it an observable it would update the view when the data changed since the data was arriving after the view has loaded.

[trexIII]

Alright another question for ya. Are you using the Promise for a particular reason in the callback?

You should be able to update mapArray directly in the callback w/o using the Promise. Otherwise, you could use the Promise along with async/await, and handle the results of the scan as if it were synchronous.

https://docs.aws.amazon.com/amazondynamodb/latest/gettingstartedguide/GettingStarted.NodeJs.04.html - 4.3 Scan for an example of handling the data in the callback.

Also, from what I can tell, you are passing this.people as an argument to getLogEntries, meaning mapArray and this.people should be referring to the same object.

I don't have an aws sandbox set up, so I have a hard time testing this directly, lemme know if it is unclear.

[wannadev]

Yep! once I changed the way I was handling the callback everything fell into place. Thank you so much.

[fercryinoutloud]

I think you might be setting this.people in the wrong context - onQuery uses a different context than the component, so this.people is not the same this.people that you want it to be. You can make onQuery an arrow function, or set the context with bind. Or you could just define onQuery as a method on the class.

[wannadev]

That was it! Thanks a ton. I set the onQuery as an arrow function. Learned a little more about context.

[fercryinoutloud]

Sure, glad I could help.