Twitter API Question posted in
The official Twitter API documentation can be found here.

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

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;
            });

        }
Tags:

2

Answers


  1. 0

    @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:

    enter image description here

    I hope the above code will be useful for you.

    Thank You

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search