首页 > 解决方案 > 将嵌套的 Json 字符串转换为对象并在 Jquery 数据表单元格中呈现

问题描述

我想将 Json 字符串转换为对象并在 JQuery Datatable Cell 中呈现它的特定值。我为此尝试了几个小时,但未能实现。

json 示例

[
{ "id":1, "Error": "Name missing in datatable"},
{ "id":2, "Error": "{\"ErrorType\": \"401\", \"InnerException\":\"Invalid request, Please correct and submit\"}" }
]

首先,我想检查Error是普通字符串还是 json 字符串,是否显示正常字符串以及 json 字符串是否将其转换为 json 对象并将InnerException渲染到数据表单元格中。我尝试了以下代码,但没有得到正确的结果。

我的代码示例

var RespTable = $('#dtResponse').DataTable({
data: dataList,
columns: [
{ "title": "ID", "data": "id", "defaultContent": ""},
{ 
"title": "Error Message",
"data": "Error",
"defaultContent": "",
"render": function (data, type) {
  var obj = JSON.parse(data)
  if (obj != undefined)
  return obj.InnerException;
  else
  return data
  }
}
]
});

标签: jqueryjsondatatables

解决方案


我认为你很接近。如果您可以依赖包含“InnerException”的文本(当然,如果存在内部异常),那么您可以执行以下操作:

<script type="text/javascript">

let dataList = [{
        "id": 1,
        "Error": "Name missing in datatable"
    },
    {
        "id": 2,
        "Error": "{\"ErrorType\": \"401\", \"InnerException\":\"Invalid request, Please correct and submit\"}"
    }
];

  $(document).ready(function() {

    let RespTable = $('#dtResponse').DataTable( {
      data: dataList,
      columns: [
        { "title": "ID", "data": "id", "defaultContent": ""},
        { "title": "Error Message", "data": "Error", "defaultContent": "",
          "render": function (data, type) {
            if ( data.includes("InnerException") ) {
              let innerJson = JSON.parse(data);
              //console.log(innerJson);
              return innerJson.InnerException;
            } else {
              return data;
            }
          }
        }
      ]
    
  } );

} );

</script>

data.includes("InnerException")用作测试以查看是否可以将字符串解析为 JSON。

最终结果:

在此处输入图像描述

更新

更严格的方法是添加如下函数:

function IsJsonString(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}

然后我们可以用这个替换我们的字符串测试:

if ( IsJsonString(data) ) {...}

推荐阅读