AngularJS, Nested array

Question

I have a problem with ng-repeat in AngularJs. I have an array of Objects with 3 different keys and one of those keys is an array of objects. So I simply use the ng-repeat for main array like this:

<div class="post-content" ng-repeat="post in nfc.posts track by $index">
  ...
</div>

Everything is ok. But when I use a nested ng-repeat in this loop, I get nothing. I used before nested ng-repeats a lot and faced no problem. Here is the code:

comments:: {{post.comments}}
<div class="post-comment" ng-repeat="comment in post.comments">
  comment: {{comment}}
  <img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
  <p>
    <a href="" class="profile-link">{{comment[4] + ' ' + comment[5]}}</a> {{comment[6]}}
  </p>
</div>

The comments:: {{post.comments}} statement shows me the content, but the ng-repeat does not appear to work correctly.

A sample of comments object in browser console is here

Array(3)
0: {
    0: 10196,
    1: 10325,
    2: 62,
    3: 0,
    4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:96"
  }
1: {
    0: 10195,
    1: 10325,
    2: 50,
    3: 0,
    4: Sun Feb 18 2018 20: 15: 41 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:97"
  }
2: {
    0: 10194,
    1: 10325,
    2: 62,
    3: 0,
    4: Sat Feb 17 2018 12: 36: 39 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:98"
  }

This array is Array of arrays and I convert it to Array of objects after I receive it from API.

Where is my mistake?

There is nowhere totoObject(array) function in your controller and even you are not importing it from anywhere. Is it by mistake? — Imran Ahmad Ghazali
– Imran Ahmad Ghazali, Commented May 11, 2018 at 9:30
Thanks for asking. I add some loadings to pages and this code with no change worked! I think it is something about lifecycle and digest in angularJs. But still I dont know the reason. @ShashankVivek — Saeed
– Saeed, Commented May 20, 2018 at 9:45

Zavi · Accepted Answer · 2018-05-11 09:07:03Z

4

First mistake I noticed in your code is this totoObject(itm["arrays"]))

  $scope.posts.forEach(itm => (itm["comments"] = totoObject(itm["arrays"])));

your code that you provided in plunker says

 function toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i) rv[i] = arr[i];
    return rv;
  }

change totoObject to toObject

$scope.posts.forEach(itm => (itm["comments"] = toObject(itm["arrays"])));

answered May 11, 2018 at 9:07

Zavi

72311 silver badges24 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Try

<img src="{{comment['3']}}" alt="" class="profile-photo-sm" />

comment[3] means that comment is an array and you are trying to access 4th element. Similarly change other uses as well.

Update 1

Check this plunkr. Below were your issues:

Use of totoObject
In your question you have provided array of objects (below code), which isn't the case in your plunkr. So, comment[3] would work just fine.

here (it shows array of objects)

 0: {
    0: 10196,
    1: 10325,
    2: 62,
    3: 0,
    4: Sun Feb 18 2018 21: 56: 58 GMT + 0330(+0330),
    5: "text", 
    6: "text",
    7: "text",
    8: "text",
    9: "text",
    $$hashKey: "object:96"
  }

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 11, 2018 at 7:36

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

8 Comments

Saeed Over a year ago

Thanks for answer. But comment: {{comment}} must show something before that. right?

Shashank Vivek Over a year ago

@Saeed.Ataee can you create a plunkr with the Json data ? The answer i provided will also help once you are able to see {{comment}}

Saeed Over a year ago

Make this plunkr work please plnkr.co/edit/n8oh66zfOxuhcRSjM5dY?p=preview

Saeed Over a year ago

That totoObject is a typing mistake, I,ll Copy my whole code here plnkr.co/edit/ZCUm0C78gOv7SZbtlBCr?p=preview

Shashank Vivek Over a year ago

@Saeed.Ataee Have you checked your plunkr ? You havent included script.js file , you havent added <html> and <body> tags. The IIFE file is incomplete. If thats the script then change angular.module("app.user") to angular.module("app.user",[]). Also there is no ng-app. Create a complete example 1st plz and let me know

|

Saeed · Accepted Answer · 2018-05-13 18:52:31Z

Check the demo,

DEMO

var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.nfc ={};
   $scope.nfc.posts = [
  {
    "Post": {
      "Name": "text",
      "Family": "text",
      "UserName": "text",
      "WorkPlace": "text",
      "UserImage": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
      "PPic": "~/Images/Post/1337305170502018211044.jpg",
      "DSC": "text",
      "CF": "text",
      "CN": "(Mediastinum)",
      "Rate": 0,
      "MentionPostID": 0,
      "FollowCount": 1,
      "UserID": 50,
      "Enable": 1,
      "UPID": 10325,
      "IsFollow": false,
      "IsRate": false,
      "IsFollowUser": true,
      "RegDate": "2018-02-10T21:30:44.000Z"
    },
    "PostComment": [
      [
        10196,
        10325,
        62,
        0,
        "2018-02-18T18:26:58.000Z",
        "text",
        "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "text",
        "text",
        "text"
      ],
      [
        10195,
        10325,
        50,
        0,
        "2018-02-18T16:45:41.000Z",
        "text",
        "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
        "text",
        "text",
        "text"
      ],
      [
        10194,
        10325,
        62,
        0,
        "2018-02-17T09:06:39.000Z",
        "text",
        "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "text",
        "text",
        "text"
      ]
    ],
    "newCommentText": "",
    "comments": [
      {
        "0": 10196,
        "1": 10325,
        "2": 62,
        "3": 0,
        "4": "2018-02-18T18:26:58.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "7": "text",
        "8": "text",
        "9": "text"
      },
      {
        "0": 10195,
        "1": 10325,
        "2": 50,
        "3": 0,
        "4": "2018-02-18T16:45:41.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170mmkhalilzadeh2018294642.jpg",
        "7": "text",
        "8": "text",
        "9": "text"
      },
      {
        "0": 10194,
        "1": 10325,
        "2": 62,
        "3": 0,
        "4": "2018-02-17T09:06:39.000Z",
        "5": "text",
        "6": "~/Images/User/Thumb1337305170Shahryar201711122149.jpg",
        "7": "ttt",
        "8": "ttt",
        "9": "ttt"
      }
    ]
  }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div class="post-content" ng-repeat="post in nfc.posts track by $index">
 <div class="post-comment" ng-repeat="comment in post.comments">
  <img src="{{comment[3]}}" alt="" class="profile-photo-sm" />
  <p>
    <a href="" class="profile-link">{{comment[4] + ' ' + comment[5]}}</a> {{comment[6]}}
  </p>
</div>
</div>
</body>

Collectives™ on Stack Overflow

AngularJS, Nested array

3 Answers 3

Comments

Update 1

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Update 1

8 Comments

Comments

Related