What is an effective method for conditionally rendering a JSON datasource in a DataTable?

wyattbutp86

I am trying to find an effective method for adding conditional rendering to a datatable I'm displaying in an HTML page, which is pulling data from JSON source file stored locally. I am new to working with JSON, but have a decent amount of experience working with jQuery and so apologies if I don't get this quite right in my post.

Essentially, I am displaying a default datatable with three columns (a, b, and c), which are populated by info from the JSON source file. For instance, the JSON file looks something like this:

{"data":["a": "abc123", "b":{"sub_data": "llama","alpaca","chimpanzee"}, "c":"Friar Tuck"]}

"b" in the JSON file contains single word categories that need to comma separated when rendered in the HTML table. The issue is "b" in the JSON file is either blank like this "b":{}, or it has an array containing anywhere from one to several entries under "sub_data".

My jQuery code, for testing purposes, looks something like this right now (and returns all "sub_data" values in column B of the datatable:

$(document).ready(function() {
  $("#myTable").DataTable({
     "ajax": {
      url: "File Location",
      dataSrc: "data",
      processing: "true"
   },
  "columns": [
   {"data": "a" },
   {"data": "b",
     "render": function ( data, type, row ) {
      return data.sub_field + ',' + ' ';
     }

   },
   {"data": "c" }
  ]
});
});

The resulting data in Column b is then displayed with commas separating each item from the "sub_field" array. However, this results in formatting issues with spacing, commas after cells with only one string (e.g. "test, ") and I want to improve the function for column b so it only only adds commas if more than one item exists in the array and if there's no "sub_field" for "b" in the JSON file, then I want to display some placeholder text like "No Information Available". What's the best way to achieve this? Thank you!

wyattburp86

kthorngren

I'm not sure where its documented but you might be able to do something like this:
{"data": "b.sub_data[,]"},.

I put this example together with your data:
http://live.datatables.net/guzupise/1/edit

I did modify your JSON example as its not a valid JSON string.

Kevin

kthorngren

Actually its in the last example of the columns.data docs

Kevin

wyattbutp86

Thanks for the post and for catching the incorrect formatting in my sample JSON data. This almost gets me there, and after testing on my end, it skipped (correctly) any instances where "b.sub_data" was blank, but it unfortunately skipped any instances where "b.sub_data" had only one item like (e.g. "b":{"sub_data": "alpaca"} (if that makes sense). Thanks for the time and insights!

kthorngren

Using the [,] is expecting an array where "b":{"sub_data": "alpaca"} is a string. If you can always provide an array then [,] will work. If not then you will probably need to modify your columns.render function to check if the data is a string or an array. If its a string then just return the string otherwise if its an array you can use the Javascript join() method to return comma separated values.

Kevin