1

I have the following Javascript:

$(document).ready(function () {
        $.getJSON("api/products/",
        function (data) {
            $.each(data, function (key, val) {

                // Format the text to display.
                var str = val.Name + ': $' + val.Price;

                // Add a list item for the product.
                $('<li/>', { text: str })    
                .appendTo($('#products'));   
            });
        });
    });

My problem is the product list is not displaying. I have another function that can search individual items that are in the list and it is able to display those, but why isn't this working?

Here's the class that the information is stored in:

public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }

And here's the controller:

public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };
        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        public Product GetProductById(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return product;
        }

        public IEnumerable<Product> GetProductsByCategory(string category)
        {
            return products.Where(
                (p) => string.Equals(p.Category, category,
                    StringComparison.OrdinalIgnoreCase));
        }
    }

I'm a beginner with ASP.NET so please let me know what I'm doing wrong.

Beer_en_thu_si_asT
  • 47
  • 8

1 Answers1

1

I think you meant to use text as a method off the initial jQuery selector that creates the <li> node.

Passing a second parameter to $() will actually result in a "context" which will attempt to limit where the selector starts from. See: http://api.jquery.com/jQuery/#jQuery1/

http://jsfiddle.net/A4tk9/

$(function() {

    var data = [{ Name: 'test1', Price: 1000}, { Name: 'test2', Price: 25}];

    $.each(data, function (key, val) {
        // Format the text to display.
        var str = val.Name + ': $' + val.Price;

        // Add a list item for the product.
        $('<li/>')
        .text(str)
        .appendTo($('#products'));   
    });

});
zedd45
  • 2,101
  • 1
  • 31
  • 34
  • Sorry, I tested this and I wasn't able to get it to work either. – Beer_en_thu_si_asT May 21 '13 at 19:57
  • Did you view the JSFiddle? It works there. Could the problem be your data is coming back empty, or not in the format you are expecting? – zedd45 May 21 '13 at 20:01
  • According to [this](http://stackoverflow.com/questions/6341191/document-readyfunction-is-not-working), my browser may not support jquery/1.7.1... I'm using chrome, is that not any good? – Beer_en_thu_si_asT May 21 '13 at 20:07
  • My current gig uses 1.7.2, and I do all my initial development in Chrome (then switch to FF & IE for testing). What OS are you running? what version of Chrome? – zedd45 Jul 08 '13 at 21:11