CODEWITHSUNDEEP
jqueryjsondatatables
Gujjar
Gujjar

Reputation: 367

Convert nested Json string to object and render in Jquery datatable cell

I want to convert Json string into object and render it's specific value in JQuery Datatable Cell. I tried several hours for this but didn't able to achieve.

Json Example

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

First I want to check if Error is normal string or json string, if normal string show as it is and if json string convert it into json object and render InnerException into datatable cell. i tried following code but didn't get correct result.

My code Example

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
  }
}
]
});

Upvotes: 1

Views: 434

Answers (1)

andrewJames
andrewJames

Reputation: 21910

I think you are close. If you can rely on the text containing "InnerException" (if there is an inner exception, of course), then you can do something like this:

<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>

This uses data.includes("InnerException") as the test to see if it is OK to parse the string as JSON, or not.

The end result:

enter image description here

Update

A more rigorous approach is to add a function such as this:

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

And then we can replace our string test with this:

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

Upvotes: 1

Related Questions