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

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

Unexpected behavior encountered while serializing a Dictionary using JsonConvert

Sharing data between controllers using factory in AngularJS is not supported

Open a JavaScript file to retrieve data from a nearby JSON object

Copying arrays in C/C++ that are members of structs by value

Having trouble getting rid of the border-bottom?

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Using Javascript Regular Expressions to validate that the first number in an amount is non-zero

Utilizing the spread syntax for elimination

What causes the .getJSON function to return a MIME type error when trying to access the API

Using AngularJS to interact with neighboring DOM elements

The system encountered an error while attempting to access the property "getChild" of an unspecified object

Error in defining class variable within the constructor not found

Using Regular Expressions to Strip Quotation Marks from Numerical Values within a String in ColdFusion Version 9

Encountering a problem with Node.js because of a SyntaxError: Receiving an

How can we address the tagging directive problem of binding tags as an array of JSON objects and ensuring that tagging functions properly with the ng-keypress event?

creating an interactive table with the help of the useState hook

Tips for dynamically updating an input within a shadow DOM using code?

How can I delay the loading of a link until the pop-up is closed?