How to remove items from an array using filtering in AngularJS

I have a function where I am trying to filter objects from an array and assign it to the note variable. However, when I run the program, it shows that the note variable is undefined. How can I fix this issue?

Please take a look at the code snippet below:

 datepicker.onSelect = function (checked) {
                  var state = (checked) ? 'selected' : 'unselected';
                  $scope.calDate = this.toLocaleDateString();
                  var note = $scope.tooltipsArray.filter(function (items) { return items.date === '$scope.calDate' })[0];
                  ModalService.showModal({
                      templateUrl: 'scripts/directives/calendar/calendarModal.html',
                      controller: 'calendarModal',
                      inputs: {
                          calendarDate: $scope.calDate,
                          calendarNote: null,
                          dateSelected: state
                      },
                      size: 'sm'
                  }).then(function (modal) {
                      modal.element.modal();

                  });



              };

debugger screen

Answer №1

It appears there is a small issue within your code where $scope.calDate is being used as a string.

Make sure to change '$scope.calDate' to $scope.calDate

var note = $scope.tooltipsArray.filter(function (items) { return items.date === $scope.calDate })[0];

In addition, to obtain the current localeDateString, you can implement the following code:

$scope.calDate = new Date().toLocaleDateString();

Check out the code in Stack Blitz:

https://stackblitz.com/edit/angularjs-szy529?file=home/home.controller.js

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

Adding Bootstrap to container-specific styling in SCSS

I am currently in the process of upgrading to the most recent version of reactstrap & Bootstrap. Previously, I had reactstrap in my package.json file and downloaded Bootstrap SCSS in my client/src/styles/bootstrap directory. Now, my updated package.json c ...

What is the best way to assign an ID to a specific HTML element within NetSuite's Document Object Model

Attempting to utilize jQuery in NetSuite to assign a value to an element for testing purposes, but struggling to locate the HTML DOM ID of certain custom drop-down lists. It's not the internal ID. For example: <input type="text" id="soid"> Wh ...

Using only if-else statements and else-if conditions in JavaScript, arrange four numbers in order

How can I arrange 4 numbers in ascending order using only if-else and else-if statements in JavaScript without utilizing the sort function? ...

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

What is the best way to modify the width of an option box separately from the select width using jquery?

Is there a way to adjust the width of an option box separately from the select width? Here's what I've tried: $('option').css({'width': 100}); The select element needs to have a width of 400px; select{ width:400px; } Link ...

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header in the response should not be using the wildcard '*'

I am encountering an issue with my socket.io server as I am unable to connect to it from my local HTML file on my Mac. Error: Failed to load : The 'Access-Control-Allow-Origin' header in the response is causing a problem due to the wildcard ...

A centralized hub for managing all AJAX callback functions for a specific JavaScript call

When interacting with a server using JavaScript in my single-page browser application, I aim to implement a callback function that will always be executed after receiving a response from the server, regardless of whether it was successful or resulted in an ...

What are the steps to effectively utilize the $filter('filter') function when filtering multiple columns with OR as the condition?

In my AngularJs Application, I have a collection of customers. var customers = [ { "Name": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" }, { "Name": "Ana Trujillo Emparedados y helados", ...

Prevent caching in AngularJS stateprovider and Gulp

Looking for ways to prevent caching of my Html files without success. Attempted using rev & rev-replace, however only the file names are being changed and not the references in the stateprovider, leading to a "files not found" error. This snippet from my ...

How to use JQuery to automatically scroll to the bottom of a

I've encountered an issue with my chat conversation update function. It runs every 2 seconds, but whenever I scroll up to read older messages, the page automatically scrolls down again when it updates. This is preventing me from reading old messages p ...

What is the best way to allocate values within a for loop?

I am in the process of designing an interface for individuals who have no background in programming. My goal is to allow them to input certain details, and then be able to simply copy and paste the code to make everything function seamlessly. Here is a sa ...

Extracting values from URL query parameters in Vue.js

When dealing with Vue.js callback URLs, I encounter situations where I need to extract a parameter value from the URL. For instance, consider this return URL: http://localhost:8080/#/sucesspage?encryteddata=abdeshfkkilkalidfel&9a I attempted to retrie ...

What is the best way to utilize $.post() to send a combination of a javascript object and form

I'm having trouble sending a JavaScript object along with form data using the shorthand method $.post(). I want to combine these two, but it's proving to be difficult. Additionally, I need to know how to retrieve the form data on my PHP page. An ...

Converting a PHP object array to a JavaScript associative array

My current challenge involves manipulating a PHP object array like so: array(223) { [0]=> object(stdClass)#5 (9) { ["id"]=> string(2) "10" ["name"]=> string(10) "Cyclops" ["address"]=> string(13) "GSDG" } [1]=&g ...

Tips for maintaining a scrollable Material-UI Table with dynamic height?

I'm encountering an issue with the Material-UI Table component in terms of its size and scrollability. Summary: The Material-UI table only becomes scrollable when its parent has a fixed size. If I set the size to 100% to fit the parent, it overflows. ...

Tips for modifying the status of a single component within a v-for loop without impacting other components

I am encountering an issue with my childComponent that is dynamically rendered using v-for within the parentComponent. The Parent component contains logic to fetch data from the database and display it on the screen. The fetch request query is dependent on ...

Can $.ajax be used as a replacement for $(document).ready(function()?

After conducting an extensive search, I am still unable to find a clear answer to my assumption. The code I used is as follows: <?php session_start(); if (isset($_SESSION['valid_user']) && $_SESSION['from']==1) { ?> ...

Creating a dynamic list with a custom Angular JS directive that cascades based on JSON data

In my attempt to create a custom directive using AngularJS, I encountered an issue where the first drop-down remained unselected and prompted an error message stating "Error: 10 $digest() iteration reached. Aborting! Watcher fired in the last 5 iterations: ...

Is there a way to adjust the color of the spin buttons in Material UI Text Field when using type number?

When creating a number Text Field with Material UI, I noticed that the colors of the spin buttons are not adhering to my theme. Here is an example code snippet from the Material UI documentation that showcases the issue: <TextField id="outlined- ...

Generating a JSON download link using AngularJS

I'm attempting to generate a link that will enable the download of a JSON file in this way Controller $scope.url = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj)); View <a href="url" download="download.json">downlo ...