How can I use "$.each" inside "$.each" ?

How can I use "$.each" inside "$.each" ?

Hello, 

I am working on a one HTML page application that uses a REST web site to provide data and JSON to move data back and forth.
My experience with JQuery and JSON is quite limited.  
I have a question on how to use $.each inside $.each to produce a nice display.

I would like to post my HTML page below with comments, the page displays a set of buttons, 
I use jQuery to fill the buttons with a text and attach an OnClick handler, 
on click I call the REST service to receive an array of objects.

For each objects, I create an <LI> with the obj.Name property and an indented box underneath. 
What I would like to do, is to create a new <UL> in this box and display each members of the current object with the $.each function 
but at this point I am already inside a $.each so I can't find a way to iterate inside the iteration and produce the output.

Could you please help me find the right syntax to do that ?

Thanks a lot,
Claude

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.         <title>Inventory</title>
  6.         <style>
  7.                 .basicDIV{ border:thin solid blue; display:block; margin:2px; padding:2px; }
  8.                 .hidDIV{ visibility:hidden; }
  9.                 .visDIV{ visibility:visible; }
  10.         </style>

  12.         <script type="text/javascript" src="http://localhost:56486/Scripts/jquery-1.7.1.js"></script>

  14.         <script type="text/javascript">

  16.                 $(document).ready(function () {
  17.                         //I have the feeling this is mandatory to debug in VS2010 but I am not sure yet...
  18.                         jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)

  20.                         //First, I initialize the buttons
  21.                         $("button").each(InitButton);
  22.                 });

  24.                 function InitButton(idx, btn) {
  25.                         $(btn).text(btn.id);
  26.                         $(btn).click(Button_OnClick);
  27.                 }

  29.                 function Button_OnClick(ev) {
  30.                         //On click...  I get the ID of the button and update the title
  31.                         var sId = ev.srcElement.id;
  32.                         $("#title").html(sId);

  34.                         //I empty the list
  35.                         $("#list").empty();

  37.                         //I call my Restfull service that returns JSON objects 
  38. //like this: {"Id":"0","Name":"MyInv","Areas":[]},{"Id":"1","Name":"MyApp","Areas":[] }
  39.                         var sRestService = "http://localhost:56486/api/" + sId;
  40.                         $.getJSON(sRestService, get_Callback);
  41.                 }

  43.                 function get_Callback(data, textStatus, jqXHR) {
  44.                         if (textStatus == "success") {
  45.                                 //First, I show to blocks if they are hidden
  46.                                 $("#inputBlock.hidDIV").removeClass("hidDIV").addClass("visDIV");
  47.                                 $("#listBlock.hidDIV").removeClass("hidDIV").addClass("visDIV");
  48.                                 
  49.                                 //Second, read each object received
  50.                                 $(data).each(ReadData);
  51.                         }
  52.                         else
  53.                                 alert(textStatus);
  54.                 }

  56.                 function ReadData(idx, obj) {
  57.                         /*
  58.                                 First, show the index and the Name property of this this object, this works.
  59.                                 But, as a detail of this <LI>, I would like another list with all members of this object.
  60.                                 For example :
  61.                                 <UL>
  62.                                         <LI>0. MyInv
  63.                                                 <DIV>
  64.                                                         <UL>
  65.                                                                 <LI>0. (Id: 0)</LI>
  66.                                                                 <LI>0. (Name: MyInv)</LI>
  67.                                                                 <LI>0. (Areas: {})</LI>
  68.                                                         </UL>
  69.                                                 </DIV>
  70.                                         </LI>
  71.                                         <LI>1. MyApp
  72.                                                 <DIV>
  73.                                                         <UL>
  74.                                                                 <LI>1. (Id: 1)</LI>
  75.                                                                 <LI>1. (Name: MyApp)</LI>
  76.                                                                 <LI>1. (Areas: {})</LI>
  77.                                                         </UL>
  78.                                                 </DIV>
  79.                                         </LI>
  80.                                 </UL>
  81.                                 So, while I am in the Append() method, I don't see how I could iterate on each member of the object 
  82. and at the same time, append HTML.
  83.                         */
  84.                         $("#list").append("<li>" + idx + ". " + obj.Name + "</li>").append("<div class='basicDIV visDIV'></div>").append("<ul></ul>").append("<li></li>");
  85.                 }
  86.         </script>
  87. </head>
  88. <body>
  89.     <form id="form1" runat="server">
  90.                 <div class="main-content">
  91.                         <div class="basicDIV visDIV">
  92.                                 <button id="Application" type="button"></button>
  93.                                 <button id="Area" type="button"></button>
  94.                                 <button id="Contact" type="button"></button>
  95.                         </div>

  97.                         <h1 id="title"></h1>

  99.                         <div id="inputBlock" class="basicDIV hidDIV">
  100.                                 <label for="prodId">ID:</label>
  101.                                 <input type="text" id="prodId" size="5"/>
  102.                                 <input type="button" value="Search" onclick="find();" />
  103.                                 <p id="product" />
  104.                         </div>

  106.                         <div id="listBlock" class="basicDIV hidDIV">
  107.                                 <ul id="list"/>
  108.                         </div>
  109.                 </div>
  110.     </form>
  111. </body>
  112. </html>