AngularJS: How to shuffle/merge content from different ng-repeat

Question

I have x ng-repeats inside an another ng-repeat list, like so:

<div ng-repeat="object in objects">

  <div ng-repeat="item in object">
    <a href="{{url}}"><p>{{title}}</p></a>
  </div>
  <div ng-repeat="item in object">
    <a href="{{url}}"><p>{{title}}</p></a>
  </div>
  <div ng-repeat="item in object">
   <a href="{{url}}"><p>{{title}}</p></a>
  </div>

</div>

The data comes from a JSON object that contains other objects, which contains the content I'm rendering in the ng-repeat, like so:

    var data = [
   {Object
      { subObject {entries: 
                    {title:'he', desc:'for male'}
                   }
      } ,
      { subObject {entries: 
                    {title:'she', desc: 'for female'},
                           }
      } ,
       { subObject {entries:
                    {title: 'I', desc: 'for me'}
                               }
      }
   }

I'm trying to render the content of all <div ng-repeat="item in object"> shuffled and without altering the JSON Object. I tried some shuffling functions like following (i found it in SO):

// -> Fisher–Yates shuffle algorithm
var shuffleArray = function(array) {
  var m = array.length, t, i;
console.log('executing');
  // While there remain elements to shuffle
  while (m) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

And calling it like this shuffle(objects); on the controller, but obviously I only get the blocks objects inside the main Object randomized, not the content itself. The problem is that I don't know how to 'decompose' the object or merge the inside objects into one, to shuffle it.

I also tried to shuffle the ng-repeat data once it is created in the DOM, but I couldn't find a way to merge ng-repeat data. I'm just learning AngularJS so I don't know if this is the better way to accomplish what I need. How should this be done? Thanks ;D

can you shuffle it before the angular stage? before the JSON object is created? — ewizard
– ewizard, Commented Feb 26, 2016 at 15:53
Well, not at all because that would make me change the whole project's approach. It's better maintain the JSON object as it is - i'm going to update the question with this detail. — ohmmho
– ohmmho, Commented Feb 26, 2016 at 16:08
is there any relevant angular code? can you shuffle it in the angular javascript and then display it? — ewizard
– ewizard, Commented Feb 26, 2016 at 16:14
you could use a filter to shuffle your data. This could be helpful: stackoverflow.com/questions/16563018/… — dobleUber
– dobleUber, Commented Feb 26, 2016 at 16:47
or you could use the orderby filter: just asign a random number to your objects and sort them: docs.angularjs.org/api/ng/filter/orderBy — dobleUber
– dobleUber, Commented Feb 26, 2016 at 16:51

dobleUber · Accepted Answer · 2016-03-02 17:12:33Z

0

If I understood your question, you need this:

  angular.module("app", []).controller("BarCtrl", function ($scope) {

  var fullData = {
    "responseData": 
        { "object": 
                {
                    "url":"http://agenciabai.es/category/university/feed/", 
                    "title":"BAIANAI", 
                    "link":"http://agenciabai.es", 
                    "entries":
                        [ 
                            {
                              "title":"¡Hora de Aventuras!", 
                              "link": "http://agenciabai.es/hora-de-aventuras/", 
                              "publishedDate":"Fri, 26 Feb 2016 09:50:16", 
                              "contentSnippet": "text. "
                            }, 
                            {
                                "title":"Lo mejor de Shijue", 
                              "link":"http://agenciabai.es/lo-mejor-de-shijue/", 
                              "publishedDate":"Wed, 27 Jan 2016 04:07:23 ", 
                              "contentSnippet": "text. "
                            } 
                        ] 
                 } 
        }, 
    "responseStatus": 200
};

var data = fullData.responseData.object.entries


  $scope.arrTitles = _.map(data, 'title');

  $scope.arrDesc = _.map(data, 'link');

  $scope.shuffleTitles = _.shuffle($scope.arrTitles)
  $scope.shuffleDesc = _.shuffle($scope.arrDesc)

  $scope.shuffleData = _.zip($scope.shuffleTitles, $scope.shuffleDesc);


});

I did this jsfiddle to show how it works:

https://jsfiddle.net/melaspela80/kxb9agqd/4/

edited Mar 2, 2016 at 17:12

answered Mar 1, 2016 at 16:15

dobleUber

5766 silver badges22 bronze badges

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

5 Comments

ohmmho Over a year ago

actually my object looks like this:

var data = [    {Object       { subObject {entries:        			   {title:'he', desc:'for male'}                    }       } ,       { subObject {entries:        			   {title:'she', desc: 'for female'},                            }       } ,        { subObject {entries:       			    {title: 'I', desc: 'for me'}                                }       }    }

so your fiddle doesn't fits. sorry for my bad explanations, i'm newbie and explaining the problem itself is what i find the hardest. I updated the object on the question as well.

dobleUber Over a year ago

That is not a valid json data, could you add a real piece of your json response?

ohmmho Over a year ago

Imagine more "object" items inside "responseData":

{"responseData":   		{"object": 			{"url":"http://agenciabai.es/category/university/feed/", 			"title":"BAIANAI", 			"link":"http://agenciabai.es", 			"entries":[ 				{"title":"¡Hora de Aventuras!", 				"link":"http://agenciabai.es/hora-de-aventuras/", 				"publishedDate":"Fri, 26 Feb 2016 09:50:16", 				"contentSnippet": text. "}, 				{"title":"Lo mejor de Shijue", 				"link":"http://agenciabai.es/lo-mejor-de-shijue/“, 				"publishedDate":"Wed, 27 Jan 2016 04:07:23 ", 				"contentSnippet": text. }, 		] 	} }, "responseStatus": 200})

dobleUber Over a year ago

I fix the jsfiddle, I hope that it works now, regards

ohmmho Over a year ago

thanks man, but it still doesn't work. I need one level more of depth. What I need to get mix is each entrie with all the entries. I updated the fiddle with the object as it is: jsfiddle.net/kxb9agqd/7 regards!

Collectives™ on Stack Overflow

AngularJS: How to shuffle/merge content from different ng-repeat

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related