Showing information from a JSON dataset of users once a specific User ID has been chosen

Question

Showing information from a JSON dataset of users once a specific User ID has been chosen

My task involves displaying user data from an array and then showing the details of the selected user. I attempted to achieve this with the following code:


users = USERS; // contains data
selectedUser: User;

constructor() { }

ngOnInit() {
}

onSelect(index): void {
this.selectedUser = index;
}

Here is a snippet from my HTML file that I used:

      
    <div class="row">
        <div class="col-4">
          <ul class="menu">
            <div *ngFor="let user of users; let i = index"
              (click)="onSelect(i)">
              <span><b>{{user.id}}</b></span> {{user.name}}
            </div>
          </ul>
        </div>

        <div *ngIf="selectedUser" class="col-8 menu">
          <div><span><b>id: </b></span> {{selectedUser.id}} </div>
          <div><span><b>Name:</b></span> {{selectedUser.name}} </div>
          <div><span><b>Location:</b></span> {{selectedUser.location}} </div> 
        </div>
     </div>

I need help figuring out the correct condition to use in the ngIf directive for displaying the data.

angular typescript

Answer 1

Answer №1

Here is the correct code snippet:

onSelect(index): void {
   this.selectedUser = this.users[index];
}

The previous code was assigning only the index, leading to an incorrect attempt at fetching data from that variable. By using the above code, relevant data from the users array will be assigned and displayed in your UI.

Answer 2

Here is the correct code snippet:

onSelect(index): void {
   this.selectedUser = this.users[index];
}

The previous code was assigning only the index, leading to an incorrect attempt at fetching data from that variable. By using the above code, relevant data from the users array will be assigned and displayed in your UI.

Answer 3

Answer №2

In order to access all the details of the selected user, you need to store the index of the user in the selectedUser variable.

Here is the current behavior:

onSelect(index): void {
    this.selectedUser = index; //The index can be any number
}

If the index is 4 and this.selectedUser=4, then {{selectedUser.id}} will be undefined, which is why nothing is displayed.

To retrieve all data of the selected user, it is necessary to save the user in the this.selectedUser variable like this:

<div class="row">
   <div class="col-4">
      <ul class="menu">
        <div *ngFor="let user of users; let i = index"
          (click)="onSelect(user)">
        </div>
      </ul>
    </div>

onSelect(user): void {
    this.selectedUser = user; // user is the current user
}

Alternatively, instead of the current code, you can store the user with an index like so:

onSelect(index): void {
   this.selectedUser = this.users[index];
}

Answer 4

In order to access all the details of the selected user, you need to store the index of the user in the selectedUser variable.

Here is the current behavior:

onSelect(index): void {
    this.selectedUser = index; //The index can be any number
}

If the index is 4 and this.selectedUser=4, then {{selectedUser.id}} will be undefined, which is why nothing is displayed.

To retrieve all data of the selected user, it is necessary to save the user in the this.selectedUser variable like this:

<div class="row">
   <div class="col-4">
      <ul class="menu">
        <div *ngFor="let user of users; let i = index"
          (click)="onSelect(user)">
        </div>
      </ul>
    </div>

onSelect(user): void {
    this.selectedUser = user; // user is the current user
}

Alternatively, instead of the current code, you can store the user with an index like so:

onSelect(index): void {
   this.selectedUser = this.users[index];
}

Showing information from a JSON dataset of users once a specific User ID has been chosen

Answer №1

Answer №2

Similar questions

Restrict the parameter type using a type predicate

Internal variable via router

Tips for creating a custom script in my React Native application

There seems to be a syntax error in the regular expression used in Angular TypeScript

React type-script does not trigger the onClick event for CheckBox

Combining Angular subscriptions to fetch multiple data streams

Guide on transferring the token and user information from the backend to the front-end

Navigating back to the starting point

Having difficulty with installing the ttf-loader for React with Typescript

Using the useContext hook across multiple files without needing to export it

Checking for String Const Type in TypeScript

What is the best method for incorporating a delay within the upcoming subscribe block in Angular?

Optimal techniques for Angular 2 and beyond

Express string declaration in a single TypeScript line

Encountering an issue with multi ./src/styles.scss during the deployment of my Angular application on Heroku

Exploring the implementation of float type in TypeScript

Firebase and Nx: Encountering issues with running emulators

TSLint has detected an error: the name 'Observable' has been shadowed

The names of properties in Typescript are determined by the values of the outer type properties

The keys within a TypeScript partial object are defined with strict typing