AngularJS and JSON object

Question

I have been stuck on this issue for some time now. I would appreciate your help. I've attached a plunker. Plunker Link

(function () {
'use strict';

angular
    .module('scheduling')
    .controller('ScheduleCtrl', ['$scope', '$rootScope', '$log', '$filter',  function ($scope, $rootScope, $log, $filter) {
        $scope.selectedDay = function () {
            $rootScope.day = Object.keys($scope.day).map(key => $scope.day[key]);
            $rootScope.day = $scope.day;
            $rootScope.schedule.weekdays.day['@'].day = $rootScope.day;
            console.log($rootScope.day);                   
        }                   
    }]);
})();

Objective: I need to be able to select a day or multiple days and have that value get saved to $rootScope.day in the $rootScope.schedule object. The value needs to get save as day:0, day:1, day:2 etc. My initial problem is that the value was getting stored as sun:0, mon:1, tue:2 etc. I was able to find a way to remove the day names (sun, mon, tue) but now it is storing the value as 0:0, 1:1, 2:2 etc.

Can you please view the full code on Plunker, and let me know how I can achieve having day in front of the number value (day:1 or day:1,2,3) ?

NOTE: I have tried using checklist-model and ngRepeat methodolgy but that is not working either.

Thanks for your help.

are you wanting your output to be an object or an array of values? — Claies
– Claies, Commented Jun 22, 2016 at 2:04
I hate to ask, but you seem to have a very complex setup going on with your days. What is it that you are really after? — KreepN
– KreepN, Commented Jun 22, 2016 at 2:32
KreepN - sorry for the complexity - I am fairly new to coding. I am creating a scheduling application. The user would be able to pick a day(s) to have a job run. I need to pass this value to a 3rd party application. The JSON object gets converted to XML. The 3rd party is not recognizing the $rootScope.day value because the output is sun:0 rather than day:0. — Heather
– Heather, Commented Jun 22, 2016 at 2:50
Claies - It is currently an array item. But really what I need is for the format to be day:0, day:1...so whichever can achieve that would really help. — Heather
– Heather, Commented Jun 22, 2016 at 2:51

ScottL · Accepted Answer · 2016-06-22 03:55:43Z

The reason why the value is getting saved to day.sun is that you have your ng-models as, for example: ng-model="day.sun". This means it binds to the sun property in the day object.

It might be a good idea to relook at how you are doing your application as it currently seems to be unneccesarily complex. The below snippet is an example of how I would do a set of checkboxes for each day.

I recommend using services instead of rootscope.

 (function() {
   'use strict';
   angular.module('test', []);
   angular
     .module('test')
     .controller('MainCtrl', MainCtrl);

   function MainCtrl() {
     var vm = this;

     vm.getSelectedDays = function() {
       var selectedDays = [];
       angular.forEach(vm.days, function(value, idx) { 
           if (value.isEnabled) {
             selectedDays.push(idx + 1);
            }
        });
       return selectedDays;
     };
     
     vm.days = [{
       name: 'Monday',
       isEnabled: false
     }, {
       name: 'Tuesday',
       isEnabled: false
     }, {
       name: 'Wednesday',
       isEnabled: false
     }, {
       name: 'Thursday',
       isEnabled: false
     }, {
       name: 'Friday',
       isEnabled: false
     }, {
       name: 'Saturday',
       isEnabled: false
     }, {
       name: 'Sunday',
       isEnabled: false
     }];
   }
 })();

label {
   display: block;
}

<!doctype html>
<html ng-app="test" ng-cloak>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
  <div ng:controller="MainCtrl as vm">
    <label ng-repeat="day in vm.days track by $index">
      <input type="checkbox" ng-model="vm.days[$index].isEnabled">{{day.name}}
    </label>
    <p>days: {{vm.getSelectedDays()}}</p>
  </div>
</body>

</html>

Thanks for your help. I had to use the model as such - otherwise if I just used day as the model (rather day.sun) I was only able to select one checkbox at a time. That's why i used that Object.key mapping to pull only the value. I will spend some time researching services vs $rootscope.

Vu Quyet · Accepted Answer · 2016-06-22 02:57:39Z

0

Make an array for dates, and a field to save value selected by user as status.

Date list:

$scope.listDates = [
  {day:"Sunday", value: "7",status: 0},
  {day:"Mon", value: "1",status: 0},
  {day:"Tues", value: "2",status: 0},
  {day:"Wed", value: "3",status: 0},
  {day:"Thur", value: "4",status: 0},
  {day:"Fri", value: "5",status: 0},
  {day:"Sat", value: "6",status: 0}
]

use ng-repeat to show list day:

<li class="col-md-3" ng-repeat="date in listDates">
          <input type="checkbox" id="{{'day'+ date.status}}" ng-true-value="{{date.value}}" ng-model="date.status" ng-change="dayChanged()"/>
          <label class="ui-checkbox" for="{{'day'+ date.status}}">{{date.day}}</label>
   </li>

I made a plunkr here to show day selected as [1,2...]

edited Jun 22, 2016 at 2:57

answered Jun 22, 2016 at 2:50

Vu Quyet

1,7051 gold badge16 silver badges22 bronze badges

4 Comments

Heather Over a year ago

Thanks, Vu. So are you passing $scope.dayPicked to the $rootScope.schedule object?

Vu Quyet Over a year ago

You can chang name daySelected to schedule and dont use/avoid rootscope variable if you can. Also i use ng-repeat to render making code clean and easy to read.

Heather Over a year ago

Thanks. But my end result output in $rootScope.schedule is still not formatting correctly. Its showing as: day:[array] 0:1 1:4 I need it to be: day: 1 day: 4

Vu Quyet Over a year ago

For showing in html use ng-repeat to show dayselected, for struture of object, use map function to transform as you expect

Collectives™ on Stack Overflow

AngularJS and JSON object

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related