如何使用JavaScript获取Azure DevOps API数据并以表格格式展示

核心步骤 #

• 先在Azure DevOps生成个人访问令牌(PAT)，权限至少包含Work Items的读取权限
• 确保页面已引入jQuery库（示例基于jQuery的AJAX实现）

修改后的完整代码 #

$(document).ready(function() {
    // 替换为你的组织名、PAT和目标工作项ID
    const orgName = "{org}";
    const pat = "{PAT}";
    const workItemId = 1;
    const apiVersion = "7.0";

    $.ajax({
        url: `https://dev.azure.com/${orgName}/infosoftaz/_apis/wit/workitems/${workItemId}?api-version=${apiVersion}`,
        type: "GET",
        dataType: 'json',
        headers: {
            // 注意Basic后必须加空格，btoa参数格式为":"+PAT（用户名留空）
            'Authorization': 'Basic ' + btoa(":" + pat)
        },
    }).done(function(results) {
        // 解析工作项的核心字段
        const workItemFields = {
            "标题": results.fields["System.Title"],
            "状态": results.fields["System.State"],
            "创建人": results.fields["System.CreatedBy"]["displayName"],
            "创建时间": results.fields["System.CreatedDate"]
        };

        // 动态构建HTML表格
        let tableHtml = '<table class="s-table">';
        // 表头
        tableHtml += '<thead><tr><th>字段名称</th><th>字段值</th></tr></thead>';
        // 表体
        tableHtml += '<tbody>';
        for (const [fieldName, fieldValue] of Object.entries(workItemFields)) {
            tableHtml += `<tr><td>${fieldName}</td><td>${fieldValue}</td></tr>`;
        }
        tableHtml += '</tbody></table>';

        // 渲染表格到页面
        $('#data_fetch').html(tableHtml);
    }).fail(function(error) {
        // 处理请求失败场景
        $('#data_fetch').html(`<p>请求失败：${error.responseText}</p>`);
    });
});

<div id="data_fetch"></div>

关键细节说明 #

• 认证修正：原代码中Basic后缺少空格，这是HTTP Basic认证的格式要求，必须补充才能正常通过权限校验
• 数据解析：Azure DevOps API返回的工作项数据，所有业务字段都存放在fields对象下，可通过System.Title这类标准字段名提取对应值
• 表格生成：通过遍历解析后的字段数据，动态拼接表格的行与单元格，让数据以结构化的表格形式展示，替代原代码直接输出JSON字符串的方式

最终展示效果 #

内容的提问来源于stack exchange，提问作者Gopalka Pratik