Viewing the JSON Data

Question

Viewing the JSON Data

Support:

$scope.createTimeSlots = function(interval, field) {
    var startingTime = moment().hours(8).minutes(0);
    field.timeslots = [];
    for (var i = 0; i < interval; i++) {
        $scope.intervals = 60;
        field.timeslots.push(startingTime.add($scope.intervals, 'minute').format("h:mm"));
    }
}
$scope.SavePreferences = function(companyName, form_settings) {
        var _settings = {
            'company': companyName
        };
        console.log(_settings);
        debugger;
        var WorkingDays = [];
        for (var i = 0; i < $scope.fields.length; i++) {
            var item = $scope.fields[i];
            var time = $scope.fields.timeslots;
            if (item.checked) {
                WorkDays.push(item.name, time.timeslot);
            }
            console.log(time);
        }

link

I have arranged each day in a row with dropdowns and textboxes. My aim is to showcase the selected checkboxes values along with corresponding data in textbox and drop-down, displayed in JSON format

{'day':Monday,'duration':3,'drop-down':10.00}

. However, there seems to be an issue displaying the selected days alongside their duration and timeslot. How can I correct this JSON display?

javascript angularjs json

Answer 1

Answer №1

Take a look at this code snippet.

Here are the modifications:

Create a function setSelectedSlot that saves the selected slot for each field object.
Attach the previous function to a change event of the select element.
Also, store the duration (interval) in the field object when setTimeSlots is invoked.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
      { id: 2, name: 'Monday' },
      { id: 3, name: 'Tuesday' },
      { id: 4, name: 'Wednesday' },
      { id: 5, name: 'Thursday' },
      { id: 5, name: 'Friday' }];

      $scope.setTimeSlots = function (interval, field) {
         var startingTime = moment().hours(8).minutes(0);
         field.timeslots = [];
         // This was added
         field.duration = interval;
         // end of changes
         for(var i=0; i < interval; i++){
         $scope.intervals=60;
         field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
    }
   }
   // This function is new
   $scope.setSelectedSlot = function(field) {
     field.selectedSlot = this.time;
   }
   // end of changes
   $scope.Savesettings=function(){
      $scope.workDays=[];
      for(var i=0; i<$scope.fields.length;i++){
         var item = $scope.fields[i];
         if(item.checked){
            // The following line changed
            $scope.workDays.push({"day": item.name, "drop-down": item.selectedSlot, "duration": item.duration});
            // end of changes
         }
      }
     console.log($scope.workDays);
   }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f6f9f0e2fbf6e5b9fde4d7a6b9a2b9ef">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
  <script src="app.js"></script>
</head>
Result => {{workDays}}
<body ng-controller="MainCtrl">

  <table>
    <tr ng-repeat="field in fields" name="slotSelection">
    <td align="center">
      <input type="checkbox" ng-model="field.checked">{{field.name}} 
    </td>
    <td>
      <!-- Bind a new function to the `change` event -->
      <select ng-model="time" ng-options="time for time in field.timeslots" ng-change="setSelectedSlot(field)">
      <!-- end of changes -->
        <option value="">select</option>
      </select>
    </td>
    <td>
      <input type="text" ng-model="interval" ng-blur="setTimeSlots(interval, field)">
    </td>
  </tr>
  </table>
  <button ng-click="Savesettings()">Submit</button>
</body>

</html>

Answer 2

Take a look at this code snippet.

Here are the modifications:

Create a function setSelectedSlot that saves the selected slot for each field object.
Attach the previous function to a change event of the select element.
Also, store the duration (interval) in the field object when setTimeSlots is invoked.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
      { id: 2, name: 'Monday' },
      { id: 3, name: 'Tuesday' },
      { id: 4, name: 'Wednesday' },
      { id: 5, name: 'Thursday' },
      { id: 5, name: 'Friday' }];

      $scope.setTimeSlots = function (interval, field) {
         var startingTime = moment().hours(8).minutes(0);
         field.timeslots = [];
         // This was added
         field.duration = interval;
         // end of changes
         for(var i=0; i < interval; i++){
         $scope.intervals=60;
         field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
    }
   }
   // This function is new
   $scope.setSelectedSlot = function(field) {
     field.selectedSlot = this.time;
   }
   // end of changes
   $scope.Savesettings=function(){
      $scope.workDays=[];
      for(var i=0; i<$scope.fields.length;i++){
         var item = $scope.fields[i];
         if(item.checked){
            // The following line changed
            $scope.workDays.push({"day": item.name, "drop-down": item.selectedSlot, "duration": item.duration});
            // end of changes
         }
      }
     console.log($scope.workDays);
   }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f6f9f0e2fbf6e5b9fde4d7a6b9a2b9ef">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
  <script src="app.js"></script>
