Generate random users with Angular JS based on their ID using the User Generator API

Question

Generate random users with Angular JS based on their ID using the User Generator API

I am new to using Angular and recently achieved success in making an Ajax call to the Random User Generator API to display a list of users. Now, I am aiming to create a detailed view when a user is clicked on. Within my HTML, I have implemented a function call: fetchInfoById(user.id.value). Below is the script for this function:

$scope.fetchInfoById = function(info_id) {     
   $http.get("https://randomuser.me/api/?id.value="+info_id)
   //also tried:   $http.get("https://randomuser.me/api/?id/value="+info_id)
          .success(function(data) {
            $scope.oneUserResult = data.results; 
    }); 
}

The current implementation does display a user detail view, however, it is not showing the selected user. Can anyone identify what I may be doing incorrectly?

javascript angularjs

Answer 1

Answer №1

Thank you for sharing your valuable suggestions. Although it's a random generator, by setting parameters such as "seed=...", the same individuals are shown in each listview request:

$http.get('https://randomuser.me/api/?results=15&seed=abc&inc=gender,name,location,email,dob,phone,cell,id,picture,info,nat&nat=gb')
    .success(function(response){
        $scope.userResult = response.results; 
});

I then extracted the id of each person and used it as a parameter in the function call for the detailed view request.

To ensure I passed the correct value for the detail view request, I even hard coded the parameter for the request like so:

$scope.getInfoById = function(info_id) {    
    console.log("from HTML: "+info_id.value );   //  =  JK 00 46 67 
    $http.get("https://randomuser.me/api/?id="+'JK 00 46 67 H')    ...

The JSON data within the API is structured with the id-property formatted as follows:

{
  "results": [
    {
     "id": {
        "name": "BSN",
        "value": "04242023"
     },...

I am still working on finding out how to retrieve a single user by their id. Even with a hardcoded id, I keep getting different users every time... Instead of making another request, my workaround was to pass the "clicked user" as a parameter for the detailed view.

Answer 2

Thank you for sharing your valuable suggestions. Although it's a random generator, by setting parameters such as "seed=...", the same individuals are shown in each listview request:

$http.get('https://randomuser.me/api/?results=15&seed=abc&inc=gender,name,location,email,dob,phone,cell,id,picture,info,nat&nat=gb')
    .success(function(response){
        $scope.userResult = response.results; 
});

I then extracted the id of each person and used it as a parameter in the function call for the detailed view request.

To ensure I passed the correct value for the detail view request, I even hard coded the parameter for the request like so:

$scope.getInfoById = function(info_id) {    
    console.log("from HTML: "+info_id.value );   //  =  JK 00 46 67 
    $http.get("https://randomuser.me/api/?id="+'JK 00 46 67 H')    ...

The JSON data within the API is structured with the id-property formatted as follows:

{
  "results": [
    {
     "id": {
        "name": "BSN",
        "value": "04242023"
     },...

I am still working on finding out how to retrieve a single user by their id. Even with a hardcoded id, I keep getting different users every time... Instead of making another request, my workaround was to pass the "clicked user" as a parameter for the detailed view.

Answer 3

Answer №2

Update your code with the following changes:

$scope.getInfoById = function(info_id) {     
   $http.get("https://randomuser.me/api/?id="+info_id)
   //tried this as well:   $http.get("https://randomuser.me/api/?id/value="+info_id)
      .success(function(data) {
        $scope.userData = data.results; 
   }); 
}

Ensure that you are providing the correct value when calling this function.

Answer 4

Update your code with the following changes:

$scope.getInfoById = function(info_id) {     
   $http.get("https://randomuser.me/api/?id="+info_id)
   //tried this as well:   $http.get("https://randomuser.me/api/?id/value="+info_id)
      .success(function(data) {
        $scope.userData = data.results; 
   }); 
}

Ensure that you are providing the correct value when calling this function.

Answer 5

Answer №3

Retrieve a group of individuals from the API call "".

$scope.getAllUsers= function(resultCount) {     
       $http.get("https://randomuser.me/api/?results="+resultCount)
            .success(function(data) {
            $scope.users= data.results; 
   });

Show them on the display.

When one entry is clicked, fetch details for that specific individual from the previously fetched list of users.

$scope.getUserById= function(userId) {
    return $scope.users.filter(function(user) {
      return user.id.value=== userId;
    })[0]; // make sure to include necessary null / undefined checks when needed.
  }

Answer 6

Retrieve a group of individuals from the API call "".

$scope.getAllUsers= function(resultCount) {     
       $http.get("https://randomuser.me/api/?results="+resultCount)
            .success(function(data) {
            $scope.users= data.results; 
   });

Show them on the display.

When one entry is clicked, fetch details for that specific individual from the previously fetched list of users.

$scope.getUserById= function(userId) {
    return $scope.users.filter(function(user) {
      return user.id.value=== userId;
    })[0]; // make sure to include necessary null / undefined checks when needed.
  }

Answer 7

Answer №4

Here is an alternative method with ng-model:

$scope.person = {};
$scope.retrieveDataById = function() {     
   $http.get("https://exampleapi.com/userinfo?id="$scope.person.id)
      .success(function(info) {
        $scope.singleResult = info.details; 
   }); 
}

Answer 8

Here is an alternative method with ng-model:

$scope.person = {};
$scope.retrieveDataById = function() {     
   $http.get("https://exampleapi.com/userinfo?id="$scope.person.id)
      .success(function(info) {
        $scope.singleResult = info.details; 
   }); 
}

Generate random users with Angular JS based on their ID using the User Generator API

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Sending a JavaScript variable to another JavaScript file and ultimately to a Django view

How do I specify a unique directory for pages in Next.js that is not within the src or root folders?

retrieveValue() for SelectionDropdown

Steps for displaying an Array value in a Text input field

The collapsed button on the Bootstrap 4 accordion flickers slightly as it expands, not reaching its full expansion

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Changing array element to undefined within an else if statement

Is there a more efficient method to achieve the desired effect without making multiple calls to jQuery ajaxSuccess?

Tips for concealing tick labels in d3 using TypeScript

How come HTML fails to display an image sent through Express?

Configuring a custom domain for a Rust service on Clever Cloud: A step-by-step guide

typescript is failing to update CSSRule with the newly assigned background-color value

proceeding to an external webpage | angular

Using $watch to track changes in a class when a directive fires one cycle later

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Guide to transforming a JSON file value into a JavaScript list

The Ajax URL is failing to connect with the controller through IIS

Error encountered at the conclusion of input within a search button segment

Tips for CSS: Preventing onhover animation from resetting with each hover

Navigation bar transforms color once a specific scroll position is reached