*ngFor iterate nested array of JSON

Question

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

Your variable name is questionarie but you are accessing questionaries in your html — Orestis Zekai
– Orestis Zekai, Commented Oct 9, 2019 at 10:50

Adrian Brand · Accepted Answer · 2019-10-09 11:17:10Z

1

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

edited Oct 9, 2019 at 11:17

answered Oct 9, 2019 at 11:04

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

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

Comments

Orestis Zekai · Accepted Answer · 2019-10-09 11:19:06Z

1

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

answered Oct 9, 2019 at 11:19

Orestis Zekai

9221 gold badge15 silver badges31 bronze badges

1 Comment

user3690866 Over a year ago

I tried item.childs[optionIdx].qText and let child = {tem.childs[optionIdx]} then using {{ child.qText}} . I have corrected json object name questionarie this not the problem. problem is in nested <li >{{child.qText}}</li> if I use only <li >{{child}}</li> html UI shows [object object] it means object is there but it is not typedcased to json equivalent.

Collectives™ on Stack Overflow

*ngFor iterate nested array of JSON

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related