Loading JSON data into DataTable from url

I have a scenario where I have a web service, that I need to pick data from, I did arrange it in an array format so as I could pick it up by columns and data and load it into a data table. And I am having challenges. Below is a sample when I load data from an already established array.

The link below is the URL I want to pick the data from http://dmutyaba12/services/cpi/SQLSvrDataServices.svc/datatables/Testing_Table

This data comes in a format below

[{"COLUMNS":[{"title":"BasketID"},{"title":"BasketName"}],"DATA":[[1,"Arua"],[2,"Fort Portal"],[3,"Gulu"],[4,"Jinja"],[5,"Kampala High"],[6,"Kampala Low"],[7,"Kampala Middle"],[8,"Masaka"],[9,"Mbale"],[10,"Mbarara"]]}]

The challenge here is I would love to load this information in a datatable where I select the columns and data from the same url using ajax. Below is what I have designed but it's not working, I am wondering have I formated the json output wrong or there is a step am missing here.

var jsonData;
    $.getJSON('http://dmutyaba12/services/cpi/SQLSvrDataServices.svc/datatables/Testing_Table', function(data) {
    //data is the JSON string
   jsonData =JSON.parse(data);
   });   

 $(document).ready(function() {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://dmutyaba12/services/cpi/SQLSvrDataServices.svc/datatables/Testing_Table',
    data: {
        json: JSON.stringify(jsonData)
    },
    success: function(d) {
        $('#example').DataTable({
            dom: "Bfrtip",
            data: d.data,
            columns: d.columns
        });
    }
});  

and the table

<table id="example"></table>