how to pass object data to table using ng-repeat

Question

I have this object named 'SEG-Data as follows. I am trying to put this data into a table form using ng-repeat.

SEG_Data 
  Object {ImportValues: Array[2]}
     ImportValues: Array[2]
        0: Object
              ImportArray: "0045614"
              Name: "dean"
              Type: "xyz"
        1: Object
              ImportArray: "2567741"
              Name: "dean"
              Type: "abc"
        length: 2

The table used is as below and i am using ng-repeat where i mentiond 'field in SEG_data.ImportValues' to get the values.... But somehow i am not getting the data at the UI.

<table style="width:100%" border:"1px">
                <tr>
                    <th>ImportArray</th>
                    <th>Name</th>
                    <th>Type</th>
                </tr>
                <tr ng-repeat="field in SEG_Data.ImportValues">
                    <td>{{field.ImportArray}}</td>
                    <td>{{field.Name}}</td>
                    <td>{{field.Type}}</td>
                </tr>

            </table>

Any advice if i am doing it wrong for displaying ??

From your example, I expect the table to have 2 rows of data. Are you saying that the number of rows of data in table does not match your json? Also is your SEG_data a $scope variable? — Ji_in_coding
– Ji_in_coding, Commented Nov 15, 2016 at 19:02
It's "SEG_Data" and you used "SEG_data" in ng-repeat. JavaScript variables are case sensitive :) Just correct the spelling, it should work. — Supradeep
– Supradeep, Commented Nov 15, 2016 at 19:03

shanzilla · Accepted Answer · 2016-11-15 19:18:20Z

1

Your object is called SEG_Data but you're referencing SEG_data with a lowercase 'd' in your template. Data displays properly with that one change.

Object

 $scope.SEG_Data = {
    ImportValues: [{
      ImportArray: "0045614",
      Name: "dean",
      Type: "xyz"
    }, {
      ImportArray: "2567741",
      Name: "dean",
      Type: "abc"
    }]
 };

Template

<table style="width:100%; border:1px">
    <tr>
        <th>ImportArray</th>
        <th>Name</th>
        <th>Type</th>
    </tr>
    <tr ng-repeat="field in SEG_Data.ImportValues">
        <td>{{field.ImportArray}}</td>
        <td>{{field.Name}}</td>
        <td>{{field.Type}}</td>
    </tr>
</table>

See plunker example

edited Nov 15, 2016 at 19:18

answered Nov 15, 2016 at 19:04

shanzilla

4775 silver badges16 bronze badges

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

2 Comments

Adu Rao Over a year ago

tat was a typo while i posted here. corrected that typo in the question

shanzilla Over a year ago

I added a plunker example; the code works fine if you capitalize the D. If not the problem could be with your object--where is it defined and when is it loaded?

Rohìt Jíndal · Accepted Answer · 2016-11-16 10:35:15Z

Working Example :

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

function MyCtrl($scope) {
     $scope.SEG_Data = {
    ImportValues: [{
      ImportArray: "0045614",
      Name: "dean",
      Type: "xyz"
    }, {
      ImportArray: "2567741",
      Name: "dean",
      Type: "abc"
    }]
 };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <table>
        <tr>
            <th>ImportArray</th>
            <th>Name</th>
            <th>Type</th>
        </tr>
        <tr ng-repeat="field in SEG_Data.ImportValues">
            <td>{{field.ImportArray}}</td>
            <td>{{field.Name}}</td>
            <td>{{field.Type}}</td>
        </tr>
    </table>
</div>

Collectives™ on Stack Overflow

how to pass object data to table using ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related