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

Question

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

andrewjames · Accepted Answer · 2020-09-09T21:30:13.897

1

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:

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) ) {...}

edited Sep 09 '20 at 21:30

answered Sep 09 '20 at 21:12

andrewjames

8,705
5
10
31

What if Error string contains InnerException as a word? like "Error": "Name missing in datatable, see InnerException for more detail" – Gujjar Sep 09 '20 at 21:20
If there is no safe string test, then yes - this is not a suitable approach. – andrewjames Sep 09 '20 at 21:26
1

I have added a function you can use as a JSON tester. – andrewjames Sep 09 '20 at 21:30
If those options are not suitable (string check and try/catch), I think [this question](https://stackoverflow.com/questions/3710204/how-to-check-if-a-string-is-a-valid-json-string-in-javascript-without-using-try) has some more approaches you can investigate. – andrewjames Sep 09 '20 at 21:34
1

I don't know using function like this is efficient way or it will work in all scenarios but its working for me. – Gujjar Sep 09 '20 at 22:02
Yes - I am sure you are correct - this is not the most efficient approach (relying on a try/catch like this - and potentially performing the operation twice). I imagine it could be improved. – andrewjames Sep 11 '20 at 22:40

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

1 Answers1