Question

I am a new to JSON, I am trying to make the menu that can click and display the data.
All the objects are return from the Controller of my asp.net mvc project.

This is my code :

<script language="javascript" type="text/javascript">
  function ViewProduct() {
    var searchVal = $("#txtsearch").val();
    $.getJSON(url, function (data) {
      var mainMenu = $("#content ul#navmenu-v");
      $.each(data, function (index, dataOption) {
        var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
        mainMenu.append(new_li);
        $('a#' + dataOption.ID).click(function () {
        var urlGetProByDep = '<%: Url.Content("~/") %>' + "Products/GetProductsByDepList";
        t = dataOption.ID;
        var data = {};
        if (searchVal != "") {
          data.depID = t;
          data.Q = searchVal;
        } else {
          data.depID = t;
        }
      $(".brand_id").empty();
      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });
   });
}

$(document).ready(function () {
   ViewProduct(); 
});

The other block of menu code works very well , just have a problem with this block of my code above :

      $.getJSON("ProductListing/Index", data, function (product) {
         $(".brand_id").empty();
         $.getJSON("ProductListing/Index", data, function (product) {
            $.each(product.ja, function (index, value) {
               $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
            });
         });
      });

It is the block that I take the the object of JSON to display the in my view, but when I click on the menu , It shows only the element at the last of JSON object.

This is my JSON :

{"ja":
   [
       {"Name":"ABC1","PictureName1":"my image name1","ID":1},   
       {"Name":"ABC2","PictureName2":"my image name2","ID":2}
]}

Each menu is the department of each product. And if I do not loop the product data in the menu block, I cannot take the ID of the department to query to get the product in each department.

Any idea or question are welcome, Thanks you for taking your time.

Answer 1

You seem to have a copy&paste-error in your code, you will do 2 request to exactly the same url after each other – not even using the results of the first request. I guess you only wanted something like

$(".brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $(".brand_id").html( value.Name + "</br>" + value.PictureName + "</br>" + value.ID);
    });
});

But your problem is the .html() method. You are looping over your products, and in each turn you set the html of each .brand_id-element to a new value. So the result you see is what you have set to all elements in the last iteration. What you would need to do is set the HTML of each element on its own, each with a different content.

Yet, instead of emptying the list items and readding new contents to them (maybe the number of your products changes each query request), I’d rather remove all items and append new ones:

$(".brand_id").remove();
$.getJSON("ProductListing/Index", data, function (product) {
    var $parent = $("#parent"); // the parent node of the product list
    $.each(product.ja, function (index, value) {
         $parent.append('<li class="brand_id">' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</li>');
    });
});

(edit) …or, if brand_id really is an id:

var $parent = $("#brand_id").empty();
$.getJSON("ProductListing/Index", data, function (product) {
    $.each(product.ja, function (index, value) {
         $parent.append('<div>' + value.Name + '<br />' + value.PictureName + '<br />' + value.ID + '</div>');
    });
});