</head>
Result => {{workDays}}
<body ng-controller="MainCtrl">

  <table>
    <tr ng-repeat="field in fields" name="slotSelection">
    <td align="center">
      <input type="checkbox" ng-model="field.checked">{{field.name}} 
    </td>
    <td>
      <!-- Bind a new function to the `change` event -->
      <select ng-model="time" ng-options="time for time in field.timeslots" ng-change="setSelectedSlot(field)">
      <!-- end of changes -->
        <option value="">select</option>
      </select>
    </td>
    <td>
      <input type="text" ng-model="interval" ng-blur="setTimeSlots(interval, field)">
    </td>
  </tr>
  </table>
  <button ng-click="Savesettings()">Submit</button>
</body>

</html>

Answer 3

Answer №2

Issues Identified:

1: WorkDays is not defined. 2: field does not have time and interval properties associated with it

Suggested Changes:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
      { id: 2, name: 'Monday' },
      { id: 3, name: 'Tuesday' },
      { id: 4, name: 'Wednesday' },
      { id: 5, name: 'Thursday' },
      { id: 5, name: 'Friday' }];

      $scope.setTimeSlots = function (interval, field) {
         var startingTime = moment().hours(8).minutes(0);
         field.timeslots = [];
         for(var i=0; i < interval; i++){
         $scope.intervals=60;
            field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
    }
   }
   
   $scope.Savesettings=function(){
      $scope.workDays=[];
      for(var i=0; i<$scope.fields.length;i++){
         var item = $scope.fields[i];
         if(item.checked){
            
			var obj = {"day":item.name,"duration":item.interval,"drop-down": item.time,}
           
            $scope.workDays.push(obj);
         }
      }
   }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7d727b69707d6e32766f5c2d32293264">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <tr ng-repeat="field in fields" name="slotSelection">
    <td align="center">
      <input type="checkbox" ng-model="field.checked">{{field.name}} 
    </td>
    <td>
      <select ng-model="field.time" ng-options="time for time in field.timeslots">
        <option value="">select</option>
      </select>
    </td>
    <td>
      <input type="text" ng-model="field.interval" ng-blur="setTimeSlots(field.interval, field)">
    </td>
  </tr>
  </table>
  <button ng-click="Savesettings()">Submit</button>
  {{workDays}}
</body>
</html>

Answer 4

Issues Identified:

1: WorkDays is not defined. 2: field does not have time and interval properties associated with it

Suggested Changes:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fields = [{ id: 1, name: 'Sunday', timeslots: [] },
      { id: 2, name: 'Monday' },
      { id: 3, name: 'Tuesday' },
      { id: 4, name: 'Wednesday' },
      { id: 5, name: 'Thursday' },
      { id: 5, name: 'Friday' }];

      $scope.setTimeSlots = function (interval, field) {
         var startingTime = moment().hours(8).minutes(0);
         field.timeslots = [];
         for(var i=0; i < interval; i++){
         $scope.intervals=60;
            field.timeslots.push(startingTime.add($scope.intervals,'minute').format("h:mm"));
    }
   }
   
   $scope.Savesettings=function(){
      $scope.workDays=[];
      for(var i=0; i<$scope.fields.length;i++){
         var item = $scope.fields[i];
         if(item.checked){
            
			var obj = {"day":item.name,"duration":item.interval,"drop-down": item.time,}
           
            $scope.workDays.push(obj);
         }
      }
   }
  
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7d727b69707d6e32766f5c2d32293264">[email protected]</a>" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <tr ng-repeat="field in fields" name="slotSelection">
    <td align="center">
      <input type="checkbox" ng-model="field.checked">{{field.name}} 
    </td>
    <td>
      <select ng-model="field.time" ng-options="time for time in field.timeslots">
        <option value="">select</option>
      </select>
    </td>
    <td>
      <input type="text" ng-model="field.interval" ng-blur="setTimeSlots(field.interval, field)">
    </td>
  </tr>
  </table>
  <button ng-click="Savesettings()">Submit</button>
  {{workDays}}
</body>
</html>

Viewing the JSON Data

Answer №1

Answer №2

Similar questions

How can we efficiently iterate through an array in Node.js while making asynchronous calls?

Creating interactive PDF files using ReactJS

Fill in input field based on choice from the drop-down menu - JavaScript

What is the best way to pass a custom HTTP header to a Node.js server?

What is the best way to extract information from a JSON field in PostgreSQL?

Guess the Number Game with while Loop

Reading an irregular JSON file with AngularJS if statement

Deactivate a particular function key with the help of jQuery

Having trouble with threejs: Trying to map converted JSON animations to sliders but facing some issues

"Troubleshooting issue: Unable to retrieve grid data from Google Sheets API v4 when integrated

Creating a cascading layout with React Material-UI GridList

Issue with applying value changes in Timeout on Angular Material components

Checking the Ajax request with an if statement

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

Retrieve JSON response from server using Swift to decode

What is the best way to set a specific image as the initial image when loading 'SpriteSpin'?

When a previous form field is filled, validate the next 3 form fields on keyup using jQuery

Match one instance of a character in a regular expression pattern while simultaneously matching two occurrences of a different character

How to extract JSON data without HTML tags in Android Studio

The <h> tag gains height on its own accord