Share via

Supporting arbitrary types in Azure Mobile Services managed client – complex types

  • Article

[The object model shown in this post for the client-side is mostly out-of-date; check the updated post at https://blogs.msdn.com/b/carlosfigueira/archive/2013/08/23/complex-types-and-azure-mobile-services.aspx for the more up-to-date version]

In my last post I showed how to use the IDataMemberJsonConverter to enable data types which aren’t natively supported by the managed client for Mobile Services. But I only touched on simple types, leaving more complex types for this post. Let’s get back to the example we had.

Now we also want to reviews for our movies. We can do that by adding a new property in our class:

  1. public class Movie
  2. {
  3.     public int Id { get; set; }
  4.     public string Title { get; set; }
  5.     public int ReleaseYear { get; set; }
  6.  
  7.     [DataMemberJsonConverter(ConverterType = typeof(TimeSpanConverter))]
  8.     public TimeSpan Duration { get; set; }
  9.  
  10.     public MovieReview[] Reviews { get; set; }
  11. }
  12.  
  13. publicclassMovieReview
  14. {
  15.     publicint Stars { get; set; }
  16.     publicstring Comment { get; set; }
  17. }

And if we try to insert one instance of the movie in a Mobile Services table

  1. var table = mobileService.GetTable<Movie>();
  2. var item = new Movie
  3. {
  4.     Title = "Pulp Fiction",
  5.     ReleaseYear = 1994,
  6.     Duration = TimeSpan.FromMinutes(154),
  7.     Reviews = new MovieReview[]
  8.     {
  9.         new MovieReview { Stars = 5, Comment = "Awesome movie!" },
  10.         new MovieReview { Stars = 4, Comment = "One of the best movies from Tarantino." }
  11.     }
  12. };
  13. await table.InsertAsync(item);
  14. AddToDebug("Movie details: {0}", item);

We’ll get the error that we saw last time.

Error: System.ArgumentException: Cannot serialize member 'Reviews' of type 'MovieReview[]' declared on type 'Movie'.
Parameter name: instance
   at Microsoft.WindowsAzure.MobileServices.MobileServiceTableSerializer.Serialize(Object instance, Boolean ignoreCustomSerialization)
   at Microsoft.WindowsAzure.MobileServices.MobileServiceTable`1.<InsertAsync>d__21.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.GetResult()

So we try to do what we did last time, adding a converter for arrays of movie reviews, where we send them over an array of JSON objects… Notice that now we start getting into the bad (or very restricted) API for the Windows.Data.Json classes, as we need to perform lots of checks for their items which we get for free (based on defaults) on other JSON libraries such as System.Json or JSON.NET. As I mentioned before, I normally use some extension methods, but I’ll keep the code here in full for completeness sake.

  1. public class Movie
  2. {
  3.     public int Id { get; set; }
  4.     public string Title { get; set; }
  5.     public int ReleaseYear { get; set; }
  6.  
  7.     [DataMemberJsonConverter(ConverterType = typeof(TimeSpanConverter))]
  8.     public TimeSpan Duration { get; set; }
  9.  
  10.     [DataMemberJsonConverter(ConverterType = typeof(MovieReviewsConverter))]
  11.     public MovieReview[] Reviews { get; set; }
  12.  
  13.     publicoverridestring ToString()
  14.     {
  15.         return string.Format("Movie[Id={0},Title={1},ReleaseYear={2},Duration={3},Reviews={4}]",
  16.             Id, Title, ReleaseYear, Duration,
  17.             Reviews == null ?
  18.                 "<<NULL>>" :
  19.                 "[" + string.Join(", ", Reviews.Select(r => string.Format("{0} - {1}", new string('*', r.Stars), r.Comment))) + "]");
  20.     }
  21. }
  22.  
  23. public class MovieReview
  24. {
  25.     public int Stars { get; set; }
  26.     public string Comment { get; set; }
  27. }
  28.  
  29. public class MovieReviewsConverter : IDataMemberJsonConverter
  30. {
  31.     private static readonly IJsonValue NullJson = JsonValue.Parse("null");
  32.  
  33.     public object ConvertFromJson(IJsonValue value)
  34.     {
  35.         MovieReview[] result = null;
  36.         if (value != null && value.ValueType == JsonValueType.Array)
  37.         {
  38.             JsonArray jsonArray = value.GetArray();
  39.             result = new MovieReview[jsonArray.Count];
  40.             for (int i = 0; i < jsonArray.Count; i++)
  41.             {
  42.                 IJsonValue item = jsonArray[i];
  43.                 if (item != null && item.ValueType == JsonValueType.Object)
  44.                 {
  45.                     JsonObject review = item.GetObject();
  46.                     IJsonValue stars = review["stars"];
  47.                     IJsonValue comment = review["comment"];
  48.                     result[i] = new MovieReview();
  49.                     if (stars != null && stars.ValueType == JsonValueType.Number)
  50.                     {
  51.                         result[i].Stars = (int)stars.GetNumber();
  52.                     }
  53.  
  54.                     if (comment != null && comment.ValueType == JsonValueType.String)
  55.                     {
  56.                         result[i].Comment = comment.GetString();
  57.                     }
  58.                 }
  59.             }
  60.         }
  61.  
  62.         return result;
  63.     }
  64.  
  65.     public IJsonValue ConvertToJson(object instance)
  66.     {
  67.         MovieReview[] reviews = instance asMovieReview[];
  68.         if (reviews != null)
  69.         {
  70.             JsonArray jsonArray = new JsonArray();
  71.             foreach (var review in reviews)
  72.             {
  73.                 JsonObject jsonReview = new JsonObject();
  74.                 jsonReview.Add("stars", JsonValue.CreateNumberValue(review.Stars));
  75.                 jsonReview.Add("comment", JsonValue.CreateStringValue(review.Comment));
  76.                 jsonArray.Add(jsonReview);
  77.             }
  78.  
  79.             return jsonArray;
  80.         }
  81.         else
  82.         {
  83.             return NullJson;
  84.         }
  85.     }
  86. }

Based on the previous post, this should work, but when we try to run the code again, we get another error:

Error: Microsoft.WindowsAzure.MobileServices.MobileServiceInvalidOperationException: The value of property 'Reviews' is of an unsupported type.  (400 BadRequest - Details: {"code":400,"error":"The value of property 'Reviews' is of an unsupported type."})
   at Microsoft.WindowsAzure.MobileServices.MobileServiceClient.CreateMobileServiceException(String errorMessage, IServiceFilterRequest request, IServiceFilterResponse response)
   at Microsoft.WindowsAzure.MobileServices.MobileServiceClient.ThrowInvalidResponse(IServiceFilterRequest request, IServiceFilterResponse response, IJsonValue body)
   at Microsoft.WindowsAzure.MobileServices.MobileServiceClient.<RequestAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.WindowsAzure.MobileServices.MobileServiceTable.<SendInsertAsync>d__8.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.WindowsAzure.MobileServices.MobileServiceTable`1.<InsertAsync>d__21.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.GetResult()

What happened here? This time, the client library didn’t complain, but when the request reached the server, that’s when the server complained. On the server there’s no easy way to determine what it should do with that kind of data. In this example, should the comments be stored in the same Movie table (denormalized), or should we have a separate table for the comments (normalized), so that the same information doesn’t get spread over multiple tables? So the Mobile Services runtime will simply error out, forcing the developer to do that. So let’s see how we could implement both alternatives.

First, the easy way: denormalizing the data. In this example, since the cardinality of the comments is greater than that of the movie, we could choose to store comments, and have the movie information on them, but that just doesn’t make sense. We can also store the comments in the same row as the movies, but we’ll need to convert them into a simple type, which is what we’ll do here. We could actually have done that at the client (instead of sending the comments as an array of objects, we could have sent them as a string), but I’ll do it on the server to keep the client programming model clean. So let’s go to the portal, select our Mobile Service and the Data tab, and select the script for the insert operation. The code below is simple: if the Reviews property is an array, then we’ll join the elements using a simple format. Notice that this is definitely not production-ready code, since the review comment cannot have either the ‘-‘ or the ‘|’ characters, but I’ll keep this way for simplicity.

  1. function insert(item, user, request) {
  2.     if (Array.isArray(item.Reviews)) {
  3.         var reviews = item.Reviews.map(function (review) {
  4.             return review.stars + "-" + review.comment;
  5.         }).join("|");
  6.         item.Reviews = reviews;
  7.     }
  8.  
  9.     request.execute();
  10. }

One parenthesis before we move on: I used Array.isArray to check that the Reviews property is an array. I started off by using the instanceof operator (“item.Reviews instanceof Array”) but that didn’t work. Searching around I found many people complaining about that operator (including Crockford himself), and I got help from Mathew, a developer in our team, to figure out the issue. It turns out that the Array object in the context of the script runs in a different environment (the scripts sandbox) than the Array object from the environment where the deserialization took place (the Node process), when using the instanceof operator it was comparing it with a different Array class. In short, don’t use instanceof in your scripts, and for arrays you can use Node’s Array.isArray function instead.

And if we run that code again, we’ll finally get our Movie object properly inserted.

But there’s still a problem with this code. After the InsertAsync operation returns (and is awaited), the value of the Reviews property is set to null (the Id is properly set to the value on the server). The problem is that, on the movie reviews converter, on the call to ConvertFromJson, the value of the IJsonValue parameter is not an array, but a string value instead. When we, in the server script, replaced the value of item.Reviews with a string, that value was returned to the client as the inserted object. So what we need to do is to, after executing the request, restore the original array value to the item, prior to returning it to the client:

  1. function insert(item, user, request) {
  2.     var originalReviews = null;
  3.     if (Array.isArray(item.Reviews)) {
  4.         var reviews = item.Reviews.map(function (review) {
  5.             return review.stars + "-" + review.comment;
  6.         }).join("|");
  7.         originalReviews = item.Reviews;
  8.         item.Reviews = reviews;
  9.     }
  10.  
  11.     request.execute({
  12.         success: function () {
  13.             if (originalReviews) {
  14.                 item.Reviews = originalReviews;
  15.                 request.respond();
  16.             }
  17.         }
  18.     });
  19. }

Now we’re good. The insertion worked, and we can verify that by browsing the data in the portal, and we the data is properly returned by the client.

Next up, reading data. Just like when we were inserting the data we had to convert between the array and the string which will go into the table, when reading the data. In the portal, select the Mobile Service, then the Data tab, then select the Movie table and the script for the Read operation:

  1. function read(query, user, request) {
  2.     request.execute({
  3.         success: function (results) {
  4.             results.forEach(function (review) {
  5.                 review.Reviews = review.Reviews.split('|')
  6.                     .map(function (item) {
  7.                         var parts = item.split('-');
  8.                         var stars = parseInt(parts[0]);
  9.                         var comment = parts[1];
  10.                         return { stars: stars, comment: comment };
  11.                     });
  12.             });
  13.             request.respond();
  14.         }
  15.     });
  16. }

At this point we can also query data:

  1. var table = mobileService.GetTable<Movie>();
  2. var moviesFrom1994 = await table.Where(m => m.ReleaseYear == 1994).ToListAsync();
  3. foreach (var movie in moviesFrom1994)
  4. {
  5.     AddToDebug("Movie: {0}", movie);
  6. }

The last thing we need to do, if we need to support updates as well, is to update the Update function to do the same as we did for insertions. For delete operations we don’t need to change any scripts, since all that is passed to the script is the id of the item to be removed.

Coming up

In the last post we saw how we could convert between arbitrary types in the client (although I only showed simple types) to one of the supported types (such as strings). In this post we saw how to maintain the complexity of the types as they’re leaving the client, into the wire, but at the server we did the same trick – converting them into strings. In the next post, I’ll show how to normalize the data in the server, by splitting the data entered into multiple tables.

Movies.zip

Comments

  • Anonymous
    January 16, 2014
    Just ran into this issue posting a backbone model that included a collection.  Thank you so much for the post!  It was a real time saver.Instead of creating an arbitrary string from the array, you can also use JSON.stringify on the property, and JSON.parse before sending back to the client.