Building a dynamic JSON response in MVC 5 - How to tack on properties to a result set?

Question

I am returning an array of objects to a page that renders a slideshow based on a photo album.

I fetch my pictures from the database.

Before I return this array as a result, I would like to tack on a "Thumbnail" url property. This property does not exist on the AlbumPicture, but I want it in the response.

This illustrates the idea:

List<AlbumPicture> pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID).OrderBy(p => p.RankOrder).ToList();
foreach(AlbumPicture p in pics)
{
    p.AddPropertyThatDoesntExist("Thumbnail", ThumbManager.GetThumb(p.ID));
}

return Json(pics, JsonRequestBehavior.AllowGet);

What is the most elegant way to add this JSON field to my result set?

This question is so basic that it is probably a duplicate. However, I googled for 10 minutes and could only find janky solutions that depend on 3rd party libraries. I'm interested in the current "best practice".

Possible duplicate of: How to add dynamically more properties to Json response from the controller. However, that answer will make the dynamically added fields uncles instead of siblings to my AlbumPicture properties in the resulting JSON.

Answer 1

Currently, C# 4.0 support dynamic object, so you can use dynamic object to add your properties as run time.

First, add this extension method to your code:

public static class DynamicExtensions
{
    public static dynamic ToDynamic(this object value)
    {
        IDictionary<string, object> expando = new ExpandoObject();

        foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(value.GetType()))
            expando.Add(property.Name, property.GetValue(value));

        return expando as ExpandoObject;
    }
}

And then, change your code to something like this

var pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID)
          .OrderBy(p => p.RankOrder)
          .Select(p=> 
                  { dynamic copy = p.ToDynamic();
                    copy.Thumbnail = ThumbManager.GetThumb(p.ID); //You can add more dynamic properties here
                    return copy;
                  })
          .ToList();

return Json(pics, JsonRequestBehavior.AllowGet);

Answer 2

I agree with most of the answers above, using dynamic object or expando object you can add the additional property etc. However the task is simple and in my opinion you should never expose your entity object to UI or consumers. I would just create a simple ViewModel and pass it back to the caller like following :

Public Class Album{
   string PhotoUrl {get; set;}
   string ThumbnailUrl {get; set;}
}


List<AlbumPicture> pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID).OrderBy(p => p.RankOrder).ToList();
List<Album> albums = new List<Album>();
foreach(AlbumPicture p in pics)
{
    albums.add(new Album(){
      PhotoUrl = p.PhotoUrl,//your photo url
      ThumbnailUrl = p.ThumbnailUrl
    });
}
 return Json(albums, JsonRequestBehavior.AllowGet);

Answer 3

The answer conanak99 provided is in my opinion the correct way to do this. Extensions like these are usually hidden in your core utilities anyway, and thus the reusable nature of his answer. If you are sure you will only use it for this purpose, you can refactor it to

public static dynamic AppendProperty<T>(this object value, string propertyName, T newValue)
    {
        IDictionary<string, object> expando = new ExpandoObject();

        foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(value.GetType()))
            expando.Add(property.Name, property.GetValue(value));

        expando.Add(propertyName, newValue);

        return expando as ExpandoObject;
    }

which will in turn yield the following code to do what you want:

 var pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID)
                  .OrderBy(p => p.RankOrder)
                  .Select(p =>
                  {
                      return p.AppendProperty("Thumbnail", ThumbManager.GetThumb(p.ID));
                  })
                  .ToList();

Update ------------------------------

If you are using automapper, or are willing to install it, this is another workaround that can be used in order to achieve the same result.

First, you create an extension class of the Album, with the added property

class AlbumExt : Album
    {
        public string Thumbnail { get; set; }
    }

Then you create a new instance of the extended class in the select statement, copy the property values using automapper(or manually, if you don't have too many) into the new class, and set the thumbnail property.

var pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID)
                  .OrderBy(p => p.RankOrder)
                  .Select(p =>
                  {
                      AlbumExt tmp = new AlbumExt();
                      AutoMapper.Mapper.DynamicMap(p, tmp);
                      tmp.Thumbnail = "new prop value";
                      return tmp;
                  })
                  .ToList();

Automapper basically just copies property values from one class to another using default conventions which are can be overridden if needed.

Answer 4

Separate the dynamic properties from the domain ones by using a projection and an anonymous object.

