populate a data list with information sourced in Angular 8

I am looking to populate this model

oldDataSource: Array<any> = [];
with the values from the datasource.

This is the code I have tried:

ngOnInit(): void {
    this.dataSourceInit();
}

dataSourceInit(): void {
    this.dataSource = new DefaultScoreCoinDataSource(this.defaultScorService);
    this.dataSource.loadDefaultScoreCoins(1, this.pageSize, this.filters);
}

private loadDataSource(): void {
    this.dataSource.loadDefaultScoreCoins(
        this.paginator.pageIndex + 1,
        this.paginator.pageSize,
        this.filters
    );
}


ngAfterViewInit(): void {
    this.oldDataSource = this.dataSource['defualtScoreSubject'].value;
}

However, this approach did not work for me as it did not populate this.oldDataSource. The issue arises when running ngAfterViewInit, as the datasource may take some time to fetch data from the server. Therefore, this.oldDataSource remains null until the data is retrieved.

Is there a way to effectively populate this.oldDataSource with the values from the datasource?

Answer №1

First of all, it seems like there may be a misspelling in the property accessor within the brackets ('defualtScoreSubject' should actually be 'defaultScoreSubject').

Moreover, your data retrieval method seems to be unconventional for Angular. I recommend creating a service that returns Observables and then either subscribing to the observable to handle your data or directly passing the observable to the template using async pipes. To learn more, you can also explore and compare these two techniques to determine the best approach for your project.

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

Retrieving Posts from Extensive JSON Data

I'm currently working on a project where I am coding a system to monitor updates on the Ontario Immigrant Nominee Program Updates page and then send out email alerts whenever a new article is posted. Initially, I implemented this in PHP but now I want ...

What is the best way to conceal the standard 'X' close button within a magnific popup interface?

I implemented the Magnific-popup plugin in my jsp to show messages to users. Here is the code I used to open Magnific Popup: $.magnificPopup.open({ items: { type: 'inline', src: '#idOfSomeDivInPage' }, focus: '#some ...

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet: TS file: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRife ...

Issue with TagCloud functionality when deployed on Vercel platform

Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud wit ...

RegEx in JavaScript to identify and match the innerHTML property of all elements

I am currently in the process of developing a Chrome extension that needs to identify specific pages within a website, including the Log In / Sign In page, the Sign Up / Register page, the About page, and the Contact Us page. My approach involves obtainin ...

The actions performed within an event listener function are undone once they have been carried out

I'm a newcomer to Javascript and I am currently experimenting with it. While browsing through a tutorial on w3schools, I came across an example of changing the color of a button after clicking on it. My idea was to take it a step further by loading a ...

The Vue.js application is failing to toggle the integrated code

I am new to using Vue and I am trying to create a vertical navigation bar. When the menu icon is clicked, the navbar should toggle. Here is my menu icon code: <button type="button" id="sidebarCollapse" class="btn btn-info [collapsed?'': ...

"Angular encountered an error while attempting to access the property 'data' from an undefined

I'm encountering an issue when trying to retrieve data from a JSON file. Upon clicking a button to display the data in a textarea, the first click does not yield any result, but subsequent clicks work as expected. The program functions by fetching an ...

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

When moving the cursor quickly, a vertical line does not appear upon hover

I am facing an issue with the vue-chartJs library. When I move the cursor fast, the vertical line on hover does not show up. However, when I move the cursor slowly, it works perfectly. Can anyone offer assistance in solving this problem? onHover: functi ...

Tips for retrieving data from multiple text boxes in a loop in React js and transmitting it to an API

I am in the process of developing a quiz application where I aim to create multiple question input fields based on the administrator's inputs. For example, if the admin provides 10 questions for the quiz, I will then generate a form within a loop fo ...

REDUX: The dispatch function is failing to update the store

Working on a project developing a chrome extension that involves dispatching functions in popup.tsx. However, the store does not update when I try to dispatch. Interestingly, the same code works perfectly fine in the background page. Any suggestions on wha ...

Click the button to instantly scroll to a particular word with highlighting, and with another click, jump to the next occurrence

In order to achieve the objective, simply click on a button that will search for and scroll to a specific word while highlighting it. The same button can be clicked again to find the next occurrence, and so on. If you need an example of how this works, ch ...

The function array.filter is returning the complete object rather than a single value

I'm facing an issue with a function that filters an array. My goal is to retrieve only the string value, not the entire object. However, I keep getting back the entire object instead of just the string. Interestingly, when I switch the return state ...

Updating Google+ url parameter dynamically without the need to reload the page

Is there a way for a user to share a link on social media platforms like Facebook and Google+ without having to refresh the page? The user can customize the link with an ajax call, ensuring that the page remains static. Here is my code for the Google Plu ...

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...

Encountering a Angular 12 Observable<Object[]> Error while attempting to execute a GET request

I've been grappling with this error I encountered while working on Angular 12. Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. This is the code f ...

The Express application remains silent unless a port is specified for it to

Having recently started working with Node, I encountered an issue with Express. My application is only listening to localhost:PORT and I want it to also listen to just localhost. Here is the code snippet: ** var app = require('../app'); var debu ...

Error: Android package not found when building a NativeScript app with TypeScript

I encountered the following error message: main-page.ts(15,26): error TS2304: Cannot find name 'android'. This error occurred after setting up a new NativeScript project using TypeScript. tns create demo --template typescript I then added the ...

What is the best way to locate a div element with a specific style?

What is the method to locate a div element by its style? Upon inspecting the source code in IE6, here is what I find: ...an><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google"... How can this be achieved using JavaScript? ...