SOC and JSON Sections

In our prior article we introduced the idea of Allowing JSON to determine which components to create.

JSON Maps to the GUI

Consider this response from your back-end:

In our last article, we created a component "Controls" which handles the array of values as seen in the JSON above.

And this result in the GUI (after a recent change):

The top bar without any text is bound to a different component than the "Test Group Name" (Control section which is showing just fine). We want to quickly find out why there's no text showing up in that empty bar.

HTML Binding

 <section class="Panel">
      <h2>{{ user }}</h2>
      <button (click)="onSaveClicked()" [hidden]="hideButton">Save</button>
      <div class="mainSettingArea">
         {{ setting.FunctionalGroupName }}
      </div>
      <div class="settingsContainer">
         <div
            class="card"
            *ngFor="let currentSetting of setting.FunctionalSettings"
         >
            <p class="groupNameHeader">
               {{ currentSetting.SettingsGroupName }}
            </p>
            <div
               class="controls"
               *ngFor="let control of currentSetting.Controls"
            >
               <display
                  [settingGroupName]="currentSetting.SettingsGroupName"
                  [control]="control"
               ></display>
            </div>
         </div>
      </div>
   </section>

In the HTML above we see a demarcation of concerns, we can see the button, which is right above our "blank bar". The text; of which, is an interpolation of setting.FunctionalGroupName

We note that our control section is working fine, so we are not interested in the HTML component named

<display> 

Which is a component that handles all Controls. Nor are we concerned with the section just above the display markup.

 <p class="groupNameHeader">
     {{ currentSetting.SettingsGroupName }}
 </p>

So we keep traveling upward and we spot this section:

<div class="mainSettingArea">
    {{ setting.FunctionalGroupName }}
</div>

Must be the root cause of nothing showing up! Can you spot the reason why it's not working. Please post answer below.

Take Away

By following the SOC principal, we've made debugging issues simple. In addition, any changes we make are limited to only that concern!

BTW: There is one other "bug" in the GUI can you spot it?

JWP2020