Show JSON response through binding (Xamarin forms)

Question

i showed json response now i want to it to show like in a proper format in the editor section. Below is my code: (i am trying this from past two days but i dont know how to show this in a proper format)

Page 1 from where i passed the json data:

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

    public MainPage()
    {
        InitializeComponent();
        //     Task.Run(async () => await GetinfoAsync());
        GetinfoAsync();
    }

    public async Task GetinfoAsync()
    {
        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

        UserResponse result = JsonConvert.DeserializeObject<UserResponse>(responseString);
        if (result != null)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                test = dis.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; dis.Text = test;
            });
        }
    }

    private async void click_me(Object sender, EventArgs args)
    {
        await this.Navigation.PushAsync(new Data(test));
    }

Page 2 where i get the json data from page 1

public partial class Data : ContentPage
{
    public MyUser obj;
    public String show;

    public Data(String test)
    {
        show = test;
        InitializeComponent();
        displaylabel.Text = test;
    }
}

Page 2 Xaml

<StackLayout Padding="20">
    <Editor Text="{Binding obj.id}"   IsReadOnly="True"/>
    <Editor Text="{Binding obj.first_name}" IsReadOnly="True"/>
    <Editor Text="{Binding obj.last_name}" IsReadOnly="True"/>
    <Editor Text="{Binding obj.email}" IsReadOnly="True"/>
    <Editor Text="Image" IsReadOnly="True"/>
    <Image  HeightRequest="100" WidthRequest="100" Source="{Binding obj.avatar}"/>

    <Label Text="show json"
        x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

myuser.cs

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 UserResponse
{
    public MyUser Data { get; set; }
}

It'd be helpful if you showed us the results and described how the actual result deviates from your expectations. — Paul Kertscher, Feb 26 '20 at 06:39
Could you show the rest of `Data.xaml` or however it is called? — Paul Kertscher, Feb 26 '20 at 06:42
*Page 2 XAML* - this is the one you are expecting the data to be displayed on, isn't it? — Paul Kertscher, Feb 26 '20 at 06:52
i did but it helped me in just showing that data not in the editor column in a proper format — Sajawal Zubairi, Feb 26 '20 at 07:01
Please check in your previous question where I already give answer using MVVM binding https://stackoverflow.com/questions/60391560/display-data-from-api-on-screen-in-a-decent-form — Rajendra Razz, Feb 26 '20 at 07:11
@Rajendra sir due respect im not using mvvm approach as it is not allowed for my project — Sajawal Zubairi, Feb 26 '20 at 07:14
@Sajawal Zubairi Please look into my answer you will find solution of your question. — Rajendra Razz, Feb 26 '20 at 07:14
i get the data on page 1 and store it in an object now i passed that object on a button click onto next page. So now i want that json data to be shown on page 2. Page 1 has a button which navigates to page 2 including json data now i want that json data to be shown on page 2 xaml (repeated) — Sajawal Zubairi, Feb 26 '20 at 07:18

score 1 · Answer 1 · answered Feb 26 '20 at 07:31

Create new page send json data from your last page and populate here by belo code.

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 x:Name="txtId" Grid.Row="0" Grid.Column="1" IsReadOnly="True"/>

    <Editor Grid.Row="1" Grid.Column="0" Text="First name" IsReadOnly="True"/>
    <Editor x:Name="txtFirstname" Grid.Row="1" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="2" Grid.Column="0" Text="Last name" IsReadOnly="True"/>
    <Editor x:Name="txtLastname"  Grid.Row="2" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="3" Grid.Column="0" Text="Email" IsReadOnly="True"/>
    <Editor x:Name="txtEmail" Grid.Row="3" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="4" Grid.Column="0" Text="Image" IsReadOnly="True"/>
    <Image x:Name="imgUser" Grid.Row="4" Grid.Column="1" HeightRequest="100" WidthRequest="100" />

</Grid>

Code behind

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

    myuser _Data;
    public Homepage(myuser Data)
    {
        InitializeComponent();
        //this.BindingContext = new MainPageViewModel();
        _Data = Data;

    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        txtId.Text = _Data.id.ToString();
        txtFirstname.Text = _Data.first_name;
        txtLastname.Text = _Data.last_name;
        txtEmail.Text = _Data.email;
        imgUser.Source = _Data.avatar;
    }


}

Hope it will help you

Thanks

can this be more elaborate – Sajawal Zubairi Feb 26 '20 at 13:45 — Sajawal Zubairi, Feb 26 '20 at 13:45

javachipper · Answer 2 · 2020-02-26T09:15:11.580

First, you can follow the MVVM pattern to make this easier in the long run. But if you want to proceed with your existing code then you can try this:

First, setup your binding context in your Page 2 xaml:

<ContentPage x:Name="MyPage" ... />

<StackLayout Padding="20">
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
    <Image x:Name="myImage" HeightRequest="100" WidthRequest="100"/>

    <Label Text="show json"
        x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

In your code behind:

Instead of passing string test, you can declare a UserReponse object:

private static readonly HttpClient client = new HttpClient();
public String test; //instead of this
public UserReponse result; //do this

Then modify this:

public async Task GetinfoAsync()
    {
        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

        result = JsonConvert.DeserializeObject<UserResponse>(responseString); //modify to this

        if (result != null)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                test = dis.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; dis.Text = test;
            });
        }
    }

Then pass it:

 await this.Navigation.PushAsync(new Data(result));

Replace your page 2 code behind with:

public partial class Data : ContentPage
{

    private MyUser _obj;
    public MyUser obj
    {
       get{return _obj;}
       set
       {
          _obj = value;
          OnPropertyChanged();
       }
    }

    public String show;

    public Data(UserReponse result)
    {
        show = test;
        InitializeComponent();
        obj = result.Data;
        myImage.Source = ImageSource.FromUri(new Uri(obj.avatar));
        displaylabel.Text = test;
    }
}

@SajawalZubairi I updated it for the image source. Kindly update your page 2 xaml and code behind. — javachipper, Feb 26 '20 at 09:15

score 0 · Answer 3 · answered Feb 27 '20 at 02:53

Try to pass the UserResponse to the Data Page directly,and binding it to the page：

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

  public MainPage()
  {
    InitializeComponent();
    //     Task.Run(async () => await GetinfoAsync());
    GetinfoAsync();
  }

  public async Task GetinfoAsync()
  {
    var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

    UserResponse result = JsonConvert.DeserializeObject<UserResponse>(responseString);
    if (result != null)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            test = result;
        });
    }
  }

  private async void click_me(Object sender, EventArgs args)
  {
    await this.Navigation.PushAsync(new Data(test));
  }
}

the Data page:

public partial class Data : ContentPage
{
  public UserResponse obj;
  public String show;

  public Data(UserResponse test)
  {
    obj= test;
    InitializeComponent();
    BindingContext = obj;
  }
}

the xaml :

<StackLayout Padding="20">
  <Editor Text="{Binding Data.id}"   IsReadOnly="True"/>
  <Editor Text="{Binding Data.first_name}" IsReadOnly="True"/>
  <Editor Text="{Binding Data.last_name}" IsReadOnly="True"/>
  <Editor Text="{Binding Data.email}" IsReadOnly="True"/>
  <Editor Text="Image" IsReadOnly="True"/>
  <Image  HeightRequest="100" WidthRequest="100" Source="{Binding Data.avatar}"/>

  <Label Text="show json"
    x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

Show JSON response through binding (Xamarin forms)

3 Answers3

Linked