up vote 0 down vote favorite

I have an array in my app.js file, contents of which I would like to print sequentially in <td> rows in my HTML table. Below is my app.js file:

(function () {
 var app = angular.module('TravelI', []);

var route = [{
    source : [
        "San Jose",
        "San Francisco",
    ],

    destination : [
        "Wellington",
        "Mumbai"
    ],


}];
app.controller('RouteController', function ($scope) {
    $scope.product = route;

    $scope.addRoute = function(s, d) {

    };

});

})();

HTML code:

<div id="DisplayTable" ng-repeat="x in product">
        <table style="width: 80%" align="center">
            <tr>
                <th>
                    From
                </th>
                <th>
                    To
                </th>
            </tr>
            <tr>
                <td>{{x.source[$index]}}</td>
                <td>{{x.destination[$index]}}</td>
            </tr>
        </table>
    </div>

Now I can only see the data correctly for the first element in the arrays. I want the display to be like this:

From                         To:
San Jose                     Wellington
San Francisco                Mumbai

Any city that I append to the two arrays should be displayed sequentially in the table rows.

Currently I can only see the first element in both the arrays: enter image description here

share|improve this question
    
It is printing only one row because your product.length is 1. you have to loop through product.source. – Sundar Singh Sep 28 '16 at 4:46
up vote 0 down vote

Either you have to reformat the $scope.product to be a key value pair, otherwise you can do this,assuming its always going to be two values,

  <table style="width: 80%" align="center">
            <tr>
                <th>
                    From
                </th>
                <th>
                    To
                </th>
            </tr>
            <tr>
                <td>{{x.source[$index]}}</td>
                <td>{{x.destination[$index]}}</td>

            </tr>
            <tr>
                <td>{{x.source[$index+1]}}</td>
                <td>{{x.destination[$index+1]}}</td>

            </tr>
        </table>

EDIT:

 <div id="DisplayTable" ng-repeat="x in product">
    <table style="width: 80%" align="center">
      <tr>
        <th>
          From
        </th>
        <th>
          To
        </th>
      </tr>
      <tr>
        <td ng-repeat="y in x.source">{{y}}</td>
      </tr>
      <tr>
        <td ng-repeat="y in x.destination">{{y}}</td>
      </tr>
    </table>
  </div>

DEMO

share|improve this answer
    
Would it be possible to increment the value in the HTML page with a variable so that every time a new element is added to the array, it would also be reflected in the table. – Anuvrat Tiku Sep 28 '16 at 3:05
    
check updated demo – Sajeetharan Sep 28 '16 at 3:19
    
Did you check updated plunker? – Sajeetharan Sep 28 '16 at 3:40
up vote 0 down vote

If route.source.length === route.destination.length in your route, you can try this.

    (function () {
        var app = angular.module('TravelI', []);

        var route = [{
            source : [
                "San Jose",
                "San Francisco",
                "src A",
                "src B"
            ],

            destination : [
                "Wellington",
                "Mumbai",
                "des A",
                "des B"
            ]
        }];
        app.controller('RouteController', function ($scope) {
            $scope.product = route;

            $scope.addRoute = function(s, d) {

            };

        });

    })();
<!DOCTYPE html>
<html lang="en" ng-app="TravelI">
<head>
    <meta charset="UTF-8">
    <title>Angular Snippet</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
<div id="DisplayTable" ng-controller="RouteController">
    <table style="width: 80%" align="center" ng-repeat="x in product">
        <tr>
            <th>
                From
            </th>
            <th>
                To
            </th>
        </tr>
        <!-- I saw $scope.addRoute() has two arguments -->
        <!-- so, I assumed that source.length === destination.length -->
        <tr ng-repeat="src in x.source track by $index">
            <td>{{x.source[$index]}}</td>
            <td>{{x.destination[$index]}}</td>
        </tr>

    </table>
</div>
</body>
</html>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.