AngularJS Can't write whole array

Question

can someone tell me why i can't print out whole array Author which is in boardcards??

https://plnkr.co/edit/abZMTi7fSJ6sX691Ubm0?p=preview

   <ul ng-repeat="card in assignedCards">
        <div>
            {{card.name}}  {{card._id}}
        </div>
          <li ng-repeat="item in card.boardcards.Author">{{item}}</li>
      </ul>

and here is object

:

  $scope.assignedCards = {
    "_id" : "59e36c44b89e5f2fb01d1310",
    "name" : "1",
    "boardcards" : {
        "name" : "1",
        "_id" : "59e36c48b89e5f2fb01d1312",
        "Author" : [ 
           "59df60fb6fad6224f4f9f22e",
           "59df60fb6fad6224f4f9f22f",
           "59df60fb6fad6224f4f9f22a" 
        ]
    }
}

EDIT

I use ur examples but still dont print out Authors, this Authors is array of strings maybe this is reason??

Its with model mongoose

  lists : [{ 
    list: String,
    cards: [{ 
      name: String,
      Author: [{type : Schema.Types.ObjectId, ref: 'User'}]
    }]
  }],

Maybe here is problem??

Pankaj Parkar · Accepted Answer · 2017-10-15 15:21:05Z

1

Since you have Object instead of array, it have to do it in different way. Use (key, value) in ng-repeat which will give you current key iterating object object key and the value it has.

<ul ng-repeat="(key, value) in assignedCards">
    <div>
      <span ng-if="key=='name'">{{value}}</span>
      <span ng-if="key=='_id'">{{value}}</span>
    </div>
    <li ng-if="key=='boardcards'" ng-repeat="item in value.Author">
       {{item}}
    </li>
</ul>

Demo Here

Above is for explanation, The simpler & recommended version would be without using ng-repeat on your desire object rather than using ng-repeat over whole model.

<ul>
    <div> {{assignedCards.name}}  {{assignedCards._id}} </div>
    <li ng-repeat="item in assignedCards.value.Author">
       {{item}}
    </li>
</ul>

edited Oct 15, 2017 at 15:21

answered Oct 15, 2017 at 15:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Naren Murali · Accepted Answer · 2017-10-15 15:56:44Z

0

Update:

The problem was identified after the complete object was shared, it was not repeating due to duplicates in the second level array, this has been solved using track by $index, Refer the below code.

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.name = 'World';
  $scope.assignedCards = [{
    "_id": "59e36c44b89e5f2fb01d1310",
    "name": "1",
    "boardcards": {
      "name": "1",
      "_id": "59e36c48b89e5f2fb01d1312",
      "Author": ["59df60fb6fad6224f4f9f22e", "59df60fb6fad6224f4f9f22f", "59df60fb6fad6224f4f9f22a", "59df60fb6fad6224f4f9f22b", "59df60fb6fad6224f4f9f22c", "59df60fb6fad6224f4f9f22d", "59df60fb6fad6224f4f9f22e"]
    }
  }, {
    "_id": "59e36e2c8c06dd331c3467d6",
    "name": "raz raz",
    "boardcards": {
      "name": "fea",
      "_id": "59e36e508c06dd331c3467f2",
      "Author": ["59df60fb6fad6224f4f9f22d"]
    }
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <p>Hello {{name}}!</p>
  <ul ng-repeat="card in assignedCards">
   <div>
      {{card.name}} {{card._id}}
    </div> 
    <li ng-repeat="item in card.boardcards.Author track by $index">{{item}}</li>
  </ul>
</div>

Old Answer:

The problem is you are using an object, hence there is no need for an ng-repeat so you can just do like. Access the object properties like assignedCards.name or assignedCards._id, since the property assignedCards.boardcards.Author is an array, we can use our usual ng-repeat to get the values!

var app=angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name='World';
  $scope.assignedCards= {
    "_id": "59e36c44b89e5f2fb01d1310", "name": "1", "boardcards": {
      "name": "1", "_id": "59e36c48b89e5f2fb01d1312", "Author": [ "59df60fb6fad6224f4f9f22e", "59df60fb6fad6224f4f9f22f", "59df60fb6fad6224f4f9f22a"]
    }
  }
});

<script src="https://code.angularjs.org/1.4.12/angular.js"></script>
<body ng-controller="MainCtrl" ng-app='plunker'>
  <p>Hello {{name}}!</p>

  <ul>
    <div>
      {{assignedCards._id}} {{assignedCards.name}}
    </div>
    <li ng-repeat="item in assignedCards.boardcards.Author">{{item}}</li>
  </ul>
</body>

edited Oct 15, 2017 at 15:56

answered Oct 15, 2017 at 15:03

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

3 Comments

Naren Murali Over a year ago

@AnetaJabłońska Can you please share the complete JSON received from the from the server,refer here

Aneta Jabłońska Over a year ago

gist.github.com/Turqus/351de033aefa8687b3f4d05b4ca4b123 here is content {{assignedCards}} (its array objects)

Naren Murali Over a year ago

@AnetaJabłońska Updated my answer! thanks for sharing the JSON :)

Sanoop Jose · Accepted Answer · 2017-10-15 16:10:31Z

0

ng-repeat takes boardcards from assignedCards in the first loop. So in the inner loop use card.Author instead of card.boardcards.Author

<ul ng-repeat="card in assignedCards">
    <div>
        {{card.name}}  {{card._id}}
    </div>
      <li ng-repeat="item in card.Author">{{item}}</li>
  </ul>

answered Oct 15, 2017 at 16:10

Sanoop Jose

744 bronze badges

Collectives™ on Stack Overflow

AngularJS Can't write whole array

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related