why isn't jscript displaying my items?

Question

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.

Answer 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'));   
    });

});