best practices for transferring object data to a table with ng-repeat

Question

best practices for transferring object data to a table with ng-repeat

I have an object called 'SEG-Data with the following structure. I am attempting to display this data in a table 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 setup is shown below, using ng-repeat with 'field in SEG_data.ImportValues' to access the values.... However, I'm not seeing the data displayed on the UI for some reason.

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

Do you have any insights as to why my display isn't working correctly?

javascript html angularjs angularjs-ng-repeat

Answer 1

Answer №1

The object in question is named SEG_Data, however, you are mentioning SEG_data with a lowercase 'd' in your template. Making this small correction will result in the data displaying properly.

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>

Check out the Plunker example

Answer 2

The object in question is named SEG_Data, however, you are mentioning SEG_data with a lowercase 'd' in your template. Making this small correction will result in the data displaying properly.

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>

Check out the Plunker example

Answer 3

Answer №2

Here is a demonstration of the code in action:

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>

Answer 4

Here is a demonstration of the code in action:

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>

best practices for transferring object data to a table with ng-repeat

Answer №1

Answer №2

Similar questions

Assigning initial values in AngularJS for display prior to evaluation

Dropdown with multiple selections organized in a hierarchical structure

Assigning a value to a variable from a method in Vue: a step-by-step guide

Seeking animated SVGs using CSS styling

Switching the URL without reloading the page in NEXT.JS

Utilizing Vue.js to add functionality for navigation buttons allowing users to move between survey questions

Use the ng-pattern regex to specifically identify instances where a pattern occurs only once

Uncovering complete hyperlink text using Scrapy

Tips for preventing errors in formatting?

Is the xmlhttprequest timeout/abort feature not functioning as anticipated?

The Express GET route does not support parameters or additional paths

Calculating the total price of items in a shopping cart by multiplying them with the quantity in Vue.js

Handling AJAX requests using jQuery

removing the mapStateToProps function will result in an undefined value

The forEach method in JavaScript seems to work asynchronously

What's the secret behind generating a crisp 400 on paper?

Client-side resizing an image before sending it to PHP for uploading

What is the best way to vertically center elements within a navigation bar?

Ways to replace CSS classes created using makeStyles

An issue arose while trying to create the perfect seed with yeoman