在屏幕上以体面的形式显示来自API的数据 [英] Display Data from API on screen in a decent form

问题描述

我在屏幕上显示了API数据，但格式为JSON.现在我希望它看起来有点体面.我可以在哪些部分进行哪些更改.

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.

以下是API数据:

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

设计页面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在这里，我调用了API，并以JSON格式显示了它

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

        }

推荐答案

@Sajawal Zubairi

@Sajawal Zubairi

请尝试以下代码，它将帮助您找到解决方案:

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

首先，需要在项目中安装Newtonsoft.Json软件包.

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

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>

C#代码:-

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数据模型:-

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

输出如下图所示:

我希望上面的代码对您有用.

I hope the above code will be useful for you.

谢谢

这篇关于在屏幕上以体面的形式显示来自API的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！