Angular, parsing array out of JSON object using ng-repeat

Question

I'm wanting to iterate through multiple JSON objects i've pulled from my database to display the containing data. I'm having trouble getting comments, comments contains an array of strings, however, when i'm passing the objects out they're reamining objects.

Here are my JSON objects:

{
  eventShow :
  [
    {
            "_id" : ObjectId("5898dabd721461267c6b0ca6"),
            "username" : "larry",
            "type" : "Crosscountry",
            "name" : "Muddy run",
            "rating" : 8,
            "description" : "Had a brilliant time, got a bit dirty but would definitely recommend!",
            "distance" : "6",
            "comments" : [
                    "Looks like you had fun, would love to join you next time!",
                    "This definitley isn't my kind of thing..."
            ],
            "__v" : 0
    },
    {
            "_id" : ObjectId("5898e575721461267c6b0ca7"),
            "username" : "larry",
            "type" : "Short distance bike ride",
            "name" : "Bike sprint!",
            "rating" : 10,
            "description" : "Gotta go fast!",
            "distance" : "1",
            "comments" : [ ],
            "__v" : 0
    }
  ]
}

My HTML:

<ul ng-show="hasEvent" ng-repeat="x in eventShow">
  <li>
    {{'Event Name: ' + x.name}}
  </li>
  <li>
     {{'Type: ' + x.type}}
   </li>
   <li>
     {{'Distance: ' + x.distance + ' miles'}}
   </li>
   <li>
     {{'Rating: ' + x.rating}}
   </li>
   <li>
     {{'Description: ' + x.description}}
   </li>
</ul>
   <hr>
<div class="actionBox">
    <ul class="commentList" ng-repeat="y in x.comments">
        <li>
            <div class="commentText">
                <p class="">{{y}}</p>
            </div>
        </li>
    </ul>
</div>

How would I go about displaying all comments in a readable fashion, would JSON.stringify() be the right way to go?

A $http.get() which retrieves the JSON object from my mongoDB database is being called from my backend and passing a JSON object back to my services, which is being called from my controller, then... A JSON object is being passed into $scope.eventShow.

I've managed to display all comments with a nested ng-repeat however still need to get them as strings. As shown here

Answer 1

Try this (based on your json single object):

<ul ng-show="hasEvent">
  <li>{{'Event Name: ' + eventShow.name}}</li>
  <li>{{'Type: ' + eventShow.type}}</li>
  <li>{{'Distance: ' + eventShow.distance + ' miles'}}</li>
  <li>{{'Rating: ' + eventShow.rating}}</li>
  <li>{{'Description: ' + eventShow.description}}</li>
</ul>
<hr>
<div class="actionBox">
  <ul class="commentList" ng-repeat="x in eventShow.comments">
    <li>
      <div class="commentText">
        <p>{{x}}</p>
      </div>
    </li>
  </ul>
</div>

If you want to have nested loop and json object in your example is one object in some array (eventShow), then you will need second level ng-repeat for "x.comments"

UPDATE For nesting outside of dom children, you need to use ng-repeat-start and ng-repeat-end (https://docs.angularjs.org/api/ng/directive/ngRepeat)

<ul ng-show="hasEvent" ng-repeat-start="x in eventShow">
  <li>{{'Event Name: ' + x.name}}</li>
  <li>{{'Type: ' + x.type}}</li>
  <li>{{'Distance: ' + x.distance + ' miles'}}</li>
  <li>{{'Rating: ' + x.rating}}</li>
  <li>{{'Description: ' + x.description}}</li>
</ul>
<hr>
<div class="actionBox" ng-repeat-end>
  <ul class="commentList" ng-repeat="y in x.comments">
    <li>
      <div class="commentText">
        <p>{{y}}</p>
      </div>
    </li>
  </ul>
</div>

Answer 2

You put x.comments outside the ng-repeat. Also, you're missing a comma between the objects in the outer array.

Answer 3

To access an array from inside ng-repeat, if you need auto increment variable you can use $index+1 for an array.(in your code y[$index+1]). You can try code below as well.

<ul ng-show="hasEvent" ng-repeat="x in eventShow">
   <li>
       {{'Event Name: ' + x.name}}
   </li>
   <li>
       {{'Type: ' + x.type}}
   </li>
   <li>
       {{'Distance: ' + x.distance + ' miles'}}
  </li>
  <li>
      {{'Rating: ' + x.rating}}
  </li>
  <li>
      {{'Description: ' + x.description}}
  </li>
</ul>

 <hr>

 <div class="actionBox">
  <ul class="commentList" ng-repeat="y in x.comments track by $index">
      <li>
          <div class="commentText">
              <p class="">{{y}} </p>
          </div>
      </li>
   </ul>
</div>

Answer 4

ANSWER: My logic was correct and everything is now working. The problem was how I was setting up my database Schema.