555
Js遍曆Josn對象（內容對比頁實現思路）
經常在商城或汽車係統裏可以看到很多商品對比或車型對比的頁麵，最近做項目也遇到了這樣的需求，想到了一種實現思路，如果大家有什麼更好的辦法，不惜賜教。
1.實現基礎：擴展prototype，實現通過索引來訪問Josn對象屬性字段。
<script type="text/javascript">
Object.prototype.k = function (n, t) {
var arr = [];
for (pro in this) arr.push(pro);
return t ? arr[n] : this[arr[n]]
}
var jsonObject = { "UserID": 11, "Name": { "FirstName": "John", "LastName": "Hansen" }, "Email": "xxx@hotmail.com" };
var b = { b: { bb: { bbb: { bbbb: '22'}}} }
alert(jsonObject.k(0, 1)) //取屬性帶2個參數
alert(jsonObject.k(0)) //取直就隻帶一個參數
alert(b.k(0).k(0).k(0).k(0, 1))
alert(b.k(0).k(0).k(0).k(0))
</script>
2.思路分析：這裏的內容對比，假定對比的字段都是固定的，也就是說參與對比的幾個對象所擁有的字段都是一樣的。
①建好對比內容框架，固定表格對比字段，比如像這樣：
<table width="100%" class='border' border="0" cellpadding="2" cellspacing="1">
<tr>
<td id='field_r0_c0'>
對比字段1
</td>
<td>
<span id='field_r0_c1'></span>
</td>
<td>
<span id='field_r0_c2'></span>
</td>
<td>
<span id='field_r0_c3'></span>
</td>
<td>
<span id='field_r0_c4'></span>
</td>
</tr>
<tr>
<td id='field_r1_c0'>
對比字段2
</td>
<td>
<span id='field_r1_c1'></span>
</td>
<td>
<span id='field_r1_c2'></span>
</td>
<td>
<span id='field_r1_c3'></span>
</td>
<td>
<span id='field_r1_c4'></span>
</td>
</tr>
<tr>
<td id='field_r2_c0'>
對比字段3
</td>
<td>
<span id='field_r2_c1'></span>
</td>
<td>
<span id='field_r2_c2'></span>
</td>
<td>
<span id='field_r2_c3'></span>
</td>
<td>
<span id='field_r2_c4'></span>
</td>
</tr>
<tr>
<td id='field_r3_c0'>
對比字段4
</td>
<td>
<span id='field_r3_c1'></span>
</td>
<td>
<span id='field_r3_c2'></span>
</td>
<td>
<span id='field_r3_c3'></span>
</td>
<td>
<span id='field_r3_c4'></span>
</td>
</tr>
<tr>
<td id='field_r4_c0'>
對比字段5
</td>
<td>
<span id='field_r4_c1'></span>
</td>
<td>
<span id='field_r4_c2'></span>
</td>
<td>
<span id='field_r4_c3'></span>
</td>
<td>
<span id='field_r4_c4'></span>
</td>
</tr>
</table>
這裏通過col和row分別對應Josn對象裏的第幾個對象的第幾個字段。
②通過ajax方式，取得將要對比的內容的Josn數據格式。
③通過對Josn對象的分析，利用Js循環為每個單元格賦值，偽代碼：
for (var r = 0; r <fieldCount ; r++) { //fieldCount 對比Josn對象的字段數
for (var c = 1; c < cmpList.Length; c++) { //cmpList對比Josn集合
elem = "#field_r" + r + "_c" + c;
$(elem).html(cmpList[c][r]); //第幾個對象的地幾個字段值
}
}
2011年9月19日17:26:58 附加：
更好的遍曆Josn的方法，利用jquery的each方法：
var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
輸出：one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
輸出：1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
輸出：1 2 3 4 5
寫了幾個例子，運行一下看看就明白啦！很簡單吧！
最後更新：2017-04-02 06:51:56