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

Question

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

        }

Answer 1

@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 + "
Email:- " + result.Data.email + "
First Name:- " + result.Data.first_name + "
Last Name:- " + result.Data.last_name + "
Image:- " + 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