var pics = db.AlbumPictures
 .Where(p => p.AlbumID == album.ID)
 .OrderBy(p => p.RankOrder)
 .Select(p => new { album = p, Thumbnail = ThumbManager.GetThumb(p.ID))
 .ToList();

Answer 5

You could use Json.NET to convert them to its objects and dynamically add the properties on the JObject that is created.

From there you can return the json string as content from the action.

        var pics = db.AlbumPictures.Where(x => x.ID == albumID);

        //Will be used to hold each picture in the sequence
        JArray dynamicPics = new JArray();
        foreach (var pic in pics)
        {
            //Convert your object to JObject
            JObject dynamicPic = JObject.FromObject(pic);

            //Create your dynamic properties here.
            dynamicPic["Thumbnail"] = ThumbManager.GetThumb(pic.ID);

            dynamicPics.Add(dynamicPic);
        }

        //Convert the dynamic pics to the json string.
        string json = dynamicPics.ToString();

        //Return the json as content, with the type specified.
        return this.Content(json, "application/json");

Answer 6

Not directly an answer to your question, but it seems to me that you are using something like the Entity Framework to handle your database connection with a "database first" approach. Now you don't want to add the "Thumbnail" property in the database, but also don't want to alter the dynamically created models.

Now I think the best approach would be to add the property to the model and not just to the JSON. In my opionion it will make it much easier to use and will also enable to possibility to use the thumbnail directly in a view if you ever need it.

I would add a class to the database project called ExtendedModels.cs and add something like the following

/// <summary>
/// This class is used to extend the AlbumPicture object from the database
/// </summary>
/// <remarks>
/// 2015-01-20: Created
/// </remarks>
public partial class AlbumPicture
{
    /// <summary>An URL to the thumbnail.</summary> 
    public string Thumbnail
    {
        get
        {
            //ImageName is the actual image from the AlbumPicture object in the database
            if (string.IsNullOrEmpty(ImageName))
            {
                return null;
            }
            return string.Format("/Thumbnail/{0}", ImageName);
        }
    }

}

Obviously it will also be added to the JSON output.

UPDATE

If you use code first you can use the NotMapped Annotation to make sure a property is not created in the database. See Ignoring a class property in Entity Framework for more details about different versions. So In your case it would be something like the following. You can change the get/set to what ever you want.

public class AlbumPicture
{
    public string ImageName { get; set; } 

    [NotMapped]
    public string Thumbnail{ get; set; } 

}

Answer 7

You can use anonymous type to create a new type with properties AlbumPicture and Thumbnail.

Here is the modified code.

        List<AlbumPicture> pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID).OrderBy(p => p.RankOrder).ToList();
        var lstPics = new List<object>();
        foreach (AlbumPicture p in pics)
        {
            lstPics.Add(new { AlbumPicture = p, Thumbnail = ThumbManager.GetThumb(p.ID) });
        }

        return Json(lstPics, JsonRequestBehavior.AllowGet);

And you will get json result something like this

[{"AlbumPicture":{"ID":1,"AlbumID":1,"RankOrder":1,,,,},"Thumbnail":"Image_1"},{"AlbumPicture":{"ID":2,"AlbumID":2,"RankOrder":2,,,,},"Thumbnail":"Image_2"},{"AlbumPicture":{"ID":3,"AlbumID":3,"RankOrder":3,,,,},"Thumbnail":"Image_3"}]

I hope it helps you.

Answer 8

I would recommend creating a Data Transfer Object based on your AlbumPicture object.

public class AlbumPictureDto
{
    public int id { get; set; }
    public string url{ get; set; }
    public string thumbnailUrl{ get; set; } //create new properties

    public new static readonly Func<AlbumPicture, AlbumPictureDto> AsDto = p => new AlbumPictureDto()
    {
        id = p.id,
        url= p.url,
        thumbnailUrl= ThumbManager.GetThumb(p.id)
};
}

//Controller code

List<AlbumPicture> pics = db.AlbumPictures.Where(p => p.AlbumID == album.ID).OrderBy(p => p.RankOrder).ToList();

return Json(pics.Select(AlbumPicturesDto.AsDto),JsonRequestBehavior.AllowGet);

You can add as many properties you like to the Dto object and use this method to return those properties to the client.

Answer 9

It's not that .NET is bad at JSON, it's just that it is a strongly typed language which means you can't compare it with a dynamic language like javascript when dealing with dynamic operations on types.

In my opinion, the best way to achieve the result you want is to create new classes for the client-side. It is in general a bad idea to use your domain models directly to communicate with the client. At best you could simply create ViewModels inheriting your domain models if you want the less code duplication possible. But like said, you probably don't want to expose all the properties of your model to your clients.

If full model exposition is intended, then you could do like @conanak99 pointed out in his excellent answer. The code could be much more elegant using it's LINQ form:

var pics =  from album in db.AlbumPictures
        where album.AlbumID == album.ID
        orderby album.RankOrder
        let dynamicAlbum = album.ToDynamic()
        dynamicAlbum.Thumbnail = ThumbManager.GetThumb(p.ID)
        select dynamicAlbum;