n8n 進階資料解析：用 Code 節點，征服任何複雜 HTML 與 JSON 結構

你是否在使用 n8n 處理資料時，遇到過這樣的瓶頸？

你用 HTML Extract 節點爬取網頁，但想抓取的資料，分散在結構不規則的表格中，無法用單純的 CSS Selector 一次性抓取。
你從 API 接收到一個極度複雜的「巢狀 JSON」，資料埋藏在三、四層深的物件與陣列中，用 Set 節點的 Expressions {{ $json.data.user.profile.name }} 寫到手軟，而且難以處理其中的迴圈與條件。
你需要根據一份資料，動態地產生一個全新的、結構完全不同的 JSON 物件，再發送到下一個 API。

當 n8n 內建的視覺化資料處理節點（如 Set, Item Lists, HTML Extract）達到其極限時，就是釋放終極武器的時刻了——Code 節點。

透過在 Code 節點中撰寫自訂的 JavaScript 程式碼，你將獲得無與倫比的彈性與控制權，能夠解析、重塑、轉換任何你能想像到的複雜數據結構。這篇文章將是你的 n8n 進階資料解析實戰指南。我們將分別針對「複雜 JSON」與「複雜 HTML」兩大挑戰，提供具體的解決方案與程式碼範例，讓你學會如何征服最頑固的資料格式。

零基礎帶你完成屬於自己的n8n自動化流程

內容目錄

當內建節點不夠用：為什麼你需要用「程式碼」來解析資料？

在動手寫程式碼前，我們必須先釐清，為什麼有時候我們「必須」放棄方便的視覺化節點。

Set 節點的極限： Set 節點的 Expressions 非常適合進行「一對一」的欄位對應或簡單計算。但當你需要在單一 Item 內部進行迴圈（例如，處理一筆訂單中的多個商品項目）、或是需要根據複雜的條件邏輯來動態增減欄位時，單純的 Expressions 就會變得極度冗長且難以維護。
HTML Extract 節點的極限： HTML Extract 節點依賴於 CSS Selector 或 XPath 來定位資料，這對於結構清晰、規律的網頁非常有效。但如果網頁的結構混亂，例如你想抓取的資料分散在多個 <div> 中，且沒有共通的 class，或是你需要根據某個元素的「內容」來定位其「兄弟」元素，HTML Extract 就會顯得力不從心。

這時，Code 節點就給了你一把手術刀，讓你能夠精準地剖析數據的內在結構，執行任何你需要的客製化邏輯。

攻略一：在 Code 節點中處理「巢狀 JSON」的 JavaScript 技巧

API 回傳巢狀 JSON 是家常便飯。學會用 JavaScript 的原生陣列方法 .map(), .filter(), .reduce()，你就能優雅地處理它們。

情境： API 回傳了一筆使用者資料，其中包含一個 orders 陣列，我們需要處理這個陣列。 輸入資料範例：

JSON

{
  "user_id": "u-123",
  "name": "陳先生",
  "orders": [
    { "order_id": "ord-A", "amount": 1500, "status": "shipped" },
    { "order_id": "ord-B", "amount": 800, "status": "pending" },
    { "order_id": "ord-C", "amount": 3200, "status": "shipped" }
  ]
}

技巧一：重塑與提取 (Map)

目標： 我們不想要訂單的所有欄位，只想提取出所有「已出貨 (shipped)」訂單的 order_id，並組合成一個新的、單純的陣列。
Code 節點程式碼：JavaScriptconst newItems = []; for (const item of items) { const user = item.json; // 1. 使用 .filter() 篩選出 status 為 'shipped' 的訂單 const shippedOrders = user.orders.filter(order => order.status === 'shipped'); // 2. 使用 .map() 從篩選後的訂單中，只提取出 order_id const shippedOrderIds = shippedOrders.map(order => order.order_id); // 3. 建立一個新的 JSON 物件來存放結果 const result = { user_id: user.user_id, shipped_orders: shippedOrderIds }; newItems.push({ json: result }); } return newItems;
輸出結果： {"user_id": "u-123", "shipped_orders": ["ord-A", "ord-C"]}

技巧二：計算與彙總 (Reduce)

目標： 計算該使用者的「總訂單金額」。
Code 節點程式碼：JavaScript// ... (迴圈部分同上) const user = items[0].json; // 使用 .reduce() 來累加所有訂單的 amount const totalAmount = user.orders.reduce((sum, order) => { return sum + order.amount; }, 0); // 0 是初始值 items[0].json.total_spending = totalAmount; return items;
輸出結果： 原有的 JSON 會被加上一個新欄位 total_spending: 5500。

攻略二：為 n8n 裝上翅膀 — 安裝 Cheerio 來解析複雜 HTML

n8n 的 Code 節點預設環境，並沒有內建強大的 HTML 解析器。要用程式碼解析 HTML，我們需要先為 n8n 安裝一個超熱門的函式庫：Cheerio。

Cheerio 能讓你在伺服器端，使用類似 jQuery 的語法，來遍歷和操作 HTML 文件，非常輕量且高效。

如何安裝 Cheerio？

你需要透過建立一個客製化的 Docker Image 來完成。請參考我們的「n8n NPM 使用終極指南」中的詳細教學。簡單來說，你的 Dockerfile 會長這樣：

Dockerfile

FROM n8nio/n8n

# 安裝 Cheerio
RUN npm install cheerio

建置並啟動這個客製化的 Image 後，你的 n8n Code 節點就擁有了 require('cheerio') 的能力。

實戰演練：使用 Cheerio 抓取結構不規則的網頁表格

目標： 爬取一個 HTML 結構混亂的產品規格表。表格沒有 <table> 標籤，而是由一堆 <div> 組成，規格名稱和值交錯排列。
HTML 原始碼範例：HTML<div class="specs-container"> <div class="spec-name">CPU</div> <div class="spec-value">Intel Core i9</div> <div class="spec-name">RAM</div> <div class="spec-value">32GB DDR5</div> <div class="spec-name">硬碟</div> <div class="spec-value">1TB NVMe SSD</div> </div>
流程設計： HTTP Request -> Code (Parse with Cheerio)

Code 節點程式碼：

JavaScript

// 載入我們安裝好的 Cheerio 函式庫
const cheerio = require('cheerio');

const newItems = [];

for (const item of items) {
  const html = item.json.body; // 從 HTTP Request 節點取得 HTML
  const $ = cheerio.load(html); // 將 HTML 載入到 Cheerio 中
  
  const specs = {};
  
  // 使用 .each() 遍歷所有 class 為 spec-name 的 div
  $('.specs-container .spec-name').each((index, element) => {
    // 取得規格名稱 (例如 "CPU")
    const key = $(element).text().trim();
    
    // 取得下一個兄弟元素 (也就是 spec-value) 的文字內容
    const value = $(element).next('.spec-value').text().trim();
    
    // 將 key-value 存入我們的 specs 物件
    if (key && value) {
      specs[key] = value;
    }
  });
  
  newItems.push({ json: specs });
}

return newItems;

輸出結果：JSON{ "CPU": "Intel Core i9", "RAM": "32GB DDR5", "硬碟": "1TB NVMe SSD" }

透過 Cheerio 靈活的選擇器與遍歷能力，我們成功地將一個不規則的 HTML 結構，轉換成了乾淨的 JSON 物件。

Code 節點解析的最佳實踐與錯誤處理

永遠使用 try...catch： 當你處理來自外部的、結構不可預期的資料時，解析過程很容易出錯（例如，API 回傳的某個欄位突然不見了）。將你的核心解析邏輯，包在 try...catch 區塊中，可以確保即使單一 Item 解析失敗，也不會讓整個工作流中斷。
驗證資料存在性： 在存取深層巢狀物件前，先檢查每一層是否存在，可以避免 Cannot read properties of undefined 的經典錯誤。例如：const name = item.json.data?.user?.profile?.name || 'N/A'; (可選串連運算子 ?. 是你的好朋友)。
保持 Code 節點功能單一： 讓一個 Code 節點只專注於一件解析任務。如果你的流程需要多個複雜的解析步驟，可以考慮將它們拆分成多個 Code 節點，或是建立一個專門的「資料處理子流程」。