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

Is it possible to activate the nearby dropdown based on the user's selection?

What could be causing my jQuery to only toggle the first arrow in my HTML?

vertically centering a div specifically on laptops

yet another dilemma with CSS height set to 100%

When attempting to use focusin/focusout, I encountered the following error: Uncaught TypeError - The property 'addEventListener' cannot be read from null

What is the AngularJS equivalent of prevAll() and nextAll() functions in jQuery?

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

What is the best way to store the result from a JavaScript FileReader into a variable for future reference?

What is the solution for resolving an Optional chaining Error in a React project?

Unable to implement str.replace function within HTML code

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

The act of initiating a click on a radio button involves evaluating conditions prior to toggling

splitting lengthy words into several lines

In Django, the Ajax function will fail to execute if any of the required input fields are left empty

Unable to locate Node.js /socket.io/socket.io.js on express 4.0

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

Transfer your documents effortlessly as soon as they are

What might be causing res.download to retrieve a zip file that is empty?

"An unexpected compilation error (800A03EA) has occurred in the JavaScript syntax during

Display various JavaScript function outputs in an HTML table for convenient tracking