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.

Sajeetharan · Accepted Answer · 2018-06-05 13:42:15Z

2

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

answered Jun 5, 2018 at 13:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muthu Over a year ago

It's working. I had done a little mistake in my code, that's why my code was not working. your solution helped me to correct.

Collectives™ on Stack Overflow

Angular 4 - Displaying complex Json values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related