Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

Currently, I am facing an issue in my code where I am trying to introduce a delay using timer(500). However, the problem is that it is only returning partial data. Instead of the expected 17 fields, it is only returning 2 fields. Below is my code snippet for reference. Please take a look. Thank you.

Returned value:

 ['booking_display_id', 'edit']

Expected value:

 ['booking_display_id', 'bookingstatus', 'b_contactname', 'member', 'b_emailaddress', 'b_mobilenumber', 'startdate', 'enddate', 'duration', 'bookingguest', 'guestnotes', 'vouchers', 'paypalpaymentpdt', 'totalCost', 'canPay', 'canCancel', 'edit']

 this.displayedColumns = combineLatest(this.table.columns.reduce((observables: Observable<boolean>[], col) => {
  // handle showIf property of column
  const show = col.showIf(this.injector, this.route.queryParamMap);
  observables.push(show instanceof Observable ? show : of(show));
  return observables;
}, []), timer(500)).pipe(
  map(showCols => {
    const cols = this.table.columns.filter((c, i) => showCols[i])
      .map(c => c.id);
    this.editEnabled && cols.push('edit');
    this.deleteEnabled && cols.push('delete');
    console.log('cols', cols)
    return cols;
  })
 );

Answer №1

It seems like the issue you're facing is due to passing an array of observables along with another observable to combineLatest. However, combineLatest only accepts a one-dimensional array of observables. To resolve this, you can either wrap your reduce function with another combineLatest or use the spread operator ( => [...obs, timer] where obs represents your reduce function) to combine them into one array.

Here is your current call in simplified form:

combineLatest([
    [of(1), of(2), of(3)],
    timer(500)
]);

I suggest using the spread operator to create a new array or utilizing another combineLatest since it involves an additional array of observables.


Additionally, I recommend using delay instead of

timer</code (as delay runs only once).</p>
<p>If you prefer your values to be separate from the timer:
<code>combineLatest([combineLatest(..obs), timer])

combineLatest([
    combineLatest([of(1), of(2), of(3)]),
    timer(500)
]).pipe(
    map(([yourValues, timer]) => {
        // ...
    })
)

If you do not want your values to be separate from the timer: combineLatest([...obs, timer])

combineLatest([
    ...[of(1), of(2), of(3)],
    timer(500)
]).pipe(
    map(([yourValuesWithTimer]) => {
        // ...
    })
)

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

What is the best way to organize objects by their respective dates?

I am retrieving data from a database and I would like to organize the response by date. I need some assistance in grouping my data by date. Below is an example of the object I have: var DATA = [{ "foodId": "59031fdcd78c55b7ffda17fc", "qty" ...

Angular: Issue with subscribed variable visibility on screen

I am currently developing user management functionality. When a button is clicked, the goal is to save a new user and display an incoming password stored in the system. Below is a snippet of my code: onClick() { /*Code to populate the newUser variable from ...

AngularJS: Calculate the total sum of array elements for generating charts

When using tc-angular-chartjs, I have successfully implemented a pie chart but am struggling to sum the label values for proper display. Additionally, while I can create a bar chart using their example, I encounter issues when trying to use external data f ...

Guide on accessing values from an array of objects in JavaScript/Node.js

I am working with an array of objects that looks like this: const objArray = [{prop: "a", prop2 : "1"}, {prop: "b", prop2 : "2"}, {prop: "c"}, prop2 : "3"] My goal is to extract the property names of the objects in the array, rather than their values. D ...

What is the best way to ensure that messages stay saved in my app for an extended

I am looking for a way to store messages sent through my small messaging app in a persistent manner. Currently, the messages are transferred from the front-end to a Node, Socket.io, and Express back-end. A friend recommended using Enmaps (), but unfortuna ...

Using single quotation marks within a string can cause issues in javascript

I am curious about how to handle single quote marks and other symbols within user-generated text without causing issues with the JavaScript code. Currently, if a user enters a title like "I wouldn't", it breaks the JavaScript functionality. <a cl ...

Importing or loading a JavaScript file in Vue.js is a crucial step

I'm in need of some assistance. I've been attempting to load my javascript file and listen for changes on the checkbox when it's clicked to show or hide a password. However, I can't seem to get it to work. I've tried everything I c ...

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

Utilize Jquery to send a preset value through an ajax request

I am working on a select box functionality where the selected option is sent via ajax to a server-side script. The current setup is functioning properly. Here is the code for the select box: <select id="main_select"> <option selecte ...

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

Angular 9 ensures that the component template is validated and loaded before the constructor logic is executed

Recently switched from Angular 8 to Angular 9 (without IVY) and encountered some unusual errors indicating that services injected in components are undefined in getters. Upon investigation, I discovered that the getter is being called before the constructo ...

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

The favicon refuses to load

Image 'http://localhost:8000/favicon.ico' could not be loaded as it contravened the Content Security Policy directive "default-src 'none'". It is important to note that since 'img-src' was not specifically defined, 'defau ...

JSON objects not loading properly in Bootstrap table

I am facing an issue where my ajax script successfully sends JSON objects to the browser, but the table fails to load the JSON object. Here is my Ajax script: $.ajax({ type : "POST", url : "getLabels.jsp", data : "mail ...

localStorage is functional on desktop devices; however, it does not work on mobile devices running iOS version 12

After developing a basic Todos application using React, I decided to introduce the use of localStorage to maintain data persistence between page reloads. Below is an overview of how I implemented it: loadStateFromLocalStorage() { for (let key in this.st ...

Issue with TypeScript in Vue3: Unable to access computed property from another computed property

In my Vue3 project with TypeScript, I am encountering an issue where I am unable to access the properties of the returned JavaScript object from one computed property in another computed property using dot notation or named indexing. For instance, when tr ...

Exporting State From Another ReactJS Module: A Step-by-Step Guide

A new project is underway with 3 students who are diving into the world of React for the first time. To make our work more efficient, I suggested dividing the code so that each student could work on a different aspect simultaneously. However, when I attemp ...

Troubleshooting: Angular Firebase's signInWithRedirect() and getRedirectResult() functions are experiencing technical difficulties

Within my AuthService, I have implemented a function for signing in with Google which, depending on the user's device, initiates the sign-in process either with a redirect or a pop-up. The pop-up sign-in functionality is operating smoothly, however, ...

Create a unique look for Angular components by customizing the hosting style

Is there a way to dynamically style the component host from within the component itself using the :host selector in a .css file? For instance, for a component like <app-test> </app-test>, I would like to be able to set the top property on the ...

Having trouble extracting parameters with TypeScript in React Router even when they are present

I am in the process of migrating an older project to utilize react and react-router. Additionally, I am fairly new to typescript, which is the language used for this particular project. Any guidance or explanations on these topics would be highly beneficia ...