Exploring AJAX GET requests and JavaScript capabilities

Just starting out with javascript and I'm a bit confused about how to solve a particular issue. Hopefully, the example below can help explain my situation:

  let tasks = {
    '04-23-2018' : '<a href="http://tympanus.net/codrops/2012/11/23/three-script-updates/">Three Script Updates</a>',
    '04-21-2018' : '<a href="http://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/">Adaptive Thumbnail Pile Effect with Automatic Grouping</a>',
    '04-20-2018' : '<a href="http://tympanus.net/codrops/2012/11/20/learning-principles-for-improving-your-css/">Learning Principles for Improving Your CSS</a>',
    '04-19-2018' : '<a href="http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/">Responsive CSS Timeline with 3D Effect</a>'
  };

  $.get( "/api/tasks").done(function( data ) {
    tasks["04-26-2018"] = '<a href="http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">BING BONG BONG SSSSS</a><a href="http://tympanus.net/codrops/2012/04/30/im-creator-giveaway/">IM Creator Giveaway</a>';
  });

I'm currently debugging the above get request as I am testing some variables to understand the asynchronous nature of get requests.

Later on in my script, I have the following segment of code:

let calendar = $calendar.calendario({
  onTaskClick : function( $el, $contentEl, taskProperties ) {
    if( $contentEl.length > 0 ) {
     showTasks( $contentEl, taskProperties );
    }
  },
  caldata : tasks,
  displayWeekAbbr : true
});

I assigned the variable "tasks" to caldata.

However, it seems that caldata only includes the initial objects - not the key value pair I added within the done function of the get request...

How can I ensure that the collected data is returned before declaring let calendar? I attempted declaring let calendar after setting the tasks["04-26-2018"] key but this introduced issues as other functions within the script also require calendar?? I'm feeling quite lost and would appreciate any guidance on this matter.

Thank you.

Answer №1

In order to ensure the proper assignment of caldata, refrain from assigning it during initialization. Instead, assign caldata after a successful callback as demonstrated below:

let cal = $calendar.calendario({
  onDayClick : function( $el, $contentEl, dateProperties ) {
    if( $contentEl.length > 0 ) {
     showEvents( $contentEl, dateProperties );
    }
  },
  displayWeekAbbr : true
});

$.get( "/api/events").done(function( data ) {
    events["04-26-2018"] = '<a href="http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">BING BONG BONG SSSSS</a><a href="http://tympanus.net/codrops/2012/04/30/im-creator-giveaway/">IM Creator Giveaway</a>';
    cal.caldata = events;
  });

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

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

React App with Material UI V1-beta Integration

I just installed the Create React App example from Material-UI.com. curl https://codeload.github.com/callemall/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/create-react-app Upon installation, I encountered the following erro ...

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

I'm trying to figure out how to filter an ng-repeat function based on the first letter of each option. For example, I want to filter a set of array or string so that only options starting with "A" or "B" are displayed. Can anyone help me with this? H ...

Currently, there is a requirement to include past build outcomes in the HTML test report within the playwright

Is there a way to display the previous build status of each test case for every test case? I have been attempting to use test.info() in playwright, but it seems inaccessible from onTestEnd. One option could be to retrieve the previous build data from Jenki ...

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

Conversation with form component in angular2

I am currently using ng2-bootstrap-modal. For adding a sample form to the example Confirm Dialog, check out ng2-bootstrap-modal. To change the template: <div class="modal-dialog"> <div class="modal-content"> <form [formGroup]="login ...

Difficulty encountered when attempting to extract a username with multiple spaces using the .split() method in Discord.js with NodeJS

Currently, I am enhancing a feature in my Discord Bot that fetches the League of Legends statistics of a player by using the command !lolid [enter_username_here] in a Discord chat room. The function works smoothly for usernames with just one word; however, ...

JavaScript code that displays values that are not equal

Here is a code snippet that checks whether two arrays of objects are equal or not. How can we enhance this code to log which answer is not matching? The structure of the arrays: arrayA represents user answered questions, while arrayB contains correct answ ...

Issue with Vue.js: Child component emitting event but parent component method not triggering

When a child component makes an input change, it emits an event with some data: Vue.component('gum-option', { inheritAttrs: false, props: ['label'], template: ` <label class="gum-option"> ...

Struggling with running a jQuery ajax request inside a function?

Below is my code for a jQuery Change Event: $("input[name=evnt_typ]").change(function(){ var request = $.ajax({ method: "POST", url: "ajaxRequest.php", dataType: "json ...

The functionality of the Angular ng-bind-html directive may be unreliable in specific scenarios

I've exhausted all the solutions found on stack overflow but still haven't found a solution. Using angular 1.4.4 and ng-repeat directive, I am attempting to display a HTML comment inside a table row. A sample comment looks like 'Test commen ...

Tips for creating a multitude of components

I have my react code in a single component and I am wondering how to split it into two components for the images container and showroom images. import React, { Component } from 'react'; export default class App extends Component { render() { ...

Are memory leaks a common issue with Angular directives?

Using a simple html file to replicate a memory leak: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script> va ...

What could be the reason that step 3 of the AngularJS Tutorial is not functioning correctly?

During Step 3 of the AngularJS Tutorial, an additional e2e test is recommended to enhance the example: it('should display the current filter value within an element with id "status"', function() { expect(element('#status').text() ...

Tips for inserting a hyperlink into a Chakra UI toast

Exploring the integration of Chakra UI within my Next.js project has led me to a curious question: Can Chakra UI toasts accommodate links and styled text? If so, what is the process for implementing these features? ...

Why am I getting the error in react-dom.development.js related to my index.js file?

Upon checking the console, the following message is displayed: react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Please use createRoot instead. Until you transition to the new API, your application will behave as if i ...

Error: Failed to cast value "{ email: 'example@email.com' }" to ObjectId (type Object) for the "_id" path in the "User" model

How can I use the Mongoose ID to fetch data and send it to the client's browser? My Mongoose Database Data: {"_id":{"$oid":"6404fc0b9e6a0640b0deb716"},"username":"dddd","email":"[email&# ...

Getting the date from a datetime JSON - here's how!

How can I extract the date from a JSON datetime string like 2013-11-09T00:00:00 using either Jquery or JavaScript? ...

Coloring vertices in a Three.js geometry: A guide to assigning vibrant hues

This inquiry was previously addressed in this thread: Threejs: assign different colors to each vertex in a geometry. However, since that discussion is dated, the solutions provided may not be applicable to current versions of three.js. The latest versions ...

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

I've been researching this issue online and have found a few similar cases, but the concept of Generic convolution is causing confusion in each example. I have tried various solutions, with the most promising one being using Omit which I thought would ...