Unable to load dynamic JSON data in ag-grid for Angular 2

ngOnInit(){
    this.gridOptions = {};
    this.gridOptions.rowData = [];

    this.gridOptions.rowData = [
      {configName: 1, configName1: "Jarryd", configName2: "Hayne", configName3: "tttttt", configName4: "rrrtttt",
       configName5:"drrrrrr"}];
}

Currently, a hard coded value is being loaded into the table. However, dynamic values from the service are not being loaded.

this.service.getData(fields).subscribe(data => {
    data.be.forEach(element => {

        let tableData = {configName: element.configName, configName1: element.configName1, configName2: element.configName2, configName3: element.configName3, configName4: element.configName4, configName5:element.configName5}

        this.gridOptions.rowData.push(tableData )
    }
}

Answer №1

In my opinion, it is more efficient to generate an internal list in this manner:

internalConfigOptions:string[];

this.dataService.retrieveData(fields).subscribe(response => {
response.items.forEach(item => {

    let rowData = {name: item.name, value: item.value}

    this.internalConfigOptions.push(rowData);
    this.gridOptions.api.setRowData(this.internalConfigOptions);
}
}

Answer №2

Take a look at this post discussing a similar problem. It appears that your method for updating ag-grid may be incorrect.

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

The art of connecting with Angular 2 router and Components

Here are the elements I have: <app-scrollable-area (scrolledDown)="..." class="scrollable-y"> <router-outlet></router-outlet> </app-scrollable-area> I'm wondering how to communicate this event (scrolledDown) to inside ...

Obtaining the value of a select option in Angular 2 from a button placed outside of a

Take a look at this snippet of code: (click)="deleteDescriptor(descriptor.DescriptorId, #fc+i) I am dynamically creating all of the selects. Therefore, my goal is to retrieve the value of the select when users click on the delete button located right next ...

What is the best way to iterate over a multidimensional array in Angular/Ionic?

I've been struggling to find a solution tailored for looping in a .ts file instead of HTML. My main objective is to iterate over an array and compare the entered value with the keys. If there's a match, I want to retrieve the values stored withi ...

Having trouble loading the Phoenix JS library using SystemJS in an Angular 2 application

After completing the Angular2 quickstart typescript tutorial, which can be found here, I am now attempting to integrate the phoenix.js package in order to connect to my Elixir Phoenix channels. I have added the phoenix package from this source to my packa ...

Draggable bar charts in Highcharts allow users to interact with the data by clicking

I'm working on creating a chart that allows for setting values by clicking and dragging. While the dragging functionality is working fine, I've run into an issue with the click event. When I click to set a new value, the draggable feature acts er ...

Manipulate Angular tabs by utilizing dropdown selection

In my latest project, I have developed a tab component that allows users to add multiple tabs. Each tab contains specific information that is displayed when the tab header is clicked. So far, this functionality is working perfectly without any issues. Now ...

invoking a function at a designated interval

I am currently working on a mobile application built with Ionic and TypeScript. My goal is to continuously update the user's location every 10 minutes. My approach involves calling a function at regular intervals, like this: function updateUserLocat ...

Customizing a generic method in typescript

I am currently working on developing a base class called AbstractQuery, which will serve as a parent class to other classes that inherit from it. The goal is to override certain methods within the child classes. class AbstractQuery { public before< ...

Can one obtain a comprehensive array of interfaces or a detailed map showcasing all their variations?

I have developed a method that takes in an object containing data and returns an object that adheres to a specific interface. interface FireData { id: EventTypes; reason?: string; error?: string; } enum EventTypes { eventType1 = "ev1", ...

Playing around with TypeScript + lambda expressions + lambda tiers (AWS)

Having trouble importing modules for jest tests in a setup involving lambdas, lambda layers, and tests. Here is the file structure: backend/ ├─ jest.config.js ├─ package.json ├─ babel.config.js ├─ layers/ │ ├─ tsconfig.json │ ├ ...

Angular - Issue with setting default value in a reusable FormGroup select component

My Angular reusable select component allows for the input of formControlName. This input is then used to render the select component, and the options are passed as child components and rendered inside <ng-content>. select.component.ts import {Compon ...

`Database Schema Enforcement in Firestore: Custom Objects vs Security Rules`

Firestore, being a noSQL database, is schemaless. However, I want to ensure that the correct data type is being passed in. Custom Objects As per Firebase documentation, https://firebase.google.com/docs/firestore/manage-data/add-data class City { const ...

Issue with Next.js: Callback function not being executed upon form submission

Within my Next.js module, I have a form that is coded in the following manner: <form onSubmit = {() => { async() => await requestCertificate(id) .then(async resp => await resp.json()) .then(data => console.log(data)) .catch(err => console ...

What are the steps for deploying an Angular 2 project to a server with PUTTY?

After developing an Angular 2 app with Angular-CLI on my local server, I have reached the production phase and now need to upload it to a CentOS server using Putty. I attempted to follow instructions from this source for installing node and npm on the ser ...

Angular class mapping of web API response

I have a web API action method that returns a chapter ID and chapter name. I would like to convert this into an Angular class with an additional field called 'Edit', which by default is set to false. export class Chapter { chapterid: number; ...

Developing an angular progress bar

I've been working on creating a progress bar in Angular using the mmat-stepper. Here's a snippet of my code: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppCom ...

Is Angular 12's ::ng-deep deprecated, or is it still the sole option that's effective?

I've been experimenting with updating the text in ngx-charts and found a solution that works: ::ng-deep .ngx-charts { text{ fill: #ff0000; } } The only drawback is that ::ng-deep is considered deprecated? :host isn't effective ...

Tips for embedding an Angular application within another Angular application

I am working on two Angular projects at the moment. The first one is named App1, while the second one is called Angular Form Editor. My goal is to integrate the Form Editor into the App1 project. What steps should I take in order to achieve this integrat ...

What is the best approach to repurpose a jest test for various implementations of a shared interface?

I'm facing a challenge: describe("Given a config repository", () => { let target: ConfigRepository; beforeEach(() => { target = InMemoryConfigRepository(); }); test("When creating a new config, Then it is ...

Creating a regular expression to capture a numerical value enclosed by different characters:

export interface ValueParserResult { value: number, error: string } interface subParseResult { result: (string | number) [], error: string } class ValueParser { parse(eq: string, values: {[key: string] : number}, level?: number) : ValueParse ...