Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Auto Increment user id for the Array of User Input using Angular Service

How do I increment the user id for the new user input and use that value to delete or update the specific enter.

Like if user adds its details like in given below output picture link you can see the how output should it show I couldn’t figure out how to give auto user id to the every user inputs.
[this is store component][1]
[Output for reference][2]
below code is userservice

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  userArray : any[] =[];
  userId : number[]=[];
  constructor() { }
  public getUsers() : any[]{
    return this.userArray;
  }
 
  public save(obj : any):void {
    this.userArray.push(obj);
  }
store component code
export class StoreFormComponent implements OnInit {

  constructor(private builder : FormBuilder,private service : UserService) { }

  ngOnInit(): void {
  }
  userForm : FormGroup = this.builder.group({
    id:[''], **//problem this is where i want to store my incremented IDs and use them for CRUD operations**
    name : ['Lucifer'],
    gender :['male'],
    phone:['1231231'],
    email:['abc@gmail.com'],
    address: this.builder.group({
      state:['LA'],
      city:['CA'],
      pin:['123123']
    })
  });
  
  saveForm(){
    this.service.save(this.userForm.value)
    console.log(this.userForm.value)
  }
  clear(){
    this.service.save({})
  }
}
html this is table for display the output  like if user adds its details like in given below output picture link you can see the how output should it show i couldnt figure out how to give auto user id to the every user inputs 
<div>
    <h3>User List</h3>
   
    <table *ngIf = "items" class = "table table-striped">
        <thead>
            <tr>
                <th>User Id</th><th>Name</th><th>gender</th><th>phone</th><th>email</th><th>state</th><th>city</th><th>pin</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor = "let user of items">
                <td>{{user.id}}</td> //problem I want to give auto increment IDs to user inputs 
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.phone}}</td>
                <td>{{user.email}}</td>
                <td>{{user.address.state}}</td>
                <td>{{user.address.city}}`enter code here`</td>
                <td>{{user.address.pin}}</td>
            </tr>
        </tbody>
    </table>
</div>

this below are the pictures for storecomponent picture and the output picture
[1]: https://i.stack.imgur.com/NK2Qi.jpg
[2]: https://i.stack.imgur.com/cFjjD.jpg

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

you can try something like this. But in the real world the ID should be generated server side i.e. from the DB itself

  public save(obj : any):void {
    const lastElement = this.userArray[this.userArray.length - 1];
    if(lastElement !== undefined){
       obj.id = lastElement.id+1;
    }
    else{
       obj.id = 0;
    }
    this.userArray.push(obj);
  }

also you should use an interface/type and not always any it makes the code easier to deal with

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading