前端接收後端 JSON 數據：jQuery 自動解析與巢狀對象遍歷實戰

前端處理代碼

1. 基礎 AJAX 請求

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',  // 關鍵：自動解析
    success: function(data) {
        // data 已是 JavaScript 對象/數組
        console.log(typeof data);  // "object" (實為 Array)
        processData(data);
    },
    error: function(xhr, status, error) {
        console.error('請求失敗:', status, error);
    }
});

2. 巢狀數據遍歷渲染

function processData(listA) {
    var html = '';
    $.each(listA, function(i, a) {           // 遍歷 A 數組
        html += '<div class="group-a">' + a.name + '</div>';
        
        if (a.bList && a.bList.length > 0) {
            $.each(a.bList, function(j, b) {   // 遍歷 B 數組
                html += '<div class="group-b">' + b.title + '</div>';
                
                if (b.cList && b.cList.length > 0) {
                    html += '<ul class="group-c">';
                    $.each(b.cList, function(k, c) {  // 遍歷 C 數組
                        html += '<li>' + c.name + ':' + c.value + '</li>';
                    });
                    html += '</ul>';
                }
            });
        }
    });
    $('#container').html(html);
}

3. 現代 ES6+ 寫法（推薦）

// fetch + async/await
async function loadData() {
    try {
        const response = await fetch('/api/data');
        const listA = await response.json();  // 自動解析
        
        const html = listA.map(a => `
            <div class="group-a">${a.name}</div>
            ${a.bList?.map(b => `
                <div class="group-b">${b.title}</div>
                ${b.cList?.map(c => `
                    <li>${c.name}: ${c.value}</li>
                `).join('')}
            `).join('')}
        `).join('');
        
        document.getElementById('container').innerHTML = html;
    } catch (error) {
        console.error('加載失敗:', error);
    }
}

調試關鍵：先看原始響應

瀏覽器 Network 面板 → Response 標籤，確認 JSON 結構：

[
  {
    "id": 1,
    "name": "A1",
    "bList": [
      {
        "id": 10,
        "title": "B1",
        "cList": [
          {"name": "C1", "value": 100},
          {"name": "C2", "value": 200}
        ]
      }
    ]
  }
]

常見坑點

最佳實踐

1. 約定後端**永不返回 null 集合**，返回空數組 `[]`
2. 統一命名策略：後端駝峰、前端駝峰，避免下劃線轉換
3. 定義 TypeScript 接口對應後端實體，開發期發現結構變更
4. 錯誤邊界處理：網絡異常、解析失敗、空數據狀態各有 UI

核心口訣：dataType:json 自動解析，瀏覽器看 Response，可選鏈防空指針，ES6 模板字符串渲染。