1

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
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);
  • Hey Casper, thanks for responding. I changed it to Object[] type, but still no luck. (I hard coded comments for our api at this stage in the product, so I don't have to worry about null values... however I will implement this later). – Stuart Jul 7 '17 at 19:01
0

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.

  • If there was a closing div, the lightning parser wouldn't allow a save - it's probably just a transcription error. – Caspar Harmer Jul 7 '17 at 8:25
  • Yeah I deleted some unrelated code for the post and mistakenly removed that end tag. – Stuart Jul 7 '17 at 19:04
0

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

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

  • Yes, I changed it to Object[] type – Stuart Jul 10 '17 at 17:50
  • Still facing the issue ? – Mustafa Jhabuawala Jul 11 '17 at 5:43
  • Yeah I'm still having trouble with it – Stuart Jul 11 '17 at 16:20
  • Do me a favor. Send your code at mustafaj0052@gmail.com – Mustafa Jhabuawala Jul 12 '17 at 5:30
0

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.