A guide on utilizing ng-repeat to iterate through array values in Views

Question

A guide on utilizing ng-repeat to iterate through array values in Views

Need help with using ng-repeat on array values within an ng-repeat in VIEWS?

The second ng-repeat is not functioning properly.

Here is the value of generalDocument.documents:

["14-10-2015.xls","15-10-2015.xls","16-10-2015.xls"]

 <div class="box-body table-responsive no-padding">
        <table class="table table-hover table-striped">
          <tr>
            <th>#</th>
            <th>Company</th>
            <th>Branch</th>
            <th>Document Type</th>
            <th>Description</th>
            <th>Reference Number</th>
            <th>Issue Date</th>
            <th>Expiry Date</th>
            <th>Documents</th>
          </tr>
          <tr ng-repeat="generalDocument in generalDocuments | orderBy: 'generalDocument.id' | filter: search">
            <td>{{ $index + 1 }}</td>
            <td>{{ generalDocument.company.company_name }}</td>
            <td>{{ generalDocument.branch.branch_name }}</td>
            <td>{{ generalDocument.document_type.document_type }}</td>
            <td>{{ generalDocument.description }}</td>
            <td>{{ generalDocument.reference_number }}</td>
            <td>{{ generalDocument.issue_date }}</td>
            <td>{{ generalDocument.expiry_date }}</td>
            <td>
                <div class="btn-group">
                  <button type="button" class="btn btn-default  btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Download <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li ng-repeat="document in generalDocument.documents track by $index">
                      <a href="">{{ document }}</a>
                    </li>
                  </ul>
                </div>
            </td>
          </tr>
        </table>
      </div>

UPDATE: After adding track by $index, the loop is working, but it is looping per character.

UPDATE: Upon console.log, generalDocument and generalDocument.document are fetched from the database as:

document: "["EK 845 FDX 20150906 00001 CARGO1.xls","EK 845 FDX 20150906 00004 MOH.xls","EK 847 FDX 20150811 000010 COMMPERSONAL3.xls"]"

javascript arrays json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Make sure to verify that the "documents" property contains an array instead of a string in your UPDATE statement.

If it appears as a string from the server, be sure to use "JSON.parse" on it before processing. It would be beneficial to update your server response to send the data as an array for consistency.

I hope this information proves useful!

Answer 2

Make sure to verify that the "documents" property contains an array instead of a string in your UPDATE statement.

If it appears as a string from the server, be sure to use "JSON.parse" on it before processing. It would be beneficial to update your server response to send the data as an array for consistency.

I hope this information proves useful!

Answer 3

Answer №2

Here is an example that requires the inclusion of angular.min.js:

<html>
    <head>
        <title>Angular JS Directives</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="contrl">
            <p><input type="text" ng-model="city" /></p>
            <p>My City Name is: {{city}}</p>
            <p><input type="number" ng-model="qnty" /></p>
            <p><input type="number" ng-model="cost" /></p>
            <p>Total amount is : {{(qnty * cost)|currency}}</p>
            <p><input type="text" ng-model="test" /></p>
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy:'country'">
                    {{(x.name | uppercase) + ',' + x.country}}
                </li>
            </ul>
        </div>
        <script>
            angular.module('myApp', []).controller('contrl', function ($scope) {
                $scope.qnty = 1;
                $scope.cost = 5;
                $scope.names = [
                    {name: 'Jani', country: 'Norway'},
                    {name: 'Hege', country: 'Sweden'},
                    {name: 'Kai', country: 'Denmark'}];
            });
        </script>
    </body>
</html>

Answer 4

Here is an example that requires the inclusion of angular.min.js:

<html>
    <head>
        <title>Angular JS Directives</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="contrl">
            <p><input type="text" ng-model="city" /></p>
            <p>My City Name is: {{city}}</p>
            <p><input type="number" ng-model="qnty" /></p>
            <p><input type="number" ng-model="cost" /></p>
            <p>Total amount is : {{(qnty * cost)|currency}}</p>
            <p><input type="text" ng-model="test" /></p>
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy:'country'">
                    {{(x.name | uppercase) + ',' + x.country}}
                </li>
            </ul>
        </div>
        <script>
            angular.module('myApp', []).controller('contrl', function ($scope) {
                $scope.qnty = 1;
                $scope.cost = 5;
                $scope.names = [
                    {name: 'Jani', country: 'Norway'},
                    {name: 'Hege', country: 'Sweden'},
                    {name: 'Kai', country: 'Denmark'}];
            });
        </script>
    </body>
</html>

Answer 5

Answer №3

Appreciate everyone's assistance.

The variable generalDocument.document was previously retrieved as a STRING from the database.

I have made changes to my server model so that it now returns a JSON array instead of a string value. This adjustment has allowed the ng-repeat function to operate correctly.

Answer 6

Appreciate everyone's assistance.

The variable generalDocument.document was previously retrieved as a STRING from the database.

I have made changes to my server model so that it now returns a JSON array instead of a string value. This adjustment has allowed the ng-repeat function to operate correctly.

A guide on utilizing ng-repeat to iterate through array values in Views

Answer №1

Answer №2

Answer №3

Similar questions

Show the total of a JavaScript calculation in a designated input box

The event "click .className" within the Marionette module is failing to trigger

Getting a string representation of an object from JSON in Swift

Submitting data with ajax in MVC when an option is chosen in a dropdown menu

Searching the JSON file by its value using Waterline

Is it possible to use AngularJS promise scheduling with `async`/`await` syntax?

Is there a way to temporarily halt a jQuery animation for 2 seconds before automatically resuming it, without relying on mouse-over or mouse-out triggers?

Removing data with sweetalert in a Ruby on Rails application

Is there a feature similar to Google/YouTube Insight called "Interactive PNGs"?

Looping through a multidimensional array in $_POST variables

The result from the AngularJs promise is coming back as undefined

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?

AngularJs: uncomplicated rating system

Modify the background color of checkboxes without including any text labels

merging 4 arrays in a specified order, organized by ID

Assigning an identification number to specify the type of Chip

What is the significance of the "#" character in the URL of a jQuery mobile

Is there a way to identify and retrieve both the initial and final elements in React?

Retrieve specialized information from a json file

javascript date.js parsing and sorting an array of objects