Question

I have the JSON from my controller as below:

{"ja":
[
{
"ID":0,
"Name":"Son",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
]
}

This is my menu that I’m going to click on it :

<ul id="navmenu-v">
   <li id="select_list" class="level1">
    <a id="56" class="selectedcategory" href="javascript:void(0);">Accessories</a>
   </li>    
   <li id="select_list" class="level1">
    <a id="69" class="selectedcategory" href="javascript:void(0);">Audio Players</a>
   </li>
</ul>

And these are the div that I want to put each json in in :

 <div id="container">
  <div id="id"></div>
  <div id="name"></div>
  <div id="departmentID"></div>
  <div id="isNew"></div>
  <div id="pictureName"></div>
  <div id="isStock"></div>
</div>

then I want to loop all the JSON into different div beside the in my view when I click on my Menu.

Could anyone tell me how can I do that using $.getJSON() and $.each()? Thanks so much.

Answer 1

first ull have to bind the menu anchor elements to the click events like this

$("#56").click(function(){
   $.getJSON("baseUrl/Accesories",function(data){
       $.each(data,function(index,value){
         $('div#id').html($('div#id').html()+value.ID);
         //simillarily you can do for others too
       });
   });
});