Lightning: nested aura:iteration using outer iteration variable

Question

I am trying to dynamically display posts using aura:iteration. For each user's post there should be a list of comments (using a nested aura:iteration). I am getting my data in JSON format from an API call, and everything renders correctly, however I can't use the comments field for my second aura:iteration items.

JSON Data:

    response: {
        posts: [{
            user: person1,
            post: "foo",
            comments: [
                "comment 0",
                "comment 0"
            ],
            time: "yesterday"
        },
        {
            user: person2,
            post: "bar",
            comments: [
               "comment 1",
               "comment 1"
            ],
            time: "1 hr ago"
        },
    ...
    }

Aura:

    <aura:attribute name="post_list" type="String[]" default="['N/A']" />

    <ul class="slds-list--vertical-space-medium slds-m-left--xx-small">

     <!-- POST BODY -->

      <aura:iteration items="{!v.post_list}" var="post_item" indexVar="i">
        <li class="post-element slds-item">
          <div>
            <div class="time-stamp">{!post_item.user}</div>
          </div>
          <div class="post-body">
            <div>
              <div class="post-text">{!post_item.post}</div>
              <a href="{!v.btnURL}">See More</a>
            </div>
          <div class="post-time">{!post_item.time}</div>
        </div>

  <!-- / POST BODY -->
  <!-- COMMENT PANEL -->

      <div id="comment-panel" style="display: none" class="comment-panel">
        <ul id="comment-list">
          <aura:iteration items="{!post_item.comments}" var="post_comment">
            <li>
              <div class="comment-element">
                <div class="comment-user">
                  John Cena
                </div>
                <div class="comment-text">
                  comment 0
                </div>
              </div>
            </li>
          </aura:iteration>
        </ul>

  <!-- / COMMENT PANEL -->

</li>
 </aura:iteration>

Error Message:

    AuraRuntimeException: no such property: comments

Answer 1

First, your <aura:attribute> is of the wrong type - it's a String array.

While I'm not certain that this will cause you problems, I advise you to change it to an Object[] type. The reason for this is that a String can't really have any inner properties.

If that doesn't work...

It's quite possible that for some posts there are no comments.

To get around this, you could pre-process the array to add an empty comments array for posts with no comments. This would prevent this sort of error occurring.

Eg:

var arr = component.get("v.post_list");
arr.forEach(function(post){
  if(!post.comments){
    post.comments = [];
  }
});
component.set("v.post_list",arr);

Answer 2

It seems like closing div is missing in your code. Try this out:

Aura:

    <aura:attribute name="post_list" type="String[]" default="['N/A']" />

    <ul class="slds-list--vertical-space-medium slds-m-left--xx-small">

     <!-- POST BODY -->

      <aura:iteration items="{!v.post_list}" var="post_item" indexVar="i">
        <li class="post-element slds-item">
          <div>
            <div class="time-stamp">{!post_item.user}</div>
          </div>
          <div class="post-body">
            <div>
              <div class="post-text">{!post_item.post}</div>
              <a href="{!v.btnURL}">See More</a>
            </div>
          <div class="post-time">{!post_item.time}</div>
        </div>

  <!-- / POST BODY -->
  <!-- COMMENT PANEL -->

      <div id="comment-panel" style="display: none" class="comment-panel">
        <ul id="comment-list">
          <aura:iteration items="{!post_item.comments}" var="post_comment">
            <li>
              <div class="comment-element">
                <div class="comment-user">
                  John Cena
                </div>
                <div class="comment-text">
                  comment 0
                </div>
              </div>
            </li>
          </aura:iteration>
        </ul>
      </div>
  <!-- / COMMENT PANEL -->

 </li>
 </aura:iteration>

Let me know if it helps.

Answer 3

Caspar correctly pointed out, you need to change the aura:attribte type to Object[]

Are you getting the same error while using Object[] ?

Answer 4

I had similar scenario where in I was getting json in following format :

 {"Section 1":[{"jsonFieldWrapperList":[{"jsonLabel":"Label1","jsonName":"Name 1","jsonOrder":1,"uiType":"Text","value":"213"}]},],"Section 3":[{"jsonFieldWrapperList":[{"jsonLabel":"Label2","jsonName":"Name2","jsonOrder":51,"uiType":"Text","value":"2133"}]},],"Section 3":[{"jsonFieldWrapperList":[{"jsonLabel":"Label3","jsonName":"Name23","jsonOrder":81,"uiType":"Text","value":"5555"}]},]}

I created array in LEX controller as follows -

var jsonResult = JSON.parse(resultSet); //your JSON String
var objectList = [];

    for(var objKey in jsonResult) {
        var innerObj = jsonResult[objKey];

        var fieldLevelArray = [];
        for(var innerKey in innerObj){

            console.log(innerKey);
            console.log(innerObj[innerKey]);

            var dataObj = innerObj[innerKey];

            console.log(dataObj.jsonFieldWrapperList);

            var fWrapper = dataObj.jsonFieldWrapperList;

            for(var innerArr in fWrapper){

                var fieldDetails = fWrapper[innerArr];

                fieldLevelArray.push({key : fieldDetails.jsonLabel, value : fieldDetails.value});

            }
        }

        console.log(objKey);

        objectList.push({key:objKey, value:fieldLevelArray });

    }

Here I set the value of main array which contains list of objects to each key eg ["Detail" : Object (This is inner obj)]

component.set("v.objectList", objectList);

Following is my attribute to hold list of objects in lex markup

<aura:attribute name="objectList"  type="List" />

And I have iterated in following way:

<aura:iteration items="{!v.objectList}" var="objectVar" indexVar="key">
  <aura:iteration items="{!objectVar.value}" 
                          var="innerVar"indexVar="innerVarKey">

     {!innerVar.key}        
     {!innerVar.value} 

 </aura:iteration>  

</aura:iteration>

Hope this helps.

Pls ignore my writing style as this is the first question I have answered here :)