How to parse JSON array to ObservableCollection in xamarin forms?

Hello Everyone ,
I am calling an api using refit in xamarin forms, the data returning is in the form of array now i want to know how to parse JSON array to get the data and then give it to the ObservableCollection to display it in my View.

Here my Interface for calling API.

[Get("/api/data/GetData")]
[Headers("Authorization: Bearer")]
Task<ObservableCollection> getLatestFeeds();

And data returning from api is :

[
{
"Id": 123,
"Title": "New Test Project",
"Description": "Project Discription",
"Type": "Project",
"PictureURL": "someurl",
"NoOfReaders": "0",
"NoOfComments": "0",
"IsMarkedRead": false
}
]

can anyone please guide me through this ?

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited July 2018

    That JSON returns this RootObject.

    public class RootObject
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public string Type { get; set; }
        public string PictureURL { get; set; }
        public string NoOfReaders { get; set; }
        public string NoOfComments { get; set; }
        public bool IsMarkedRead { get; set; }
    }
    

    If you have a List of RootObject being returned you could deserialise the object into an ObservableCollection because it inherits from IEnumerable<>.

    You should be able to deserialise the list like this

    ObservableCollection<RootObject> list = JsonConvert.DeserializeObject<ObservableCollection<RootObject>>(json);
    
  • The answer that @seanyda should do the trick but he forgot to mention you need this nuget package
    using Newtonsoft.Json;

  • UmairJavedUmairJaved Member ✭✭

    ObservableCollection data= new ObservableCollection();

    var feedApi = RestService.For(new HttpClient(new AuthenticatedHttpClientHandler(GetToken)) { BaseAddress = new Uri("https://someURI.net") });

    data = await feedApi.getLatestFeeds();

    now when i do the,

    data = JsonConvert.DeserializeObject<ObservableCollection>("------");

    i am not sure what to pass there.

    @seanyda @sebastiendecraene can you help ?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @UmairJaved said:
    ObservableCollection data= new ObservableCollection();

    var feedApi = RestService.For(new HttpClient(new AuthenticatedHttpClientHandler(GetToken)) { BaseAddress = new Uri("https://someURI.net") });

    data = await feedApi.getLatestFeeds();

    now when i do the,

    data = JsonConvert.DeserializeObject<ObservableCollection>("------");

    i am not sure what to pass there.

    @seanyda @sebastiendecraene can you help ?

    You will pass in the raw JSON returned from the webService. It should be a string and look something like the below.

    [
    {
    "Id": 123,
    "Title": "New Test Project",
    "Description": "Project Discription",
    "Type": "Project",
    "PictureURL": "someurl",
    "NoOfReaders": "0",
    "NoOfComments": "0",
    "IsMarkedRead": false
    }
    ]
    
  • MahaLakshmiGuntiMahaLakshmiGunti USMember ✭✭
    edited July 2018

    this link [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/data-cloud/consuming/rest#retrieving-data] helps you..
    Read the data, deserialize it and convert it into suitable C# class... Need to do asynchronous call for not to blocking the UI

  • UmairJavedUmairJaved Member ✭✭
    edited July 2018

    Hello People,
    i was actually doing it wrong way.
    As i am using Refit , so i don't need to deserialize the object into array in my viewmodel.

    Refit does it by itself. All you need to do is to return the Task with type ObservableCollection.

    Here how its done,

    [Get("/api/data/GetData")]
    [Headers("Authorization: Bearer")]
    Task<ObservableCollection> getLatestFeeds();
    

    and then i your view model you need to make an object of your model like this

    ObservableCollection<LatestFeedsModel> data= new ObservableCollection<LatestFeedsModel>();
    

    After that when you'll call your api,

    var feedApi = RestService.For(new HttpClient(new AuthenticatedHttpClientHandler(GetToken)) { BaseAddress = new Uri("https://someURI.net") });
    
    data = await feedApi.getLatestFeeds();
    

    Refit will return your data in the type you've mentioned in your interface.

    Thanks for the help,
    @seanyda @sebastiendecraene :)

Sign In or Register to comment.