How can I Retrieve Dynamic Array Data in a nested ng-repeat?

Question

Im working with json data that is pretty deeply nested with strings and arrays where Im trying to push a true or false value on each day, and I did so here

Without a nested array(codepen 1)

html

  <ion-toggle ng-repeat="item in product"
                    ng-model="item.checked" 
                    ng-checked="item.checked">
          {{item}} 
        </ion-toggle>

js

 $scope.eventDaysList = [
{ day: "Monday" },
{ day: "Tuesday"},
{ day: "Wednesday" },
 ....
  ];


$scope.product = $scope.eventDaysList;
    var checked = false;
    $scope.product.forEach(function (newCheckItem) {
    newCheckItem.checked = checked;
});

Works :) Cool.

However, the I'm having a difficult time when the values (the hours) are nested like so.

With a nested array( codepen 2)

With the nested hours it looks like this

$scope.product.value.forEach(function (newCheckItem) {

and

<ion-toggle 
                  ng-repeat="(key,value) in product" 
                  ng-model="value.checked" 
                  ng-checked="value.checked" 
                   ng-hide="key == all_year, season_from, season_to">
        {{ key }} at {{ value }} 
      </ion-toggle>

js

    $scope.eventDaysList = {
    "event_offering": {
      "all_year": true,
      "season_from": "01/01",
      "season_to": "12/31",
      "monday": [
        "08:30am"
      ],
      "tuesday": [
        "08:30am"
      ],
      "wednesday": [
        "08:00am", "09:30am", "01:30pm"
      ],
      "thursday": [
        "08:30am", "09:30am"
      ],
      "friday": [
        "08:30am"
      ],
      "saturday": [],
      "sunday": []
    }
   };

       $scope.product= $scope.eventDaysList.event_offering
       var checked = false;
        //   $scope.product.forEach(function (newCheckItem) {
        //$scope.product.value.forEach(function (newCheckItem) {
         //   newCheckItem.checked = checked;
         //   });*/

So my questions is:

How can I retrieve the nested values in a dynamic array as separate objects i.e split the weds toggle into three toggles while still maintaining the rest of the structure? How can I do this and hide my three static keys all_year, season_from, season_to inside the ng-repeat?

Harbinger · Accepted Answer · 2015-12-05 03:07:08Z

1

ng-repeat isn't intended to do nested collections. I would recommend you figure out a way to flatten your event_offering. You can do this client side but I would recommend flattening this call server side.

I did solve your problem client side and you can check out this codepen:

http://codepen.io/anon/pen/eJYVzx

I slimmed down the code to focus on just what you're trying to accomplish. I also added lodash to shorthand foreach loops. I hope this helps.

JS:

  $scope.events = [];


$scope.eventDaysList = {
    'eventOfferingRevised' : [
      {'name': 'all_year', 'checked': true}
      ,{'name': 'monday', 'time': [{'name': '8:30', 'checked': true},{'name': '9:30', 'checked': true}] }
    ]
  };

  $scope.products = $scope.events;


_.each($scope.eventDaysList.eventOfferingRevised, function(eventOffering){
  if(eventOffering.time){
    _.each(eventOffering.time, function(eventTime) {
      eventTime.name = eventOffering.name + '-' + eventTime.name;
      $scope.events.push(eventTime);
    });
  } else {
    $scope.events.push(eventOffering);
  }
});

HTML:

<ion-toggle 
              ng-repeat="product in products" 
              ng-model="product.checked" 
              ng-checked="product.checked" 
               ng-hide="key == all_year, season_from, season_to">
    {{product.name}}
  </ion-toggle>

answered Dec 5, 2015 at 3:07

Harbinger

6241 gold badge9 silver badges19 bronze badges

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

1 Comment

garrettmac Over a year ago

This was helpful,however I cannot change the json object structure in the second codepen as it will be json coming in over http. lodash though is a resource that is helpful in this however I am still getting used to it

Collectives™ on Stack Overflow

How can I Retrieve Dynamic Array Data in a nested ng-repeat?

Without a nested array(codepen 1)

With a nested array( codepen 2)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Without a nested array(codepen 1)

With a nested array( codepen 2)

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related