Wait until a svelte store value is set to true before fetching data (TypeScript)

I have implemented a pop-up prompt that requests the user's year group. Since I have databases for each year group, I need to trigger a function once the value of userInfo changes to true.

My JavaScript skills are limited, and my experience has been primarily with async calls and promises related to API fetching. This is what I currently have:

Here's an example:

onMount(async function check() {
        // Verify if the user has entered their information
        if ($userInfo) {
            getYearGroupSchedule($yeargroup, weekdates);
        } else {
            // Wait for userInfo to be true
        }
    });

I'm not sure if this is the correct approach, and I feel quite lost. Any assistance would be greatly appreciated. Feel free to ask any clarifying questions in the comments below.

javascripttypescriptasynchronoussvelte

Answer №1

In the onMount method, logic is executed only once. However, if you need to wait for a certain condition, it's recommended to use a reactive statement:

$: if ($userInfo) {
    getYearGroupSchedule($yeargroup, weekdates);
}

This will be checked and run every time there is a change in any of the dependent variables, including $yeargroup and weekdates. If you want the code to trigger based on a specific condition only, you can call a function to isolate that condition and "hide" the others. For example:

$: if ($userInfo) update();

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

Trouble with triggering Ajax file upload progress event

Using AJAX request, I am splitting and uploading a file in chunks. However, I have encountered an issue with the progress event not firing in Firefox. Below is the relevant code snippet: //slice file if(file.mozSlice){ chunk = file.mozSlice(startByt ...

javascriptajaxfirefox

AngularJS: Error - Angular object is undefined

Hello! I am currently working on a project to develop a simple App using c# WebAPI and AngularJS. Unfortunately, I have encountered an error in the console which is preventing the web app from functioning properly. Here is a snippet of my Index.html file: ...

javascriptangularjs

Utilizing ngRepeat to build intricate rows within a table

I have a unique collection that appears as follows: { "10": {}, "12": { "20": { "value": 1, "id": 1, }, "100": { "value": 12, "id": 1, } }, "14": { "10 ...

javascriptangularjs

The request does not include the cookies

My ReactJS client sends a cookie using this NodeJS code snippet: res.cookie("token", jwtCreation, { maxAge: 24 * 60 * 60 * 1000, // Milliseconds (24 hours) sameSite: 'None', // Cross-site requests allowed for modern browser ...

javascriptreactjsexpresscookiesaxios

Heroku Foreman unexpectedly stops while using Express.js bodyParser() function

After running foreman start, the following message is displayed: > foreman start 20:38:55 web.1 | started with pid 3896 20:38:55 web.1 | Development 20:38:56 web.1 | connect.multipart() will be removed in connect 3.0 20:38:56 web.1 | exited with co ...

javascriptnode.jsherokuexpressforeman

What is causing the label's color to remain the same?

Once the page has loaded, the label color (which reads "enter your name") is supposed to change to red. However, despite the script being in place, the color remains unchanged. What could be the reason for this? SCRIPT window.onload = initiateScript; fu ...

javascripthtmlcssforms

Converting an Array with Key-Value pairs to a JSON object using JavaScript

After using JSON.stringify() on an array in JavaScript, the resulting data appears as follows: [ { "typeOfLoan":"Home" }, { "typeOfResidency":"Primary" }, { "downPayment":"5%" }, { "stage":"Just Looki ...

javascriptjson

Looking to display a div with a unique timer?

Is there a way to display different divs with unique classes for specific durations of time? For example, I want one div to show for 2000 ms with the class 'one', then another div to show for 4000 ms with the class 'two', followed by a ...

javascriptphpjqueryajax

"Utilizing jQuery AJAX to enable multiple file uploads with specific file extensions

I've been facing an issue with uploading multiple files using jQuery and AJAX. The problem arises when I attempt to submit a PNG or JPG file, but it fails to submit and instead alerts me to "Please Upload File" even though a file has been selected. ...

javascriptjqueryajax

Can @Input() be declared as private or readonly without any issues?

Imagine you're working in an Angular component and receiving a parameter from its parent. export class SomethingComponent implements OnChanges { @Input() delay: number; } Would it be considered good practice, acceptable, or beneficial to designat ...

angulartypescript

Issues with getOptionLabel in Material UI

I have a constant with the following values : const Reference = [ { label: "RF-100", year: "Test" }, { label: "RF-200", year: "Test2" }, { label: "RF-300", year: "Test3" }, ]; and my Autoco ...

reactjstypescriptmaterial-ui

HTML Date input field not respecting locale settings and defaults to mm/dd/yyyy format

When using an html date input in an ng-repeat scenario, I noticed that it defaults to mm/dd/yyyy even though my computer's regional settings are set to dd/mm/yyyy. <script src="//unpkg.com/angular/angular.js"></script> <body ng-app&g ...

javascripthtmlangularjsdateinput

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

I have a password field on my page where the password is hidden, but I want users to be able to copy and paste the clear text version of the password on another website. In order to achieve this, I followed the instructions in an article titled Mask text, ...

javascriptjqueryhtmlruby-on-rails-3css

Typescript typings for child model/collection structures

I have encountered an issue while trying to implement a Model/Collection pattern with various typings. Both the Model and Collection classes have a method called serialize(). When this method is called on the Collection, it serializes all the Model(s) with ...

typescripttypescript-typings

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below: <ul> <li> <a href="#" role="button" class="js-pagination link" data-page="1">1</a> </li> <li> <a href="#" role="button" class="js-pagination link active" data ...

javascriptjqueryhtmlcssselenium

Click on an Object within a modal window using JavaScript in Internet Explorer 8

I'm facing a strange issue with the SELECT object in a Modal Window. Within my HTML code, I have a button that opens a modal window when clicked. Inside this modal window, a JSP page is loaded. On this JSP page, there is a dropdown list created using ...

javascriptwindowmodal-dialog

Tips for avoiding special characters when utilizing Jquery serialization?

I'm facing an issue with my form page where I need to perform some AJAX actions before submitting. The problem arises from the fact that the form input names contain period characters, which are causing conflicts in the AJAX functionality. Unfortunate ...

javascriptjqueryajaxserializationescaping

Trouble with fill() function

Check out this JavaScript code snippet I wrote: function Show(output, startX, startY){ var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.arc(startX, startY, 3, 0, Math.PI*2, true); context.fill( ...

javascriptcanvashtml5-canvas

Issue: A problem has arisen with the element type, as it was supposed to be a string for built-in components but is currently undefined. This error is being encountered

Help needed: Error in my code! I am working with three files: HeaderOption.js, HeaderOptions.js, Search.js This is the content of HeaderOptions.js import HeaderOption from "./HeaderOption"; import DotsVerticalIcon from "@heroicons/react/o ...

javascriptreactjsnext.js

Turning a Two Dimensional Object or Associate Array into a Three Dimensional Object using Javascript

Is there a method to transform the following: var stateDat = { ME: ['Maine',1328361], etc. }; Into this structure dynamically within a function? var stateDatHistory = { 1:[ ME: ['Maine',1328361], etc. ], 2:[ ME: ['Maine& ...

javascriptarraysobjectassociative-array