How do I render specific data using angular?

Question

I'm quite new to Angular, and I've managed to get here:

 <tr ng-repeat="spec in res">
     <td> {{$index + 1}} </td>
     <td>{{ spec }}</td>             
 </tr>

Currently, my output is:

[["suite1",{"id":"suite1","description":"test cases","fullName":"my cases","failedExpectations":[],"status":"finished","specs":[{"id":"spec0","description":"should be able to add an unit","fullName":"etc cases","failedExpectations":[],"passedExpectations":[],"pendingReason":"","status":"passed"}]},"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]]

How do I display a specific field? (for example the ID. Or the description. or the full name?

Edit: I am using Angular 1.6.3.

EDIT2 :

json result

 <pre>{{ res | json }}</pre>

result here

[
  "[[\"suite1\",{\"id\":\"suite1\",\"description\":\"test cases\",\"fullName\":\"my cases\",\"failedExpectations\":[],\"status\":\"finished\",\"specs\":[{\"id\":\"spec0\",\"description\":\"should be able to create a room\",\"fullName\":\"should be able to add an unit\",\"failedExpectations\":[],\"passedExpectations\":[],\"pendingReason\":\"\",\"status\":\"passed\"}]},\"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)\"]]"
]

i also created a small function that translate the array into an object:

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

    console.log(toObject(events));
    $scope.res = toObject(events);

or

    $scope.res = toObject(events);

made no difference

This, translate the data, into this:

Object {0: "[["suite1",{"id":"suite1","description":"RW - rate…tamp: Fri Apr 21 2017 11:45:06 GMT+0300 (EEST)"]]", 1: "[["suite1",{"id":"suite1","description":"rates","f…tamp: Fri Apr 21 2017 11:45:55 GMT+0300 (EEST)"]]", 2: "[["suite1",{"id":"suite1","description":"rates","f…tamp: Fri Apr 21 2017 11:46:12 GMT+0300 (EEST)"]]"}

Jayant Patil · Accepted Answer · 2017-04-21 10:23:50Z

1

Here is the solution for it Jsfiddle link

updated jsfiddle link

JS code

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

  app.controller('ctrl', function($scope) {
    $scope.res = [
      ["suite1", {
        "id": "suite1",
        "description": "test cases",
        "fullName": "my cases",
        "failedExpectations": [],
        "status": "finished",
        "specs": [{
          "id": "spec0",
          "description": "should be able to add an unit",
          "fullName": "etc cases",
          "failedExpectations": [],
          "passedExpectations": [],
          "pendingReason": "",
          "status": "passed"
        }]
      }, "timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]
    ];
  });

HTML

  <div ng-app='myApp' ng-controller='ctrl'>
    <table border='1'>
      <tr>
        <th>
          ID
        </th>
        <th>Full Name
        </th>
      </tr>
      <tr ng-repeat="spec in res">
        <td> {{$index + 1}} </td>
        <td>{{ spec[1].fullName }}</td>
      </tr>

    </table>
  </div>

hope this will help you

edited Apr 21, 2017 at 10:23

answered Apr 21, 2017 at 6:49

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

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

7 Comments

Jayant Patil Over a year ago

checkout the picture uploaded

sdet.ro Over a year ago

I have an extra " in the $scope.res, see edited json output

sdet.ro Over a year ago

if I try to parse the JSON, i get this: SyntaxError: Unexpected token , in JSON at position 385

Jayant Patil Over a year ago

please post it here, your json

sdet.ro Over a year ago

Yes. Please see here. pasted.co/5093fa38 the json is not edited, parsed at all. I also created a small function that translates the array into an object (see in reedited main post) but I am still not able to render the fields.

|

Ajay Singh · Accepted Answer · 2017-04-21 06:44:25Z

0

 <tr ng-repeat="spec in res">
 <td>{{:: $index + 1}} </td>
 <td>{{:: spec }}</td>  
 <td>{{:: spec.ID }}</td>             
 <td>{{::spec.fullName }}</td>

answered Apr 21, 2017 at 6:44

Ajay Singh

1581 gold badge2 silver badges14 bronze badges

1 Comment

sdet.ro Over a year ago

the index counter and the spec gets rendered (just like exemplified above. the ID and the fullName does not.

Sachila Ranawaka · Accepted Answer · 2017-04-21 07:13:50Z

0

since this is a multi-dimensional array you need to use nested ng-repeats

 <table>

  <tr ng-repeat="spec in res track by $index">
     <td>
     <table> 
      <tr ng-repeat="spe in spec track by $index">
         <td>{{ spe.id }}</td>    
         <td>{{ spe.fullName }}</td>             
     </tr>
     </table>
     </td>           
 </tr>
 </table>

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.res = [["suite1",{"id":"suite1","description":"test cases","fullName":"my cases","failedExpectations":[],"status":"finished","specs":[{"id":"spec0","description":"should be able to add an unit","fullName":"etc cases","failedExpectations":[],"passedExpectations":[],"pendingReason":"","status":"passed"}]},"timestamp: Thu Apr 20 2017 09:47:38 GMT+0300 (EEST)"]]


})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <table>
 
  <tr ng-repeat="spec in res">
     <td>
     <table> 
      <tr ng-repeat="spe in spec">
         <td>{{ spe.id }}</td>    
         <td>{{ spe.fullName }}</td>             
     </tr>
     </table>
     </td>           
 </tr>
 </table>
</div>

edited Apr 21, 2017 at 7:13

answered Apr 21, 2017 at 6:43

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

sdet.ro Over a year ago

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: spe in spec, Duplicate key: string:[, Duplicate value: [

sdet.ro Over a year ago

added res | json output

Collectives™ on Stack Overflow

How do I render specific data using angular?

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related