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-09 21:30:13Z

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 9, 2020 at 21:30

answered Sep 9, 2020 at 21:12

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gujjar Over a year ago

What if Error string contains InnerException as a word? like "Error": "Name missing in datatable, see InnerException for more detail"

andrewJames Over a year ago

If there is no safe string test, then yes - this is not a suitable approach.

andrewJames Over a year ago

I have added a function you can use as a JSON tester.

andrewJames Over a year ago

If those options are not suitable (string check and try/catch), I think this question has some more approaches you can investigate.

Gujjar Over a year ago

I don't know using function like this is efficient way or it will work in all scenarios but its working for me.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related