JavaScript 操作嵌套 JSON 數組：提取路徑與描述字段的標準姿勢

數據結構分析

給定變量 PacsData 為**數組**，包含單個對象，該對象擁有兩個屬性 Path 和 Descripte，**均為字符串數組**：

var PacsData = [{
  "Path": [ "路徑1", "路徑2" ],
  "Descripte": [ "描述1", "描述2" ]
}];

提取邏輯

1. PacsData[0] 取第一個（唯一）對象。
2. .Path 或 ['Path'] 訪問屬性，得到字符串數組。
3. 遍歷數組獲取每個元素。

標準代碼

<script>
var PacsData = [{
  "Path": [
    "F:\\1231\\debug\\Data\\979372\\PACS\\100126725\\274152\\DX_e3b0eb90f7fdf110052b16bfb046a763\\63ee787eb18278c105de27bc786cbc9a\\5667f7507dde0a9b5ad0097523b20b48_007332_000001.dcm.icon.jpg",
    "F:\\1231\\debug\\Data\\979372\\PACS\\100126725\\274152\\DX_e3b0eb90f7fdf110052b16bfb046a763\\63ee787eb18278c105de27bc786cbc9a\\3d68bf4c93ef11bbbb4f75f4e3c9cc8b_007332_000002.dcm.icon.jpg"
  ],
  "Descripte": [
    "影像所見:胸廓外形對稱，氣管居中。兩肺紋理清晰，未見實質性病變；雙側肺門未見增大、增濃。心影形態、大小無異常，主動脈未見明顯異常。兩膈面光整，兩肋膈角銳利。",
    "檢查結論:心肺未見明顯異常。"
  ]
}];

// 提取 Path 數組所有元素
var paths = PacsData[0].Path;
paths.forEach(function(p, i) {
    console.log("Path[" + i + "]: " + p);
    // 或 document.write(p + '
');
});

// 提取 Descripte 數組所有元素
var descs = PacsData[0].Descripte;
descs.forEach(function(d, i) {
    console.log("Descripte[" + i + "]: " + d);
});

// 若需單獨取第一個值
var firstPath = PacsData[0].Path[0];
var firstDesc = PacsData[0].Descripte[0];
console.log("第一個路徑:", firstPath);
console.log("第一個描述:", firstDesc);
</script>

關鍵注意點

• 雙層數組：外層 PacsData 是數組，內層 Path/Descripte 也是數組，**兩層都需索引**。
• 轉義字符：JSON 字符串中反斜杠需雙重轉義 \\\\，或使用模板字面量（ES6 反引號）避免轉義地獄。
• 健壯性判空：實際項目中應加保護：PacsData?.[0]?.Path?.[0] (ES2020 可選鏈)。
• 屬性名拼寫：Descripte 疑為 Description 拼寫錯誤，實際開發中嚴格按後端接口文檔定義。

進階：動態渲染到頁面

<div id="output"></div>
<script>
var container = document.getElementById('output');
(PacsData[0].Path || []).forEach(function(p) {
    var div = document.createElement('div');
    div.textContent = p;
    container.appendChild(div);
});
(PacsData[0].Descripte || []).forEach(function(d) {
    var div = document.createElement('div');
    div.style.color = '#666';
    div.textContent = d;
    container.appendChild(div);
});
</script>

總結

JSON 數據提取核心：**看清層級、按層索引、遍歷數組**。瀏覽器控制台 console.log(PacsData) 點擊展開觀察結構，比盯著代碼猜測快十倍。