Get Random User's Information from Web using REST APIs in Lightning Web Component | LWC Stack ☁️⚡️

Kapil April 02, 2022

 If you are looking for a good example of using REST APIs in Lightning Web Component, then you are at the right place.

In this blog I will share the functionality to get random user's data from a website https://randomuser.me using REST APIs and display that data in a Lightning Web Component.

What you will learn here - 

✔️ How to use REST APIs

✔️ Deserialise JSON data

✔️ Pass JSON data to Lightning Web Component


Make sure you add the site in remote site settings in your org to make it work and then you may follow the code below : 

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<template>
  <lightning-card title="Random User">
    <lightning-layout multiple-rows>
      <lightning-layout-item size="4" padding="around-small">
        <div class="slds-p-around_medium slds-text-align_center">
          <img src={picture} alt="Avatar" style="border-radius: 50%" />
        </div>
      </lightning-layout-item>
      <lightning-layout-item size="8" padding="around-small">
        <div class="slds-p-around_medium" style="font-size: large">
          Hello my name is {name}<br />
          Age : {age}<br />
          Email : {email}<br />
          Phone : {phone}<br />
        </div>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>


JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { LightningElement, track } from "lwc";
import getUserData from "@salesforce/apex/RandomUserData.getUserData";

export default class GetUserData extends LightningElement {
  @track userData;
  picture;
  name;
  email;
  phone;
  age;

  connectedCallback() {
    getUserData()
      .then((result) => {
        this.userData = JSON.parse(JSON.stringify(result.results[0]));
        this.picture = this.userData.picture.large;
        this.email = this.userData.email;
        this.phone = this.userData.phone;
        this.name = this.userData.name.first + " " + this.userData.name.last;
        this.age = this.userData.dob.age;
        console.log("🚀 ~ result", this.userData.picture.large);
      })
      .catch((error) => {
        console.log("===>>Error during callout : " + JSON.stringify(error));
      });
  }
}


APEX

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public with sharing class RandomUserData {
    @AuraEnabled
    public static results getUserData(){
        try {
            string endpoint='https://randomuser.me/api/';
            Http http = new Http();
            HttpRequest request = new HttpRequest();
            request.setEndpoint(endPoint);
            request.setMethod('GET');
            system.debug(request);
            HttpResponse response = http.send(request);
            System.debug('===>Response : '+response.getBody());
            Results getUser = new Results();
            getUser = (Results)System.JSON.deserialize(response.getBody(), Results.class);
            return getUser;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    public class Results{
      @AuraEnabled public List<ResultsWrapper> results;
    }
    public class Picture{
        @AuraEnabled public String large;
    }
    public class Name{
        @AuraEnabled public String first;
        @AuraEnabled public String last;
    }
    public class DOB{
        @AuraEnabled public String age;
    }
    
    public class ResultsWrapper{
      @AuraEnabled public String gender;
      @AuraEnabled public String email;
      @AuraEnabled public Picture picture;
      @AuraEnabled public Name name;
      @AuraEnabled public String phone;
      @AuraEnabled public DOB dob;
    }
}


Output



Checkout complete video below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments