2013-08-27 124 views
0

我有一個從我的c#代碼返回的json對象。我正在循環jQuery中的結果。如何循環通過對象數組中的Json結果對象

一切正常,但這只是一個示例對象。實際的對象是更大的方法,我目前使用的方法不是很乾淨。任何人都可以幫助我如何循環對象內的對象。

這裏是我的代碼..

響應JSON

[ 
    { 
     "ProductId":7363, 
     "ProductName":"Brisk Waterproof Men\u0027s Jacket", 
     "ProductDetails":{ 
     "ImagePath":"/assets/productimages/017/017271_BLA_MENS_BRISK_JACKET_-(10).jpg", 
     "ImageAltText":"BLACK:3", 
     "ProductSummary":"Waterproof & taped seams\r\nHighly breathable fabric\r\nDouble storm flap\r\nMultiple pockets", 
     "MSRP":{ 
      100.00  
     }, 
     "Price":{ 
      65.00 
     } 
     }, 
     "StatusCode":"Success", 
     "ErrorMessage":null 
    }, 
    { 
     "ProductId":6941, 
     "ProductName":"Fizz Kid\u0027s Waterproof Jacket", 
     "ProductDetails":{ 
     "ImagePath":"/assets/productimages/016/016792_BLA_FIZZ_KIDS_JACKET_SS13_4.jpg", 
     "ImageAltText":"BLACK:5", 
     "ProductSummary":"Waterproof & taped seams\r\nDetachable hood\r\nAdjustable hem\r\nMultiple pockets", 
     "MSRP":{ 
       150.00 
     }, 
     "Price":{ 
      129.00 
     } 
     }, 
     "StatusCode":"Success", 
     "ErrorMessage":null 
    } 
] 

jQuery的

$('.btnGo').on("click", function (e) { 
    console.log("click event fired"); 
    var jsonData = [{ 
     ProductId: "7363" 
    }, { 
     ProductId: "6941" 
    }]; 
    $.ajax({ 
     url: "/JsonHelper/ProductHelper.ashx", 
     data: JSON.stringify(jsonData), 
     dataType: 'json', 
     type: 'POST', 
     contentType: 'application/json', 
     success: function (data) { 
      $.each(data, function (key, value) { 
       console.log('Object: ' + key); 
       var details = value.ProductDetails; 
       var MSRP = value.ProductDetails.MSRP; 
       var price = value.ProductDetails.Price; 
       console.log(details); 
       console.log(MSRP); 
       console.log(price); 
       $('.resultJson').append("<br />"); 
       $.each(value, function (k, v) { 
        $('.resultJson').append(k + ": " + v + "<br />"); 
        if (k == "ProductDetails") { 
         if (details != null) { 
          $.each(details, function (dk, dv) { 
           $('.resultJson').append(dk + ": " + dv + "<br />"); 
          }); 
         } 
        } 
        if (k == "MSRP") { 
         if (MSRP != null) { 
          $.each(MSRP, function (mk, mv) { 
           $('.resultJson').append(mk + ": " + mv + "<br />"); 
          }); 
         } 
        } 
        if (k == "Price") { 
         if (price != null) { 
          $.each(price, function (pk, pv) { 
           $('.resultJson').append(pk + ": " + pv + "<br />"); 
          }); 
         } 
        } 
       }); 
       $('.resultJson').append("---------------- ------------------"); 
      }); 
     }, 
     error: function (data, status) { 
      console.log("FAILED:" + status); 
     } 
    }); 
}); 

我很困惑。每個$和不知道如何有效地循環通過多個物體。

+1

你是否研究過使用循環而不是每個?它可以幫助你。 http://www.w3schools.com/js/js_loop_for.asp – Coop

+0

你做得對,你還需要什麼? –

+0

如果你希望得到任何答案,你應該只顯示相關的代碼,而不是隻給你的整個jQuery事件處理;) – koleror

回答

1

我建議,如果你的數據是一致的,那麼你最好直接使用格式工作,而不是遍歷所有內容以找到鍵和值。

var success = function (data) { 
    var product, i, len, $output = $('.resultJson'); 
    for (i = 0, len = data.length; i < len; i++) { 
     product = data[i]; 
     console.log('Object: ' + i); 
     var details = product.ProductDetails; 
     var MSRP = product.ProductDetails.MSRP; 
     var price = product.ProductDetails.Price; 
     console.log(details); 
     console.log(MSRP); 
     console.log(price); 

     $output.append("<br />"); 
     $output.append("ProductId: " + product.ProductId + "<br />");   
     $output.append("ProductName: " + product.ProductName + "<br />");   
     $output.append("ProductDetails: " + "<br />"); 
     if (details) { 
      $output.append("ImagePath: " + details.ImagePath + "<br />"); 
      $output.append("ImageAltText: " + details.ImageAltText + "<br />"); 
      $output.append("ProductSummary: " + details.ProductSummary + "<br />"); 
      $output.append("MSRP: " + MSRP + "<br />"); 
      $output.append("Price: " + price + "<br />"); 
     } 
     $output.append("StatusCode: " + product.StatusCode + "<br />");   
     $output.append("ErrorMessage: " + product.ErrorMessage + "<br />");   
     $('.resultJson').append("---------------- ------------------"); 
    } 
}; 

我認爲後者更容易理解:我用你的代碼(跳過AJAX部分)和對比度another Fiddle用下面的代碼創建a Fiddle。當然,如果你的數據不太一致,所有這些都是沒有意義的。

+0

Aahhhhh !!!我喜歡你的方法...比我用的更乾淨... –

+0

+1並接受你的工作小提琴的答案。我的代碼也在工作,但我正在尋找一個更清潔的解決方案,你提供了.. –