Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below:

{
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "lat":"25.6599899",
            "lng":"45.3664646",
            "status":"0"

        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "lat":"25.99899",
            "lng":"45.4646",
             "status":"1"

        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "lat":"25.2339899",
            "lng":"45.56664646",
            "status":"1"

        }
    ]
}

To create dynamic buttons based on the status value, if status=1 and there are 3 members with that status, then 3 buttons will be created with their respective names and IDs. When a user clicks any button, an alert displaying the name and details of that person will appear.

javascriptangulartypescript

Answer №1

It seems like you are looking to create a button for each status equal to 1, which when clicked, will display the name of the person.

Sample TypeScript code

Variable

public dynamicData = {
"data": [
  {
    "id": 4,
    "first_name": "Eve",
    "last_name": "Holt",
    "lat": "25.6599899",
    "lng": "45.3664646",
    "status": "0"

  },
  {
    "id": 5,
    "first_name": "Charles",
    "last_name": "Morris",
    "lat": "25.99899",
    "lng": "45.4646",
    "status": "1"

  },
  {
    "id": 6,
    "first_name": "Tracey",
    "last_name": "Ramos",
    "lat": "25.2339899",
    "lng": "45.56664646",
    "status": "1"

  }
]
};

Method

onButtonClick(data: any): void {
   alert(data.first_name + ' status is ' + data.status);
}

HTML Code

<ng-container *ngFor="let data of dynamicData.data">
     <button [id]="data.id" class="btn btn-primary" (click)="onButtonClick(data)">
        {{data.first_name}}
     </button>
  </ng-container>

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

Error: The "map" property cannot be read if it is undefined in a Django and React application

While I was following the react and django tutorial, I encountered an issue when I added some code for concern with. The error message 'Cannot read property 'map' of undefined' keeps getting thrown. The error location is pointed out ...

javascriptreactjs

How to efficiently pass dynamic props in Next.js persisting layoutuciary

When setting up a persistence layout, I utilize the getLayout function on each page as shown below: import { Layout } from 'hoc'; const Page = () => { return ( <div>hello</div> ); }; Page.getLayout = function getLayout(pa ...

javascriptreactjsnext.js

Angular: Maximizing Input and Output

I'm having trouble with the function displaying within the input field. My goal is to simply allow the user to enter a name and have it displayed back to them. HTML: <div ng-app = "mainApp" ng-controller = "studentController"> <tr> < ...

javascripthtmlangularjsinputoutput

Using AngularFire and Firebase to convert observable arrays

My tech stack includes angular CLI, angularFire, and Firebase. I store my data in a real-time database. https://i.sstatic.net/fEbhN.png I retrieve data from Firebase using an observable: //Service.ts import { Injectable } from '@angular/core' ...

arraysangularfirebaseangularfire2

What is the best method for executing an HTTP request to retrieve the complete source page if certain aspects are loaded through JavaScript?

I am trying to retrieve the HTML webpage from . However, a portion of the HTML file is loaded through JavaScript. When using HTTP.jl to fetch the webpage with HTTP.request(), I only receive the part of the HTML file that was loaded before the execution of ...

javascriptseleniumhttpweb-scrapingjulia

Struggling to display Firebase Auth information resulting in 'undefined' value within React web application

When loading a user's profile page, I am trying to display their displayName and email information retrieved from Firebase Auth. I have implemented this logic within the 'componentDidMount' method by updating the state with the response dat ...

javascriptreactjsfirebasefirebase-authentication

Tips for generating a single sitemap in Next.js

Utilizing the next-sitemap package to generate a sitemap, I have both dynamic and static pages. This is what my next-sitemap.config.js file looks like: module.exports = { siteUrl: 'https://example.com', generateRobotsTxt: false, excl ...

javascriptreactjsnext.js

An issue has been encountered with the Vue Router within the Micro Front End/Web Components setup, displaying the error message: "Uncaught TypeError:

I encountered an issue that I need help with. Here is the scenario: I have built a Vue application called my-admin micro app consisting of 4-5 screens/components (manage user, manage notifications, manage roles, etc.). I created a router.js file where I d ...

javascriptvue.jsvue-routerweb-componentmicro-frontend

What is the solution for resolving the Angular error 'Cannot read property "_co.x" of undefined'?

Currently, I am facing an issue with nested JSON objects on a form that sends data to a database. Despite trying the *ngIf statement as recommended in Angular 5 - Stop errors from undefined object before loading data, the view does not update even after th ...

jsonangular

Rendering user actions instantly in React.js without waiting for server propagation

I am currently developing a shopping list web application where users can toggle items as 'checked' or 'unchecked'. The flow of data in this application is as follows: click on item checkbox --> send database update request --> ...

javascriptreactjsasynchronousweb-applicationsreact-lifecycle

Creating a read-only DIV using Angular - a step-by-step guide

Is there a simple way to make all clickable elements inside a div read only? For example, in the provided HTML code, these divs act like buttons and I want to disable them from being clicked. Any tips or shortcuts to achieve this? Thank you. #html < ...

javascriptangulartypescript

An unexpected runtime error occurred: TypeError - Unable to use map function on events

When fetching data using graphQL and rendering it on the page, an error occurs: Unhandled Runtime Error TypeError: events.map is not a function I'm unsure if my useState declaration is correct. const [events, setEvents] = useState < any > ([]) ...

reactjstypescriptnext.js

The scroll header remains fixed in size despite being responsive

I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens. $(document).scroll(function() { navbarScroll(); }); function navbarSc ...

javascriptjqueryhtmlcss

Undefined Perception

Trying to obtain values from an observable, my subscription code within the component looks like this: this.checkoutService.getDisabledDate().subscribe (dates=>{this.formattedDate=dates}, (error:any)=>{console.log(error)}); When logging this.forma ...

angulartypescriptrxjs

Is it a breach of separation of concerns to validate using ng-pattern?

I have a requirement in Singapore to validate contact numbers entered by users. The number must start with 6, 8, or 9 and should have a total of 8 digits. I am currently utilizing ng-pattern on an input field with a regex solution, but I am concerned abo ...

javascriptangularjs

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

I am currently exploring React Router, but I am struggling to grasp this particular behavior

My Express server serves the Create-React-App build. When I access http://localhost:8000/ while the server is listening, my page loads correctly. However, if I reload the page or navigate directly to it from the navigation bar, instead of seeing the UI, pl ...

javascriptnode.jsexpresscreate-react-appreact-router-dom

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

javascriptjqueryhtmljquery-uidatepicker

Is it possible for Angular's ngStyle to accept multiple functions? If not, what is the alternative solution?

Can multiple conditions be added to different attributes with ngStyle? Is it possible to change text color and background color based on specific JSON values using ngStyle? About the Project: I am currently working on creating a tab bar that resembles a ...

htmlangulartypescriptng-style

Sending Information within Controllers with AngularJS

I have a unique scenario in my application where I need to pass input from one view to another. I have set up a service as shown below: .service('greeting', function Greeting() { var greeting = this; greeting.message = 'Default&ap ...

javascriptangularjs