Question

我想迭代我从数据库中提取的多个JSON对象以显示包含数据。我在获取注释时遇到问题，注释包含一个字符串数组，但是，当我将对象传递出来时，它们正在重新定义对象。

以下是我的JSON对象：

{
  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
    }
  ]
}

我的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>

如何以可读的方式显示所有评论，JSON.stringify（）是否是正确的方法？

从我的后端调用从我的mongoDB数据库中检索JSON对象的$ http.get（）并将JSON对象传递回我的服务，这些服务是从我的控制器调用的，然后是......一个JSON对象正被传递到$ scope.eventShow。

我设法用嵌套的ng-repeat显示所有注释，但是仍然需要将它们作为字符串。 As shown here

Answer 1

试试这个（基于你的json单个对象）：

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

如果希望在您的示例中使用嵌套循环和json对象是某个数组中的一个对象（eventShow），那么您需要对“x.comments”进行二级ng-repeat

<强>更新对于dom children之外的嵌套，你需要使用ng-repeat-start和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

您将x.comments放在ng-repeat之外。此外，您在外部数组中的对象之间缺少逗号。

Answer 3

要从ng-repeat内部访问数组，如果需要自动增量变量，可以使用$ index + 1作为数组。（在代码中为y [$ index + 1]）。你也可以尝试下面的代码。

<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

答案：我的逻辑是正确的，现在一切正常。问题是我是如何设置我的数据库模式的。

Angular，使用ng-repeat解析JSON对象中的数组

4 个答案: