Display Data from API on screen in a decent form - Twitter API

SajawalZubairi
February 25, 2020
127 views
0 votes
2 Answers

i showed API data on screen but in JSON format. Now i want it to look a little bit decent. What changes can i made and in which section.

Here is the API data:

  public class myuser
    {
        public int id { get; set; }
        public string email { get; set; }
        public string first_name { get; set; }
        public string last_name { get; set; }
        public string avatar { get; set; }
    }
}

design Page xaml:

  <StackLayout Padding="20">
            <Editor Text="id" IsReadOnly="True"/>
            <Editor Text="First name" IsReadOnly="True"/>
            <Editor Text="Last name" IsReadOnly="True"/>
            <Editor Text="Email" IsReadOnly="True"/>
            <Image Source="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg">
            </Image>
            <Label Text="show json"
                    x:Name="displaylabel"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />

        </StackLayout>

xaml.cs Here i called the API and showed it in JSON format

  private static readonly HttpClient client = new HttpClient();

        // private String data;
        public String show;


        //String responseString;
        public Data(String data)
        {
            InitializeComponent();

            Task.Run(async () => await GetinfoAsync());
            var ID = new Editor { Text = "Id", IsReadOnly = true };
            var FirstName = new Editor { Text = "first name", IsReadOnly = true };
            var LastName = new Editor { Text = "lastname", IsReadOnly = true };
            var Email = new Editor { Text = "email", IsReadOnly = true };
           var Avatar =  ImageSource.FromUri(new Uri("https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"));

        }



        public async Task GetinfoAsync()
        {

            var responseString = await
            client.GetStringAsync("https://reqres.in/api/users/2");
            show = responseString;
            // DisplayAlert("text", responseString, "ok");

            Device.BeginInvokeOnMainThread(() => {
                displaylabel.Text = show;
            });

        }

Answers

@Sajawal Zubairi

Please try this code it will help you to find your solution:

First, need to install the Newtonsoft.Json package in your project.

XAML Code:-

<StackLayout Padding="20">
        <Editor Text="id" IsReadOnly="True"/>
        <Editor Text="First name" IsReadOnly="True"/>
        <Editor Text="Last name" IsReadOnly="True"/>
        <Editor Text="Email" IsReadOnly="True"/>
        <Image Source="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg">
        </Image>
        <Label Text="show json"
                x:Name="displaylabel"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />

</StackLayout>

C# Code:-

public partial class MainPage : ContentPage
{
    private static readonly HttpClient client = new HttpClient();

    public MainPage()
    {
        InitializeComponent();
        GetinfoAsync();
    }

    public async Task GetinfoAsync()
    {

        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");
        myuserResponse result = JsonConvert.DeserializeObject<myuserResponse>(responseString);

        // DisplayAlert("text", responseString, "ok");

        if (result != null)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                displaylabel.Text = "Id:- " + result.Data.id + "nEmail:- " + result.Data.email + "nFirst Name:- " + result.Data.first_name + "nLast Name:- " + result.Data.last_name + "nImage:- " + result.Data.avatar;
            });
        }

    }

}

API Data Model :-

public class myuser
{
    public int id { get; set; }
    public string email { get; set; }
    public string first_name { get; set; }
    public string last_name { get; set; }
    public string avatar { get; set; }
}

public class myuserResponse
{
    public myuser Data { get; set; }        
}

OUTPUT Look like Below Image:

I hope the above code will be useful for you.

Thank You

You can achive your requirement using MVVM approach below is my code will help you

ViewModel code

public class MainPageViewModel : INotifyPropertyChanged
{
    private static readonly HttpClient client = new HttpClient();

    private UserDTO user;

    public UserDTO UserData
    {
        get { return user; }
        set
        {
            user = value;
            OnPropertyChanged();
        }
    }

    public MainPageViewModel()
    {
        GetUserData();
    }

    public async Task GetUserData()
    {

        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");
        UserDTOResponse result = JsonConvert.DeserializeObject<UserDTOResponse>(responseString);

        // DisplayAlert("text", responseString, "ok");

        if (result != null)
        {
            UserData = result.Data;
        }

    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

View(XAML code)

<Grid Margin="20,50">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Editor Grid.Row="0" Grid.Column="0" Text="id" IsReadOnly="True"/>
    <Editor Grid.Row="0" Grid.Column="1" Text="{Binding UserData.id}" IsReadOnly="True"/>

    <Editor Grid.Row="1" Grid.Column="0" Text="First name" IsReadOnly="True"/>
    <Editor Grid.Row="1" Grid.Column="1" Text="{Binding UserData.first_name}" IsReadOnly="True"/>

    <Editor Grid.Row="2" Grid.Column="0" Text="Last name" IsReadOnly="True"/>
    <Editor Grid.Row="2" Grid.Column="1" Text="{Binding UserData.last_name}" IsReadOnly="True"/>

    <Editor Grid.Row="3" Grid.Column="0" Text="Email" IsReadOnly="True"/>
    <Editor Grid.Row="3" Grid.Column="1" Text="{Binding UserData.email}" IsReadOnly="True"/>

    <Editor Grid.Row="4" Grid.Column="0" Text="Image" IsReadOnly="True"/>
    <Image Grid.Row="4" Grid.Column="1" HeightRequest="100" WidthRequest="100" Source="{Binding UserData.avatar}"/>

</Grid>

Models

public class UserDTO
{
    public int id { get; set; }
    public string email { get; set; }
    public string first_name { get; set; }
    public string last_name { get; set; }
    public string avatar { get; set; }
}

public class UserDTOResponse
{
    public UserDTO Data { get; set; }
}

Output

enter image description here

I hope it will help you.

Thank you

Please signup or login to give your own answer.

Click here to cancel reply.

Display Data from API on screen in a decent form – Twitter API

Answers