CODEWITHSUNDEEP
angularngfor
user3690866
user3690866

Reputation: 1

*ngFor iterate nested array of JSON

Hi I have JSON data in below format. I want to render it in HTML page using angular.

questionarie = [{
   qText : " Issue Type",
   options : ["Functional Issue" , "Performance Issue" , "Crash Issue" , "Diagnostic Issue"],
   questionId : "1001",
   "parentId" : "",
   childs : [{
      qText : " Issue Type",
      options : ["Functional Issue" , "Performance Issue" , "Crash Issue" , "Diagnostic Issue"],
      questionId : "1001_1",
      "parentId" : "1001",
      childs : []
   }]
}];

I tried all below option. 

   <ul>
        <li *ngFor=" let item of questionnaries; let ind = index">{{item.qText}} 
            <ul>
                <li *ngFor=" let option of item.options; let optionIdx = index ">{{option}} {{ind2}} 
                  <ul ng-if="post?.capabilities?.item.childs[optionIdx]?.length > 0 ; let child = item.childs[optionIdx]; ">
                    <li >{{child.qText}}</li>
                  </ul>
               </li>
            </ul>

I am getting below error in browser console:

ERROR TypeError: Cannot read property qText of undefined

Upvotes: 0

Views: 75

Answers (2)

Orestis Zekai
Orestis Zekai

Reputation: 922

Your variable name is questionarie but you are accessing questionaries in your html

Upvotes: 1

Adrian Brand
Adrian Brand

Reputation: 21628

ng-if is AngularJs, Angular uses *ngIf

You are iterating questionnaries but your array is called questionarie

Have you tried using

item.childs[optionIdx].qText

Rather than trying to let a view variable.

What is post?

Is this what you are looking for https://stackblitz.com/edit/angular-n5abdx?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

Related Questions