From my web page I consume getDogs  from my Controller:

2.  public ActionResult getDogs()
3.         {
4.             List<Dog> myDogs = new List<Dog>();
5.             Dog d = new Dog();
6. 
   
7.             d.dogName = "Doc";
8.             d.dogBreed = "Many";
9.             myDogs.Add(d);
10. 
    
11.             d = new Dog();
12.             d.dogName = "Sadie";
13.             d.dogBreed = "Boston Terrier";
14.             myDogs.Add(d);
15. 
    
16. 
    
17.            
18.             return Json(myDogs);
19.         }
20. 
    

In my page, using jQuery.each, I create a list of links showing each dogs name. In the on click of the link I want to pass the dog object into a function where I would access the dogName property. For this example I just alert it.  The message I get is undefined. I know how to pass individual properties both singular and multiple to a function. I can't seem to pass the object.

Thanks!

2. <script>
3.     $(document).ready(function () {
4.         getDogs();
5.     });
6. 
   
7.     function getDogs() {
8. 
   
9.         var myUrl = ' /ScratchPad/getDogs/ ';
10.        
11.         $.post(myUrl, null, function (data) { landGetDogs(data); }, 'json');
12.     }
13. 
    
14.     function landGetDogs(x) {
15.         $('#dogs').empty();
16.         jQuery.each(x, function () {
17.             $('#dogs').append("<li style='font-size:10px;margin:0;padding:0;margin-left:40px;list-style:none' ><a href='#' onclick='viewDog(" + '"' + this + '"' + ")'>" + this.dogName + "</a></li>");
18. 
    
19.         });
20.     }
21. 
    
22.     function viewDog(x) {
23.         alert(x.dogName);
24.     }
25. </script>