Separation of Concerns (SOC); if followed, will help you to be more productive as well as limit bugs based on changes.

Break Up JSON Responsibilites

Assume your back-end is sending back data like this. Do you see any logical sections in the JSON that should be their own component? (hint: anytime you see an array, it may be a good candidate for a single concern)

Your Angular binding (which worked fine before the last series of changes) now looks like this when the response is displayed:

We can see the header "Test a Group Name" but nothing under it. That area in JSON is the Controls array which has a PropertyName, Type, and CurrentValue.

The Controls Component

If we find the component where each control is bound we can easily solve the problem. Indeed it's simple for us because of SOC. This code handles only the JSON in the controls array above.

Take Away

Take a good look at your JSON being returned from the back-end. Do you see any areas within the JSON that should be handled by a single component? If you do, then congratulations, you are using SOC.

Can you spot the reason why the control section didn't show anything?

Please post your answer below. Happy coding!

JWP2020