How to Convert get LIST from MVC for using as Json

Question

I try to Get Data from MVC controller as JSON but it appear that it submit to me like an LIST and i can't use a json object i recieve. except from using stringify. But i really need some part of it not the all object.

Controller***

 public class testController : ApiController
    {
        public class Banditem
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Detail { get; set; }


        }

        public class Bandlist
        {
            public List<Banditem> Bands { get; set; }
        }

        public class testAppType
        {
            public List<Banditem> Band { get; set; }

        }

        public testAppType Get()
        {

            using (var ms = new MySampleServiceClient(Wcf.Routing.RouterBindings.Local, Wcf.Routing.RouterAddresses.Local.RequestReply))
            {
                var objectToSerialize = new testAppType();
                objectToSerialize.Band = new List<Banditem> 
                          {
                             new Banditem { Id= 1, Name = "Test1", Detail = "111" },
                             new Banditem { Id= 2, Name = "Test2", Detail = "222" },
                              new Banditem { Id= 3, Name = "Test3", Detail = "333"},
                               new Banditem { Id= 4, Name = "Test4", Detail = "444"},
                                new Banditem { Id= 5, Name = "Test5", Detail = "555"}
                          };

                return objectToSerialize;


            }
        }


    }
}

HTML***

 <script>
        var url = "Band";
      $(document).ready(function () {
          //   Send an AJAX request

            $.getJSON(url)
           .done(function (data) {



      //   On success, 'data' contains a list of products.
           $.each(data, function (key, item) {
              //      Add a list item for the product.
         $('<li>', { text: formatItem(item) }).appendTo($('#begin'));



      });
          });
     });     



function formatItem(item) {
            return "ID: " + item.id + ":" + item.name + ': $' + item.price + "Category: " + item.category;
        }

Answer 1

You need to correct your implementation of return data in ajax function like below.

var url = "Band";
      $(document).ready(function () {
          //   Send an AJAX request
        $.getJSON(url)
       .done(function (data) {



  //   On success, 'data' contains a list of products.
       $.each(data.Band, function (key, item) {
          //      Add a list item for the product.
     $('<li>', { text: formatItem(item) }).appendTo($('#begin'));



  });
      });
 });     

function formatItem(item) {
            return "ID: " + item.Id + ":" + item.Name ;
        }

The Price and Category are not the properties of Band class. Also the properties names are case sensitive so you should use Id instead of id in formatItem function.