在HTML页面中使用angularjs显示JSON数据

Question

I have to display name and ownername in html page, data is in JSON format (from MongoDB database)

While displaying in html, I am getting name correctly but ownername is not displaying properly instead it's displaying the complete object inside owner.

Json:

/* 1 */
{
    "_id" : ObjectId("550994e21cba9597624195aa"),
    "name" : "Deploy Renderer Code",
    "detail" : "Deploy Renderer code in PROD 1 boxes.",
    "scheduledStartDate" : ISODate("2015-05-12T09:00:00.000Z"),
    "scheduledEndDate" : ISODate("2015-05-12T11:00:00.000Z"),
    "env" : "PROD 1",
    "type" : "Pre Release Activity",
    "team" : {
        "id" : "55097d581cba95976241958d",
        "name" : "Renderer"
    },
    "owners" : [ 
        {
            "ownerName" : {
                "id" : "VENKAT17",
                "name" : "Sundar Venkataraman"
            },
            "ownerTeam" : {
                "id" : "550992951cba9597624195a8",
                "name" : "RETS"
            }
        }
    ],
    "comments" : "Add SPI number, if any.",
    "release" : {
        "id" : "5509904f1cba9597624195a5",
        "name" : "LexisAdvance R5.1"
    },
    "status" : "Assigned"
}

Angular view (html code)

<div class="row">
  <table class="table table-bordered">
    <thead>
        <tr>
            <th style="text-align: center;">Task name</th>
            <th style="text-align: center;">Owner name</th>
            <th style="text-align: center;">Authorize</th>
        </tr>
    </thead>
        <tbody>
            <tr ng-repeat="task in taskDetails">
                <td style="text-align: center;">{{task.name}}</td>
                <td style="text-align: center;">{{task.owners}}</td>
                <td  style="text-align:center;">
                    <button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)">Approve</button>
                    <button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)">Reject</button>
                </td>
            ![enter image description here][1]</tr>

        </tbody>
  </table>

Answer 1

task.owners is a list of objects. To get the first owner, you would use:

<td style="text-align: center;">{{task.owners[0].ownerName.name}}</td>

Looping through all owners will be better:

<td style="text-align: center;">
  <span ng-repeat="owner in task.owners">{{owner.ownerName.name}}{{$last ? '' : ', '}}</span>
</td>