1

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

ohmmho
  • 132
  • 2
  • 13
  • can you shuffle it before the angular stage? before the JSON object is created? – ewizard Feb 26 '16 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 Feb 26 '16 at 16:08
  • is there any relevant angular code? can you shuffle it in the angular javascript and then display it? – ewizard Feb 26 '16 at 16:14
  • you could use a filter to shuffle your data. This could be helpful: http://stackoverflow.com/questions/16563018/angularjs-custom-filters-and-ng-repeat – dobleUber Feb 26 '16 at 16:47
  • 1
    or you could use the orderby filter: just asign a random number to your objects and sort them: https://docs.angularjs.org/api/ng/filter/orderBy – dobleUber Feb 26 '16 at 16:51
  • @ewizard. I updated the question with more info, thanks! – ohmmho Feb 26 '16 at 17:03
  • @melaspelas with the approach you suggest I end with the different blocks of objects shuffled but I need the data inside, the title and url shuffled. – ohmmho Feb 26 '16 at 17:04
  • got it: maybe you could use lodash map and zip to achieve that: https://lodash.com/docs#map, https://lodash.com/docs#zip that same could be done with vanilla javascript but it is a little verbose – dobleUber Feb 26 '16 at 18:52
  • @melaspelas thank you for the links, but i couldn't manage to do it. I'm only able to map inside the first object of the principal object, don't know why. – ohmmho Mar 01 '16 at 08:51
  • Possible duplicate of [shuffle array in ng-repeat angular](http://stackoverflow.com/questions/20789373/shuffle-array-in-ng-repeat-angular) – Cosmin Ababei Mar 02 '16 at 17:19

1 Answers1

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/

dobleUber
  • 566
  • 6
  • 22
  • 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. – ohmmho Mar 01 '16 at 19:38
  • That is not a valid json data, could you add a real piece of your json response? – dobleUber Mar 01 '16 at 21:11
  • 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})` – ohmmho Mar 02 '16 at 16:41
  • I fix the jsfiddle, I hope that it works now, regards – dobleUber Mar 02 '16 at 17:13
  • 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: https://jsfiddle.net/kxb9agqd/7/ regards! – ohmmho Mar 03 '16 at 14:36