Retrieve events from database within angular-calendar

My challenge lies in loading events from the database onto my calendar view using angular-calendar. I have created an API that returns resources, but I am struggling to bind them onto CalendarEvents. Here is the part where I am attempting to do so: https://i.sstatic.net/bhaq8.jpg

The browser console is showing me an "undefined" error: https://i.sstatic.net/vdG7Q.jpg

I was able to make it work in some manner, however, it is not adding to an array. Instead, it just replaces the existing one with a new one. I understand why this is happening but I am finding it challenging to fix. Here's what I mean: https://i.sstatic.net/CZggx.jpg

I'm wondering how I could push to it or add at a specific index.

angularjsarraystypescriptcalendar

Answer №1

If anyone is in need of help, I managed to figure it out. For some reason, pushing directly to the original array wasn't saving the data into it. So, I had to create another array and save the data into it once the loop was over. Also, in order for it to not be "undefined" and allow me to push to it, I had to initialize it as " = []" (equal to an empty array) at the beginning.

events: any;
items: Array<CalendarEvent<{ time: any }>> = [];

this.eventsService.requestEvents().subscribe(res => {
  for(let i=0; i<res.data.length; i++) {
      this.items.push(
      {
        title: res.data[i].name,
        start: new Date(res.data[i].date),
        color: {primary: '#e3bc08', secondary: '#FDF1BA'},
        meta: {
          time: res.data[i].date
        }
    });
    this.events = this.items;
  }
});

Answer №2

Since I can't display your exact code here, I'll provide a pseudo-code version for clarity. When handling the subscribe function, make sure to follow these steps:

this.tasks = [];
for (let j=0; j<items.result.length; j++) {
    this.tasks.push({
        name: items.result[j].title,
        deadline: items.result[j].dueDate,
        color: { ... }
    });
}

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

Selecting an option with a specific index in Angular 2 RC2

I have encountered a situation where the select options are non-unique, with the same value representing different things. This is how our data is structured and I need to work within those constraints. <select id="mySelect"> <option value = "1 ...

typescriptangular

Retrieving projectname values with specific name from a table

Currently, I am in the process of developing a website for myself and my friends to collaborate on projects together, similar to Google documents. One challenge I am facing is retrieving project names from a MySQL table. This is what I have attempted so f ...

phpmysqlarrays

Which consumes greater memory - a string or a bytearray in C#?

Java: Which data type requires more memory - String or byte? If I have a sentence that says "Hello World", would it consume more memory if stored as a byte or a string? ...

c#.netstringarrays

Arranging an Array with Multiple Dimensions based on User Name and Score

In my array, I have a list of users' names and scores. I've successfully sorted it based on the highest score. However, for users with the same score, I want them to be sorted alphabetically by name, and for those with a score of 0, they also ne ...

phparrayssorting

Expanding the size of an array list item in React

I have an array containing various currencies: const currencies =['USD','EUR','AUD','CNY','AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'A ...

javascriptarraysreactjs

Using Vue/Nuxt.js to compute the cumulative sum of hierarchically structured JSON data

When using Nuxt async data, I am retrieving a JSON object that includes a nested array in the following structure: "topic_list": { "topics": [ { "id": 9148, "title": "A", "views": 12 }, { "id": 3228, ...

javascriptarraysjsonvue.jsnuxt.js

Retrieve Image URL from RSS Medium Feed

I am attempting to showcase the images from each post in medium's RSS feed using only JavaScript or Angular, without relying on JQuery. I am able to retrieve the title, creation date, and link for each post. Currently, I am developing with Ionic2. en ...

javascriptangularjsionic2rssmedium-editor

Set the constant value during the configuration stage

I have a special Angular constant that requires configuration after the initial app setup. This constant includes various endpoints, some of which are only determined after the app performs certain checks. Currently, I am handling this by returning some e ...

angularjs

The Disassembler for Angular 1.5 Services

I am currently working on an Angular 1.5 service that encapsulates a SignalR proxy. One issue I have encountered is the need to ensure that when the Angular application is terminated, all of the SignalR groups that the user has joined are explicitly left r ...

angularjs

Prevent the query from being executed by halting the AJAX call

Within my web application, I have a specific button that triggers an AJAX call upon being clicked. On the server side, I need to run a query against a database. I am concerned about the execution time of these queries and worry that users may be impatient ...

javascriptc#angularjsajax

Icons that are clickable in ionic

I have successfully created a list card with 2 icons in each row. However, I am facing a challenge in making these icons clickable without disrupting the layout of the list. I attempted to add an ng-click to the icon element, but it did not work as expecte ...

cssangularjsionic-framework

The helm encountered an issue while converting the YAML file to JSON, displaying the error message: "YAML error on line xx

I am trying to utilize a json encoded string from my values.yaml file -> values.yaml network: cidrs : "[\"123.123.123.123/32\",\"123.124.125.125/32\"]" The goal is to use this value as a list of stri ...

arrayslistgokubernetes-helmjsondecoder

Unable to trigger ng-click event on an element that has been compiled in a controller

Is there a way to utilize $compile in order to enable ng-click functionality on a specific code block? Currently, my code is set up to display a suggestion box when certain event parameters are met. However, I am looking to give users the ability to hide t ...

angularjs

AngularJS - validation not tied to specific form elements

Is there a method to implement validation - whether it's custom or not - that isn't associated with a form field? For example, validating that a specific condition is met while still utilizing standard AngularJS validation? Update: Here's ...

angularjsvalidation

Is it possible to attach a mouseup event to the document body using Angular?

I'm working with a jQuery snippet that hides an element when clicked outside of it: jQuery(document).mouseup(function (e) { var container = jQuery('.dropDown'); if (!container.is(e.target) // if the target of the cl ...

javascriptjqueryangularjs

Loop through an array of objects in Node.js

Having a bit of trouble with this, been stuck for quite some time. I'm attempting to loop through an array of objects in Node.js to extract the value of one of the keys and apply a regex operation. Unfortunately, I keep encountering errors that ment ...

javascriptnode.jsarraysmongodbobject

What is the method for retrieving an attribute's value from an object that does not have key-value pairs?

My current project involves working with dynamoose and running a query that produces the following output: [ Document { cost: 100 }, lastKey: undefined, count: 1, queriedCount: undefined, timesQueried: 1 ] When I use typeof(output), it returns O ...

javascriptnode.jstypescriptdynamoose

Utilizing Angular.js to Bind AJAX Content to Web Pages

I recently experimented with coding using angular.js version 1.5. <div class="container clearfix" id="mainMenu" ng-controller="MainMenuController as mainMenu"> <ul class="menu clearfix" ng-init="tab = 'ant'"> <li class ...

javascriptangularjsajax

Generate the JavaScript file only if the Typescript file is error-free, to ensure a smooth compilation process

Take a look at the following TypeScript code snippet: class formal { private startString: String = ""; constructor(startString:String) { this.startString = startString; } public sayHello = function() :Number { alert(thi ...

javascripttypescript

Using Angular 1.4 - How to utilize a single controller with $routeProvider

How can I use the same controller on both full and mobile views using $routeProvider? The code below does not work as expected. What am I missing? Alternatively, is it possible to have the same controller but with different templateUrl based on the user a ...

angularjsroute-provider