Umbraco站点使用JSON填充表单出现undefined及无限循环如何解决

问题核心原因 #

• 后端接口返回的JSON字符串被ASP.NET默认包装了XML标签，且响应头类型不是application/json，导致前端拿到的是纯字符串而非解析后的JSON数组对象
• 前端遍历字符串时会以字符串的字符长度作为循环次数，远大于实际数组长度，看起来像无限循环，同时单个字符自然没有Name/Value属性，所以返回undefined

后端控制器修复 #

原来的方法返回值为string，会被ASP.NET自动包装成对应格式（即你看到的XML外层标签），修改为直接返回JSON类型的响应即可：

[HttpGet()]
public ActionResult GetReportParamaters(string id)
{
    string json;
    using (WebClient wc = new WebClient())
    {
        wc.Headers.Add("Content-Type", "application/json");
        wc.Headers.Add("Accept:application/json");
        json = wc.DownloadString("http://apiurl/" + id);
    }
    // 直接返回JSON内容，设置正确的响应头，避免被包装
    Response.ContentType = "application/json";
    return Content(json);
}

前端代码修复 #

增加JSON解析校验、数组类型判断，同时提前清空表单避免内容叠加：

<form id="ssrsData">

</form>

<script>
$("#reports").change(function () {
    // 先清空旧表单内容，防止叠加
    $("#ssrsData").empty();
    // 用$.getJSON明确指定返回格式为JSON
    $.getJSON("/ControllerURL", { id: $('#reports').find(":selected").val() }, function (data) {
        // 兼容返回字符串的场景，手动解析JSON
        if (typeof data === 'string') {
            try {
                data = JSON.parse(data);
            } catch (e) {
                console.error("JSON解析错误：", e);
                return;
            }
        }
        // 校验是否为数组，避免遍历报错
        if (!Array.isArray(data)) {
            console.error("返回数据不是预期的数组格式");
            return;
        }
        var s = '';
        for (var i = 0; i < data.length; i++) {
            const item = data[i];
            // 跳过无效数据
            if (!item || !item.Name) continue;
            s += '<label for="' + item.Name + '">' + item.Name + ':</label><input type="text" id="' + item.Name + '" name="' + item.Name + '" value="' + (item.Value || '') + '"><br><br>'
        }
        $("#ssrsData").html(s);
    }).fail(function () {
        console.error("接口请求失败");
    });
});
</script>

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