AngularJS/Json without ng-repeat, how to show the data?

Question

For some reason, I have to use ng-repeat in order to display data. I'd like to display data without using ng-repeat.

angular:

App.controller('aboutLongCtrl', function ($scope, $http) {
    $http.get('test_data/ar_org.json')
    .then(function (res) {
        $scope.aboutlongs = res.data.aboutlong;
    });
});

Here's my markup:

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
    <h6 ng-repeat="aboutlong in aboutlongs"><b>About {{aboutlong.name}}</b></h6>
    <div class="reason-content" ng-repeat="aboutlong in aboutlongs">
       {{aboutlong.description}}
    </div>
</div>

If I use this, it won't work.. can anyone explain why?

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
    <h6><b>About {{aboutlong.name}}</b></h6>
    <div class="reason-content">
       {{aboutlong.description}}
    </div>
</div>

I followed this approach but it won't work: How to Display single object data with out Using ng-repeat?

I'm guessing it's because of my angular code, something isn't right.

Without ng-repeat u can do but create your own directive like ng-repeat. — Manikandan Velayutham
– Manikandan Velayutham, Commented Apr 10, 2017 at 6:46

Sajeetharan · Accepted Answer · 2017-04-10 06:09:35Z

2

Probably variable aboutlongs is an array of Objects.

In first case ng-repeat directive repeats a set of HTML, a given number of times.

If you still want to access the Object you can access the array Index and display it.

<div class="background-white p20 reasons" ng-controller="aboutLongCtrl" >
        <h6><b>About {{aboutlongs[0].name}}</b></h6>
           <div class="reason-content">
           {{aboutlongs[0].description}}
          </div>
 </div>

edited Apr 10, 2017 at 6:09

answered Apr 10, 2017 at 6:01

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Sajeetharan Over a year ago

check above sample

sojim Over a year ago

I tried that but it won't work.. {{aboutlong[0].name}}

jose Over a year ago

hi @Sajeetharan could you help stackoverflow.com/questions/43315615/…

Atul Sharma · Accepted Answer · 2017-04-10 06:03:23Z

1

ng-repeat is used to print an array

<div class="reason-content" ng-repeat="aboutlong in aboutlongs">
   {{aboutlong.description}}
 </div>

Here abvoutlongs is array and you are extracting single element in every repeat aboutlong..

<div class="reason-content"> {{aboutlongs[0].description}} {{aboutlongs[1].description}} </div>

this will also work .. as we are accessing element of array aboutlongs one by one

answered Apr 10, 2017 at 6:03

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

Comments

Jayaraj PS · Accepted Answer · 2017-04-10 06:04:15Z

1

probably, the res.data.aboutlong is assigning an array to $scope.aboutlongs. And an array can only be displayed using ng-repeat. Alternatively, you may also use

<h6><b>About {{aboutlong[0].name}}</b></h6>

to avoid ng-repeat. However, I strongly suggest you to stick with ng-repeat.

answered Apr 10, 2017 at 6:04

Jayaraj PS

1951 gold badge4 silver badges18 bronze badges

3 Comments

sojim Over a year ago

Can you explain why I should stuck with ng-repeat when I don't need it?

Jayaraj PS Over a year ago

Since that is an array that you are assigning to the variable and the very purpose of array is to display a list of similar repetitive objects. So, I suggested you to stick with the ng-repeat. It will help you handle when there is only one or a hundred objects coming in the array. Suppose, as of now, you are receiving two objects in the array and imagine that if you are using it as : {{aboutlong[0].name}} and {{aboutlong[1].name}} and going further you started to receive third object in the array, then you will have to come back and make changes in the code.

sojim Over a year ago

Thanks for the explanation, but in this control I won't need any repetition ever. I guess I shouldn't use the array to begin with. Thanks!

Collectives™ on Stack Overflow

AngularJS/Json without ng-repeat, how to show the data?

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related