How to alternatively repeat json data in Angular JS?

Question

I want to alternatively repeat the json data. I've data like below:

JSON:

  {
       "birds":{
          "birdInfo":[
             {
                "name":"parrot",
                "color":"green"
             },
             {
                "name":"peacock",
                "color":"green"
             }
          ]
       },
       "animals":{
          "animalInfo":[
             {
                "name":"lion",
                "designation":"king"
             },
             {
                "name":"lioness",
                "designation":"queen"
             }
          ]
       }
    }

In my controller:

    $scope.birdInfo = response.birds.birdInfo;
    $scope.animalInfo = response.animals.animalInfo;

In my View:

 <div ng-repeat="bird in birdInfo">
   {{bird.name}}
 </div>

 <div ng-repeat="animal in animalInfo">
   {{animal.name}}
 </div>

What I want:

I want data to be display like:

Scenario 1 : one alternative repeat item

  parrot
  LION
  peacock
  LIONESS

Scenario 1 : two alternative repeat items

  parrot
  peacock
  LION
  LIONESS
  crow
  dove
  TIGER
  ELEPHANT

How to do that in angular?

Here is the plnkr: http://plnkr.co/edit/hN7odUF3MLJe4Ad9IBNM?p=preview

toskv · Accepted Answer · 2015-10-09 19:34:54Z

1

You could make a function to merge your 2 arrays into a 3rd array with the order you need, and then just iterate over that in html.

It would look something like this, if an array is longer you can append the items at the end:

 function merge(first, second) {
   var merged = [];
   var shortest = Math.min(first.length, second.length);
   for (var i = 0; i < shortest; i++) {
     merged.push(first[i]);
     merged.push(second[i]);
   }

   if (first.length != second.length) {
     var left = first.length > second.length ? first.slice(second.length) : second.slice(first.length);
     console.log(left);
     merged = merged.concat(left);
   }
   return merged;
 }

Check this plunker to see it working.

edited Oct 9, 2015 at 19:34

answered Oct 9, 2015 at 18:12

toskv

31.8k7 gold badges77 silver badges77 bronze badges

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

12 Comments

rajagopalx Over a year ago

Thanks a lot. I will do.

Bruno João Over a year ago

Javascript already give you a function to concatenate arrays as I pointed in my answer. You do not need to create another one...

toskv Over a year ago

@vinagreti concat does solve the 2nd problem he asked, not the 1st one though. :)

toskv Over a year ago

@RajagopalSubramanian indeed, I forgot to update the actual merge to take into account that the array lengths are different. The array should happen on the min length of the 2 arrays, I updated the answer. Thanks for pointing it out.

toskv Over a year ago

@RajagopalSubramanian since I saw a lot of people trying to post a more angulary solution to this. you can make the merge function to be a filter and use it like this: plnkr.co/edit/kkxrkRzWNqBe3q89huXy?p=preview

|

Bruno João · Accepted Answer · 2015-10-09 18:23:24Z

1

You can concat the two arrays inside ng-repeat as below

ng-repeat="birdOrAnimal in concatenatedData = (birdInfo.concat(animalInfo))"

I've just updated your plunker with this.

http://plnkr.co/edit/uOj2XrgYKzLXpurzp8Mv

edited Oct 9, 2015 at 18:23

answered Oct 9, 2015 at 18:18

Bruno João

5,6042 gold badges23 silver badges26 bronze badges

2 Comments

rajagopalx Over a year ago

can you post the link ?

VinceOPS Over a year ago

Up vote because it's even more simpler using a directive.

austinthedeveloper · Accepted Answer · 2015-10-09 18:29:31Z

1

Here is another approach:

http://plnkr.co/edit/bV0Bd6LINmzcjQodC9Cj?p=preview

In this approach, I'm creating a repeater that just uses the $index value to count through the objects:

<div ng-repeat="i in getNumber(number) track by $index">
    <p>{{birdInfo[$index].name}} - {{birdInfo[$index].color}}</p>
    <p>{{animalInfo[$index].name}} - {{animalInfo[$index].designation}}</p>
</div>

The length is counted by the bird length.

$scope.number = $scope.birdInfo.length;
      $scope.getNumber = function() {
      return new Array($scope.number);
}

answered Oct 9, 2015 at 18:29

austinthedeveloper

2,63923 silver badges28 bronze badges

Comments

Sandeep · Accepted Answer · 2015-10-09 18:41:38Z

1

Try this:

`<div ng-repeat="bird in birdInfo" ng-if="birdInfo.length>=animalInfo.length">
   <div>{{bird.name}} - {{bird.color}}</div>
   <div>{{animalInfo[$index].name}} - {{animalInfo[$index].designation}}</div>
 </div>
 <div ng-repeat="ani in animalInfo" ng-if="birdInfo.length<animalInfo.length">
   <div>{{birdInfo[$index].name}} - {{birdInfo[$index].color}}</div>
   <div>{{ani.name}} - {{ani.designation}}</div>
 </div>`

see this plunker

answered Oct 9, 2015 at 18:41

Sandeep

1,4791 gold badge13 silver badges27 bronze badges

Comments

VinceOPS · Accepted Answer · 2015-10-09 18:07:15Z

0

It's more about algorithms than AngularJS.

You can Array concat() your arrays birdInfo and animalInfo to loop through all your Objects literal having a "name" property. Then displaying "one alternative" or "two alternative" (sic) is just about playing with array Indexes.

answered Oct 9, 2015 at 18:07

VinceOPS

2,73220 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to alternatively repeat json data in Angular JS?

5 Answers 5

12 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

12 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related