Show JSON response through binding (Xamarin forms) - xamarin

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

Answer 1

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

Answer 2

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

Answer 3

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>