Get objects and values inside an array at the same time

Question

I'm using AngularJS and a JSON file to hold my data. And my data holds an array with objects and some values.

Here's my JSON:

{
    "DirectoryList":
    [
        {
            "_id": 2,
            "navLvl": 1,
            "codeName": "BOD",
            "DirectoryName": "Board of Directors",
            "Contacts": [
                {
                    "BodName": "FVC",
                    "Position": "CEO",
                    "LocalNo": "101",
                    "Mobile": ["09178985698", "09178985698"]
                },
                {
                    "BodName": "MIC",
                    "Position": "PRESIDENT",
                    "LocalNo": "108",
                    "Mobile": ["09178710088", "09178889088"]
                },
                {
                    "BodName": "SIC",
                    "Position": "SVC-OPTRNS",
                    "LocalNo": "105",
                    "Mobile": ["09178923689", "09328922955"]
                }
            ]
        }
    ]
}

And in my controller:

$http.get('./json/directory.json')
  .success(function(data){
    var result = $filter('filter')(data.DirectoryList, {_id:$stateParams.id})[0];

    $scope.listviews = [];
    angular.forEach(result, function(value, key) {
        $scope.listviews.push(value);
    });

  })
  .error(function(err){
    $log.error(err);
  })

And in my views:

<div class="table-responsive" ng-if="listviews[0] == 2">
        <table class="table table-striped table-hover table-condensed table-bordered">
            <tr>
                <thead>
                    <th>BOD Name</th>
                    <th>Position</th>
                    <th>Local No.</th>
                    <th>Mobile</th>
                </thead>
            </tr>
            <tr>
                <tbody ng-repeat="list in listviews[4]">
                    <td ng-repeat="(key, value) in list">{{ value }}</td>
                </tbody>
            </tr>
        </table>
    </div>

This gives me:

BOD Name | Position |Local No. | Mobile
---------+----------+----------+-------------------------------
   FVC   |   CEO    |   101    | ["09178985698","09178985698"]
---------+----------+----------+-------------------------------
   MIC   | PRESIDENT|   108    | ["09178710088","09178889088"]
---------+----------+----------+-------------------------------
   SIC   |SVC-OPTRNS|   105    | ["09178923689","09328922955"]

I have no idea how to display it correctly but when I try to change the value to value[0] I can get the first array but it ruins the data holds by objects. Is there another way getting the data from objects together with values? Can't figure out where should I execute the logic. Is it way better in the controller or in my view?

Must you use ng-repeat for the <td>? For only 4 cells it's not a lot to set each up individually — charlietfl
– charlietfl, Commented Jun 7, 2016 at 0:45

adolfosrs · Accepted Answer · 2016-06-07 00:55:13Z

1

I'm pretty sure there is a lot of different ways on doing this. The following is one that should work.

        <tbody ng-repeat="list in listviews[4]">
            <td ng-repeat="(key, value) in list">
                <div ng-if="key=='Mobile'" ng-repeat="phone in value">{{phone}} </div>
                <div ng-if="key!='Mobile'">{{value}}</div>
            </td>
        </tbody>

answered Jun 7, 2016 at 0:55

adolfosrs

9,3896 gold badges45 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lekz Flores Over a year ago

Wow! That's great, but ng-repeat inside div seems to have a little issue. It didn't show the values of first Mobile object. But removing the ng-repeat and changing the expression to value[0], value[1] works great. Thanks.

Lekz Flores Over a year ago

what about if the first Mobile object holds an array and the other holds single value and not an array?

adolfosrs Over a year ago

You should guarantee that mobile will always return an array. Altough it is a data incosistence.

Collectives™ on Stack Overflow

Get objects and values inside an array at the same time

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related