ASP.NET Core C# 如何解析表中JSON数组列并在cshtml中渲染为表格

你数据库中存储的Chap2字段本身是已经序列化完成的JSON字符串，后端接口直接将该字符串通过Json()方法再次序列化后返回，相当于给原始JSON外层额外套了一层转义引号。前端$.getJSON解析后拿到的result不是你预期的数组，而是一个纯字符串，你打印的length是该字符串的总字符长度（你遇到的603就是该JSON字符串的字符数），遍历字符串时每个下标拿到的是单个字符，自然无法读取到designe、ncas等属性，渲染出来全是undefined。

有两种修复方式，推荐优先修改后端逻辑：

• 后端修复方案（推荐）
  先将数据库取出的JSON字符串反序列化为对象集合后再返回，前端即可直接拿到可遍历的数组。
  首先定义对应结构的模型类：

public class ComposantItem
{
    public string designe { get; set; }
    public string ncas { get; set; }
    public string symbole { get; set; }
    public string poids { get; set; }
    public string rphrases { get; set; }
}

修改接口逻辑：

public ActionResult GetComposant(String fam)
{
    var chap2Json = _context.Fds.Where(e => e.Fam == fam).Select(e => e.Chap2).FirstOrDefault();
    if(string.IsNullOrEmpty(chap2Json))
    {
        return Json(Enumerable.Empty<ComposantItem>());
    }
    // 反序列化JSON字符串为对象数组
    var ComposantInfo = System.Text.Json.JsonSerializer.Deserialize<List<ComposantItem>>(chap2Json);
    Debug.Write(ComposantInfo);
    return Json(ComposantInfo);
}

• 前端临时修复方案
  如果暂时不方便修改后端代码，可以在前端拿到返回结果后先手动做一次JSON解析：

$.getJSON("GetComposant", { fam: selectedVal.toString() }, function (result) {
    // 新增以下代码，判断如果是字符串就转成数组
    result = typeof result === 'string' ? JSON.parse(result) : result;
    // 原有逻辑保持不变
    console.log(result);
    console.log(result.length);
    if (result.length == 0) {
        $('#msg').text("CeTTE FAMILLE n'a pas de FDS , veuillez la creer ");
        $('#msg').css('color', 'red')
        var tr;
        tr = $('<tr style="background-color: indianred;"/>');
        tr.append("<td contenteditable='true'>" + "</td>");
        tr.append("<td contenteditable='true'>" + "</td>");
        tr.append("<td contenteditable='true'>" + "</td>");
        tr.append("<td contenteditable='true'>" + "</td>");
        tr.append("<td contenteditable='true'>" + "</td>");
        $('table').append(tr);
    }
    else {
        $('#msg').text("FDS existe déja");
        $('#msg').css('color', 'green')
        var tr;
        for (var i = 0; i < result.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + result[i].designe + "</td>");
            tr.append("<td>" + result[i].ncas + "</td>");
            tr.append("<td>" + result[i].symbole + "</td>");
            tr.append("<td>" + result[i].poids + "</td>");
            tr.append("<td>" + result[i].rphrases + "</td>");
            $('table').append(tr);
        }
    }
})

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