Showing array on view in Angular JS

Question

I have to show a JSON array values on a table I made with Angular JS. When I load the page calls the web service and get a JSON array. Until here everything is ok, but, when I want to show the values on the view I'm getting nothing. I did it like I did it previously and don't know why it's not working.

There is the controller:

assets.controller('DetallTipusCtrl', function ($scope, $http, $routeParams){
                $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/'+$routeParams.param).success(function(data) {
                    $scope.atrb = data;
                });
                $scope.param = $routeParams.param;    
            });

And the view:

<table class="table" ng-controller="DetallTipusCtrl">
                    <tr>
                        <th>#</th>
                        <th><a href="">Atribut</a></th>
                        <th><a href="">Mida</a></th>
                        <th><a href="">Tipus</a></th>
                    </tr>
                    <tr ng-repeat="atribut in atrb | orderBy:sortField:reverse">
                        <td></td>
                        <td>{{atribut.nomAtribut}}</td>
                        <td>{{atribut.midaAtribut}}</td>
                        <td>{{atribut.valor}}</td>
                    </tr>
                </table>

The JSON array is well constructed but I can't see nothing and I don't know why, if anyone can help.. Thanks!

Edit: The JSON:

{"nomAtribut":"fgdsgsfd","midaAtribut":"16","valor":"String","tipus_actius_idtipus_actius":"26","nom":"yiuhdfiau837629875wf"}

Solved:

The JSON array was a JSON object, thats how I iterate over and show properties:

<tr ng-repeat="(key, value) in atrb">
    <td>{{value.propertie}}</td>
</tr>

can we see the json?

Anonymous Duck
– Anonymous Duck

2016-03-09 09:41:30 +00:00
Commented Mar 9, 2016 at 9:41 — Anonymous Duck
– Anonymous Duck, Commented Mar 9, 2016 at 9:41
@EuphoriaGrogi I just added

jcobo1
– jcobo1

2016-03-09 09:44:22 +00:00
Commented Mar 9, 2016 at 9:44 — jcobo1
– jcobo1, Commented Mar 9, 2016 at 9:44
there is no sortfield property in your json

Anonymous Duck
– Anonymous Duck

2016-03-09 09:44:53 +00:00
Commented Mar 9, 2016 at 9:44 — Anonymous Duck
– Anonymous Duck, Commented Mar 9, 2016 at 9:44
@EuphoriaGrogi I removed the sortfield and still don't work

jcobo1
– jcobo1

2016-03-09 09:46:30 +00:00
Commented Mar 9, 2016 at 9:46 — jcobo1
– jcobo1, Commented Mar 9, 2016 at 9:46
do your response is successful?

Hadi
– Hadi

2016-03-09 09:46:41 +00:00
Commented Mar 9, 2016 at 9:46 — Hadi
– Hadi, Commented Mar 9, 2016 at 9:46

Bata · Accepted Answer · 2016-03-09 09:52:10Z

3

Your response is not an array, its an object. You can iterate over object properties like this:

<tr ng-repeat="(key, value) in atrb">
    <td>{{value}}</td>
</tr>

If you need to show properties conditionally you can check the key.

answered Mar 9, 2016 at 9:52

Bata

6513 silver badges7 bronze badges

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

2 Comments

jcobo1 Over a year ago

With your solution I see the JSON array into the table cell

jcobo1 Over a year ago

Yes it's working fine now I missed the properties on the view. Thank you!

Ogie · Accepted Answer · 2016-03-09 09:51:47Z

0

You should do this in your success function

    $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/'+$routeParams.param).success(function(data) {

   $scope.$evalAsync(function(){$scope.atrb = data;});

});

answered Mar 9, 2016 at 9:51

Ogie

1,3322 gold badges14 silver badges18 bronze badges

Comments

Hassan Tariq · Accepted Answer · 2016-03-09 09:58:40Z

0

your response is not an array

        <td>{{atrb.nomAtribut}}</td>
         <td>{{atrb.midaAtribut}}</td>
         <td>{{atrb.valor}}</td>

to display use above code

answered Mar 9, 2016 at 9:58

Hassan Tariq

7407 silver badges15 bronze badges

Comments

Vivek · Accepted Answer · 2016-03-09 12:03:55Z

0

make $http call like :

$http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/'+$routeParams.param)
.then(function(response) {$scope.atrb = response.data;});

edited Mar 9, 2016 at 12:03

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

answered Mar 9, 2016 at 9:54

Shah

5051 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

Showing array on view in Angular JS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related