Manipulating Data and Extracting Nested JSON in AngularJS

I am running into an issue with inserting a boolean value into the nested data within my Ionic/Angular Project.

My goal is to include a boolean value for each day's time (if it exists) in a JSON structure that cannot be altered due to strict HTTP call constraints. The current JSON format is as follows:

{
     "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": []
}

The resulting output appears like this https://i.sstatic.net/INfh8.png

Here is the HTML code snippet:

 <ion-list ng-repeat="(key, value) in filteredDays"
                    ng-model="value.checked" 
                    ng-checked ="value.checked">
          <div class="item item-divider">
               <h3>{{key}}</h3><!--{{value}}--></div>
          <ion-toggle ng-repeat="x in value"
                             ng-model="value" 
                  ng-checked="x" 
                    >
           {{x}}
             </ion-toggle>

This is how I have set up my JavaScript:

 $scope.filteredDays={};
     $scope.unFilteredDays = {
             "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.filteredDays = $scope.unFilteredDays;

// Struggling at this point

/*
  var checked = false;
   $scope.filteredDays.forEach($scope.filteredDays, function(value, key) {
   $scope.filteredDays.push(checked);
 });

*/

I have indicated where I am facing difficulties in the above code block. I am unable to figure out a way to add a boolean value to the time toggle item array. I have also created a CodePen demo for reference.

Moreover, I have attempted to utilize lodash in this project to manage the data (extracting "all_year", "season_from", "season_to" values from the list) and believe that it is configured correctly. However, my limited experience with lodash is hindering me from achieving the desired outcome.

Any assistance or guidance would be greatly appreciated.

Answer №1

$scope.filteredDays is not of type Array, which means it does not support the forEach method. To iterate through the elements, you can use the following approach:

var checked = false;
Object.keys($scope.filteredDays).forEach(function(key) {
    $scope.filteredDays[key].checked = checked;
});

Answer №2

let weekDays = ["sunday ", "monday",... and so on];
_.forEach($scope.filteredDays, function(value, day) {
  if (_.contains(weekDays, day)) {
    value.push(checked);
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of Nuxt's asyncData is restricted when attempting to access data from authorized express routes

Setting up an online store. I began with the products, which can be pulled without authorization but require it for editing. The process is smooth so far, probably because it's happening on the client side where authentication information is included ...

Efficiently generating and managing numerous toggle buttons in Reactjs with Material-ui ToggleButtons

Currently, I am exploring the idea of designing a sidebar that incorporates a variable number of toggle buttons generated from an object containing keys and values. However, I am encountering difficulties in utilizing the "key" value to adjust the corres ...

Enhance the functionality of the directive form by incorporating additional methods

My Angular custom form needs enhancement: <form rp-form> <input type="text" value="one"> <input type="text" value="two"> <button type="submit">submit</button> </form> I am looking to incorporate a method using th ...

Tips for integrating WMV files into an HTML5 document

I've been attempting to integrate some s3 WMV file URLs into my HTML page, but the following code doesn't seem to be functioning as expected. <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Microsoft® Windows® ...

The error code UnknownError is being generated by the Microsoft Graph API specifically for users with M

Our application utilizes the Microsoft V2.0 OpenID protocol for Single Sign-On (SSO) to allow MSA and AAD users to log in. Here are the scopes used in the authorization URL: openid profile email user.read After obtaining the access token from the token ...

My goal is to programmatically eliminate captcha from a website

Is there a way to automatically remove capture from a Page using javascript (Greasemonkey)? The page's HTML structure seems complex, so any suggestions on how to achieve this would be greatly appreciated. <div class="wrapper"> <d ...

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Currently, I am delving into TypeScript and attempting to convert a small project that utilizes Emotion to TypeScript. I have hit a roadblock at this juncture. The code snippet below export const Title = styled.div(props => ({ fontSize: "20px", ...

Displaying a Dynamic Loading Animation While Making an AJAX Call with jQuery

When a user clicks on the active status button, it should switch to inactive with a red color, and vice versa. Currently, I can update my status in the backend, but I have to refresh the page to see the changes every time! My requirement is that during t ...

Is there a way to extract data from a MySQL database, convert it into JSON format, and then transmit it using Express

I am new to Node.js and I am trying to figure out how to send both registered and claimed variables as JSON using Express.js The code I have right now is not working: app.get('/item_reg', (req, res) => { var registered = connection.query( ...

Switch background and disable hover effect with a click

I'm facing some issues with JavaScript and I can't seem to solve the problem on my own. What I want is, when I click on #footerblock, for the background of #footerblock to change, and then for the footer to lose its "hover effect". <script> ...

The W3C validator does not recognize any modifications made after jQuery and JavaScript have been applied

My goal is to ensure that my website passes all errors on the W3C Validator. I have encountered a few errors related to the alt text of images. In an attempt to address this issue, I wrote and added the following code to the <head> <script type=" ...

No data returned from JSON request in VB.Net

Attempting to access the JSON response called by loading this page: Fiddler2 reveals that the page receives JSON content from with a start and end date parameter - e.g. {'start':'26-May-2013', 'end':'07-Jul-2013'} ...

Incorporating new functionality into the current .js file to automatically collapse the navbar when clicking outside

Previously, I utilized .js for my sticky navbar in Bootstrap 4.1.3 and it worked perfectly. However, I attempted to add a function in the script to collapse the navbar on mobile devices when clicking outside the menu, but it wasn't successful. Here i ...

Updating the value of a global variable through dependency injection in AngularJS

One thing I consistently do is inject app.constant('DOCUMENT_ID', window.documentId || 1); into services, controllers, and directives. I'm now looking to convert DOCUMENT_ID into a global variable. The goal is for any changes made to DOCUME ...

Ways to automatically close the external window upon logging out in Angular 12

I have successfully created an external window in my Angular application. Everything is working as expected, but I am facing an issue when trying to automatically close the external window upon user logout. Although I have written the code below and it wo ...

Bounding box in ThreeJS for a 3D entity represented in 2D dimensions

I'm currently trying to calculate the area on my screen that is occupied by a 3D object. Despite searching online, I have been unsuccessful in finding a solution to this problem. The function geometry.computeBoundingBox() only provides me with the 3 ...

I would like to see a straightforward demonstration of how DOM manipulation is done by the Controller in AngularJS

As a newcomer to AngularJS, I keep hearing warnings about not using controllers to handle DOM manipulation. I understand the importance of flexibility, but I would appreciate some concrete examples to illustrate this concept. Can you clarify whether DOM ...

Send a parameter to be used as a link attribute in a pop-up box

I am seeking a way to pass a URL for my modal that relies on extracting the adder variable from the main HTML document. While I understand how to pass variables as text (using spans) to a modal, I am unsure how to incorporate a variable in an anchor <a ...

Json parameter not accessible on iOS device

Here is an example: { "updated":1350213484, "id":"http://www.google.com/reader/api/0/feed-finder?q\u003dExample\u0026output\u003djson", "title":"Feed Results for \"Example\"", "self":[ { "href":"http://www.google.com/reader/api/0/ ...