Angular 4 - Displaying complex Json values

Question

I have json structure as below.

[
   {
      "section":{
         "secName":"Module 1",
         "pages":[
            {
               "pageName":"Page 1",
               "pageType":"brightcove",
               "pageData":[
                  {
                     "Title":"Title 1",
                     "Question":"Question 1",
                     "Answer":"Answer 1"
                  }
               ]
            },
            {
               "pageName":"Page 2",
               "pageType":"expose",
               "pageData":[
                  {
                     "Title":"Title 1_2",
                     "Question":"Question 1_2",
                     "Answer":"Answer 1_2"
                  }
               ]
            },
            {
               "pageName":"Page 3",
               "pageType":"text-image",
               "pageData":[
                  {
                     "Title":"Title 1_3",
                     "Question":"Question 1_3",
                     "Answer":"Answer 1_3"
                  }
               ]
            }
         ]
      }
   },
   {
      "section":{
         "secName":"Module 2",
         "pages":[
            {
               "pageName":"Page 1 222",
               "pageType":"brightcove",
               "pageData":[
                  {
                     "Title":"Title 2 1",
                     "Question":"Question 2 1",
                     "Answer":"Answer 2 1"
                  }
               ]
            }
         ]
      }
   },
   {
      "section":{
         "secName":"Module 3",
         "pages":[
            {
               "pageName":"Page 1 3",
               "pageType":"brightcove",
               "pageData":[
                  {
                     "Title":"Title 3 1",
                     "Question":"Question 3 1",
                     "Answer":"Answer 3 1"
                  }
               ]
            },
            {
               "pageName":"Page 3 44444",
               "pageType":"text-image",
               "pageData":[
                  {
                     "Title":"Title 1_34",
                     "Question":"Question 1_34",
                     "Answer":"Answer 1_34"
                  }
               ]
            }
         ]
      }
   }
]

I am able to display the section names(secName) by using below code.

<ng-container *ngFor="let modName of inputObjResponse; let i = index">              
     <div class="modname" (click) = "moduleSelected($event,i)">               
           <h3>{{modName.section.secName}}</h3>
     </div>
 </ng-container>

Now I want to display all the "Module 1" pageName (Page 1, Page 2, Page 3) values alone, but I am not getting any way to do that. Please help me in getting the solution. Also, Please let me know whether this is correct structure or not.

Answer 1

You just need another ngFor

<ng-container *ngFor="let modName of inputObjResponse; let i = index">             <ul>
    <li *ngFor="let page of modName.section.pages">{{page.pageName}}</li>
</ul>
    <div class="modname">               
      <h3>{{modName.section.secName}}</h3>
   </div>
 </ng-container>

STACKBLITZ DEMO