Below is the json structure I have:
[
{
"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 successfully retrieved and displayed the section names (secName) using the code snippet below.
<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'm seeking assistance to display only the pageName values from "Module 1" (Page 1, Page 2, Page 3), but I haven't found a solution yet. Any suggestions on achieving this task would be greatly appreciated. Additionally, feedback on whether the current structure is correct or needs modifications is welcomed as well.