C# List > JSON > Javascript

Question

I am doing an AJAX call to a controller method on my ASP.Net MVC web site. That method is sending back some custom objects JSONized.

I'm having trouble treating lists from these C# objects as Javascript arrays and I'm just new enough to Javascript not to understand what the problem is.

I have an object called Animations. Each Animation has a List named Frames. If I try to pass the JSONized Frames e.g. currentAnimation.Frames to a Javascript method expecting an array of integers I don't get an exception but the receiving method doesn't get an array of integers like it expects so it also doesn't do anything with the data.

Here is my Javascript. Notice it passes "this.spriteSheet.Animations[sheet].Frames" to the "addAnim" method. This doesn't work.

for (var sheet in this.spriteSheet.Animations) {

    var animation = this.addAnim(this.spriteSheet.Animations[sheet].Name, this.spriteSheet.Animations[sheet].Speed, this.spriteSheet.Animations[sheet].Frames);

    if (this.flip) {
        animation.flip.x = true; ;
    }
}

And here is some Javascript I modified to work (although I don't know if it's the best solution and I still don't really know what the problem is):

for (var sheet in this.spriteSheet.Animations) {

        var frames = new Array();

        for (var frame in this.spriteSheet.Animations[sheet].Frames) {
            frames[frame] = this.spriteSheet.Animations[sheet].Frames[frame];
        }

    var animation = this.addAnim(this.spriteSheet.Animations[sheet].Name, this.spriteSheet.Animations[sheet].Speed, frames);

    if (this.flip) {
        animation.flip.x = true; ;
    }
}

Here is my controller action code:

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetPlay(int id)
{
    // get the game that has been requested
    Cherub.Common.Logic.Game game = new Common.Logic.Game();

    // get the play data
    Play play = game.GetPlay(id);

    return Json(play, JsonRequestBehavior.AllowGet);
}

I am calling the controller action with JQuery's ajax call:

$.ajax({
        type: "GET",
        url: ajaxUrl,
        contentType: "application/json; charset=utf-8",
        data: {},
        dataType: "json",
        success: functionSuccess,
        error: functionFailure,
        cache: false
    });

Here's a small section of the JSON coming back from the controller action:

"Animations":[{"Name":"bob","Frames":[0,1,2],"Speed":0.2}]

Here's my SpriteSheet class

public class SpriteSheet
{
    public SpriteSheet(string name)
    {
        Animations = new List<Animation>();

        switch(name.ToLower())
        {
            case "sylph":
                Sheet = "media/Sylph.png";
                Animations.Add(new Animation { Name = "bob", Frames = new List<int> { 0, 1, 2 }, Speed = .2f });
                FrameSize = new Vector2D { X = 94, Y = 125 };
                break;
        }
    }

    public string Sheet { get; set; }
    public List<Animation> Animations { get; set; }
    public Vector2D FrameSize { get; set; }
}

public class Animation
{
    public string Name { get; set; }
    public List<int> Frames { get; set; }
    public float Speed { get; set; }
}

Answer 1

From the description, it sounds like Frames is being converted into something like this:

{0: 1, 1: 2, 2: 3}

... whereas you want something more like this:

[1, 2, 3]

Both of these javascript objects can be accessed like this: obj[0], but only the latter is an actual array. Doing a for loop over the former will yield [0, 1, 2], whereas doing a for loop over the latter will yield [1, 2, 3].

If I'm right, then you need to look at the code you're using to serialize Frames into a JSON string, and make it treat Frames as an array-like object.

Update

Well, I'm stumped. Everything looks like it ought to be working correctly to make Frames an Array in javascript.

Answer 2

Based on the sample in your question, Animations and Frames are arrays - but you're treating them like they are objects.

for..in loops are useful for iterating over the properties of an object, but you need to loop through each element in the array using a simple for loop instead.

If you change your for .. in loops, you should get the result you're looking for:

var anims = spriteSheet.SpriteSheet.Animations;

for(i = 0; i < anims.length; i++) {

    var frames = new Array();
    for(j = 0; j < anims[i].Frames.length; j++) {

        frames[i] = anims[i].Frames[j];

        ...