How can I loop through a JSON object in Angular 8 using a function?

Within my component.ts file, I have developed a function:

getData(id) {
    const idMod = id
    const idModN = document.getElementById("idMod").innerHTML = idMod
    console.log (idModN)
}

My goal is to click on a button and have the id of each element from the JSON inserted. Ideally, the code would look like this:

<button(click)="getData({{ forecast.id }})">Test</button>

Unfortunately, when I attempted to use {{ forecast.id }} within the brackets, it resulted in an error. Oddly enough, manually inputting a number worked flawlessly. How can I modify the code to accept {{ forecast.id }}? I have multiple ids that I need to fetch using a for loop.

Answer №1

To access the unique id within the forecast, avoid using parentheses as it is not the correct way to pass parameters in Angular.

Try rephrasing your HTML code like this:

<button(click)="getData(forecast.id)">Test</button>

Hopefully, this explanation clarifies things for you.

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

Fixing a wrong path in the problem matcher of vscode while compiling using $tsc-watch: A step-by-step

My project workspace directory can be found at C:\salix\fantasy. The TypeScript configuration file is located at C:\salix\fantasy\tsconfig.json Despite my efforts, I'm struggling to have the problem matcher for my project dir ...

Typescript: Subscribed information mysteriously disappeared

[ Voting to avoid putting everything inside ngOnit because I need to reuse the API response and model array in multiple functions. Need a way to reuse without cluttering up ngOnInit. I could simply call subscribe repeatedly in each function to solve the p ...

Is it possible to create a nested object inside of an array?

Looking to accomplish the following: let listOne: any = ['item1', 'item2', 'item3']; let details: any; // Previously, I had a loop running and 'row' was the response outputting items // in the listOne array const ...

What modifications need to be made to the MEAN app before it can be deployed on the server?

Following a tutorial on Coursetro, I was able to successfully build an Angular 4 MEAN stack application. However, when it comes to deploying the app on a server running on Debian-based OS, I am facing some challenges. The application should be accessible o ...

Changing Angular Material datepicker format post form submission

After selecting a date, the input field is populated with a format like DD/MM/YYYY Now, when attempting to send this data through a form and logging it in my component, datapicker.component.ts onFindAWhip(form: NgForm){ const value = form.value; ...

Can someone explain the meaning of these AngularCli errors, especially when no issues are detected in VsCode?

Following up on my previous question posted here: Additionally, I am encountering these errors specifically in the Terminal. While I am not new to Angular, I am fairly new to FireStore and Firebase :) After setting up a Firebase account for the first tim ...

Is it feasible to utilize mat-selection-list with an object instead?

I've been exploring the mat-selection-list feature available in the material.angular.io documentation at material.angular.io/components/list/overview Instead of using a string array, I'm aiming to utilize an array of objects. The documentation c ...

Error message: Npm test is unable to locate the socket.io.js file

Currently, I am attempting to create tests using Karma and following Angular's testing guide. I am starting with a very basic test class, but I am encountering difficulties when trying to run it. Here is the test class: describe('1st test' ...

Navigating with Angular 2 (Error: 404 Page Not Found)

I'm currently working on an Angular2 app where I need to pass two parameters from one component to another through routing. Here are the main routes of the app: export const ROUTES: Routes = [ { path: '', component: HomeComponent }, ...

Needing to utilize the provide() function individually for every service in RC4

In Beta, my bootstrapping code was running smoothly as shown below: bootstrap(App, [ provide(Http, { useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHt ...

Problem with Clerk's authentication() functionality

Currently facing an issue with the Clerk auth() helper (auth() documentation) while working with react and next 13 (app router). When trying to access both userId and user from auth(), const { userId, user } = auth();, it seems that userId contains a val ...

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

I am working on an Angular app (using Angular 11.2.4 with Bootstrap 4.5.3) and facing an issue where the navbar is not rendering correctly on screens smaller than ~580 pixels wide. Even when I click the toggler to 'expand' the collapse region, n ...

What are the reasons for being unable to utilize display flex within Angular?

Recently delving into Angular, I have been trying to apply display flex to <mat-form-field> without success. I have scoured Google for answers, but still haven't found a solution. Here is my HTML: <form [formGroup]="searchForm" (n ...

IE11 does not support Angular2 Final

After working for a period of time, my implementation suddenly stopped. It seems that I may have imported a component or made some other change causing the issue. Strangely enough, it functions properly on Firefox, Chrome, and Edge, but encounters an error ...

The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page. Take a look at my code: home.scss :root { --prim-headclr : ...

How to target a particular Textfield in React with its unique identifier

I'm working on a component that contains various Textfields and need to access specific IDs. For example, I want to target the textfield with the label 'Elevator amount'. I attempted the following code snippet but am unsure of how to correct ...

What is the best way to access a private class variable within the sockent.on function in Angular?

export class AppComponent { title = 'my-app'; constructor(private notifyService : NotificationService) {} ngOnInit() { socket.on("laravel_database_chat:test", function(message){ //I AM ATTEMPTING TO INVOKE THE NOTIF ...

A guide on refreshing the dependencies list within Angular's node modules and package.json files

A close friend sent me the angular src folder, which I used to create a new Angular project. However, when I replaced my newly created src folder with my friend's and tried running the application using npm start, I encountered errors related to missi ...

Encountering Problems when Converting Vue Application from JavaScript to TypeScript with Vue and Typescript

Currently, I am in the process of converting a Vue project from JavaScript to TypeScript without utilizing the class-style syntax. These are the steps I took: I ran: vue add typescript I went through all my .vue files and: Indicated that TypeScript ...

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...