Home/ Questions/Q 8194773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T04:56:03+00:00

I have a simple page that takes an ID to find a specific product

  • 0

I have a simple page that takes an ID to find a specific product from the List of Products returned from the database and then display this product in the html page. I am able to see the JSON I expect to see when I use /api/products/12345 but when I try and query the data from the Index.cshtml page I get back the result –> undefined: $undefined in my page. I will past the Product class and my html page. Note, the display for ALL products renders perfectly.

public class Product
{
    public int ID { get; set; }
    public string ProductDescription { get; set; }
    public string UnitOfMeasure { get; set; }
    public decimal MSRP { get; set; }
    public string Category { get; set; }
    public int CategoryID { get; set; }
    public string ZipCode { get; set; }
}

This is my Index.cshtml page

<html lang="en">
<head>
<title>.:: Web API ::.</title>
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // Send an AJAX request - the second parameter is a callback function that is invoked when the request successfully completes.
        $.getJSON("api/products/",
        function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, val) {

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

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

    function find() {
        var id = $('#prodId').val();
        // Again, we call the jQuery getJSON function to send the AJAX request, but this time we use the ID to construct the request URI.
        $.getJSON("api/products/" + id,
            function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, val) {

                    // Format the text to display.
                    var str = val.ProductDescription + ': $' + val.MSRP;
                    $('#products').html(str);
                });
            })
        .fail(
            function (jqXHR, textStatus, err) {
                $('#products').html('Error: ' + err);
            });
        }     
</script>
</head>
<body>
<div>
    <h1>All Products</h1>
    <ul id='products' />
</div>
<div>
    <label for="prodId">ID:</label>
    <input type="text" id="prodId" size="5"/>
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
</div>

The problem I am having is with the find() function rendering to the UI meaningful data, I am seeing that data matching the ID 12345 is returned successfully.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Without seeing the code, it’s hard to know for sure, but I’m guessing the code of the controller actions at api/products it returns an array of objects as JSON – probably something like this: [{ID: 5, MSRP: 20.10},{ID: 6, MSRP: 10.10}]. Therefore using $.each(data, function() {...}) to go through the list of items makes sense.

    However, I’m guessing that api/products/5 returns a single object as JSON – something like this: {ID: 5, MSRP: 20.10}. Without the wrapping array, $.each(data, function() {...}) won’t do what you want. Try this for your callback function within find():

    function (data) {
    // On success, 'data' contains a *single* product.
   var str = data.ProductDescription + ': $' + data.MSRP;
   $('#products').html(str);
})

    If that doesn’t work, could you show a snippet of the data being returned by api/products vs. the data returned by api/products/5?

    • 0