jQuery: Datatables Adding data to the table

trevor1940
trevor1940 used Ask the Experts™
on
Hi I'm using  DataTables to show some point data I had it working now the JSON format has changed I've got most of it fixed except loading the dataTable

From

            $.each(json, function(i, item) {
                console.log(item.id + " Long Lat " + item.Long + ', ' + item.Lat);

Open in new window


New

            $.each(json.features, function(i, item) {
    
                console.log(item.attributes.id + " Long Lat " + item.attributes.Long + ', ' + item.attributes.Lat);

Open in new window


How might I adjust the DataTable code to account for the new JSON data format


OLD Method Th e new data is not available but I've found some similar looking data here
function GetPoints(Long, Lat) {
  //alert("long " + Long + " Lat " + Lat);
  
           var link = "Mock_data.json";
          //          $('#MainTable tbody').html(table);
          var arr=[];
          
         $('#dTable').DataTable({
//           $('#dTable').ajax.reload(),
    "columns": [{ "data": "id" }, { "data": "name" }, { "data": "Lat" }, { "data": "Long" }, {"data": "country_code"},{ "data": "url" }, { "data": "description" }],
    "ajax": {
        "url": link,
        "dataSrc" : function (json) {

//new
            $.each(json.features, function(i, item) {
    
                console.log(item.attributes.id + " Long Lat " + item.attributes.Long + ', ' + item.attributes.Lat);

}// End gGetPoints

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
What was your old JSON format?
What is your new JSON format?
Why did it change?

Where is your DataTable code?

Author

Commented:
Julian Hansen

This is a mock up of the old method I had at home I've altered the original  JSON data to represent the changed format from a different source

This is as close I can get to the actual

I've changed some he Javascript to match the new data format It all seems to work apart from loading the data in the DataTable

<!DOCTYPE html>
<html>
  <head>
    <title>Data Tables</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/fc-3.2.2/fh-3.1.2/rr-1.2.0/sc-1.4.2/datatables.min.js"></script>
  <script src="/OpenLayers-2.13.1/OpenLayers.js"></script>
    <style>
      #MainDiv{
        width: 75%;
      }
  table.bordered {
  margin: 1em;
  border-collapse: collapse;
  border: 1px solid grey;
 width: 100%;
}

table.bordered td {
    border: 1px solid grey;
    text-align: center;
    font-size: 0.9em;
}
table.bordered th {
    border: 1px solid grey;
   background-color: lightgrey;
    text-align: center;
    font-size: 0.9em;
}

.highlight{
   background-color: red;
   font: bold;

}
</style>  
  </head>
    <body onload="init()">
      
    <div class="wrapper">
      <header>
        <div class="container">
        <h1 >OpenLayers Click map to simulate a  search</h1>
        
        </div>
      </header>
      <div class="container">

    <div id="mapdiv" style="width: 800px;height: 500px " ></div>
      <h2>Custom Data for clicked item</h2>
      <pre id="result"></pre>
      </div>
   <div id=MainDiv>

      <table id="dTable" class="bordered">
        <thead>
          <tr>
            <th>objectid</th>
            <th>name</th>
            <th>LONG_</th>
            <th>LAT</th>
            <th>country_code</th>
            <th>url</th>
            <th>description</th>
          </tr>
        </thead>
        <tfoot>
        <tr>
          <th>objectid</th>
          <th>name</th>
          <th>LONG_</th>
          <th>LAT</th>
          <th>country_code</th>
          <th>url</th>
          <th>description</th>
        </tr>
        </tfoot>
      </table>
    </div>
   </div>
   <script type='text/javascript'>
     console.log('1');
     // creat globalls

    var map;
    var markers;
    var searchLayer;
    var RedIcon;
    var BlueIcon;
      // transform to WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:4326");

// Spherical Mercator Projection OpenStreetMap 
var fromProjection = new OpenLayers.Projection("EPSG:900913");


OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
  defaultHandlerOptions: {
    'single': true,
    'double': false,
    'pixelTolerance': 0,
    'stopSingle': false,
    'stopDouble': false
  },

  initialize: function(options) {
    this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
    OpenLayers.Control.prototype.initialize.apply(
      this, arguments
    );
    this.handler = new OpenLayers.Handler.Click(
      this, {
        'click': this.trigger
     }, this.handlerOptions
    );
  },

  trigger: function(e) {
    //A click happened!
    markers.clearMarkers();
    var lonlat = map.getLonLatFromViewPortPx(e.xy);
    console.log(lonlat.lon + ',' + lonlat.lat);
    var Point = new OpenLayers.Marker(new OpenLayers.LonLat(lonlat.lon, lonlat.lat), RedIcon.clone());
    markers.addMarker(Point);
    GetPoints(lonlat.lon, lonlat.lat); // make a reusable funtion actual app has manual search
  }

});
function init() {
  


  map = new OpenLayers.Map('mapdiv', {
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher({'ascending':false}),
            new OpenLayers.Control.Permalink(),
            new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.Permalink('permalink'),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.OverviewMap(),
            new OpenLayers.Control.KeyboardDefaults()
        ],
        displayProjection: toProjection,
        numZoomLevels: 6

    });
  markers = new OpenLayers.Layer.Markers("Markers");
  map.addLayer(markers);
  searchLayer = new OpenLayers.Layer.Markers("Search Layer");
  map.addLayer(searchLayer);
  var size = new OpenLayers.Size(21, 25);
  var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
//  BlueIcon = new OpenLayers.Icon('/OpenLayers-2.13.1/img/marker-blue.png', size, offset);
  BlueIcon = new OpenLayers.Icon('/OpenLayers/img/blue-marker.png', size, offset);
  RedIcon = new OpenLayers.Icon('img/marker.png', size, offset);



//  console.log(BlueIcon);
  map.addLayer(new OpenLayers.Layer.OSM());
  map.zoomToMaxExtent();

  var click = new OpenLayers.Control.Click();
  map.addControl(click);
  click.activate();
}

function GetPoints(LONG_, LAT) {
  console.log('3');
  //alert("long " + LONG_ + " LAT " + LAT);
  
           var link = "EEmock_data.json";
          //          $('#MainTable tbody').html(table);
          var arr=[];
          
         $('#dTable').DataTable({
//           $('#dTable').ajax.reload(),
    "columns": [{ "data": "objectid" }, { "data": "name" }, { "data": "LONG_" }, { "data": "LAT" }, {"data": "country_code"},{ "data": "url" }, { "data": "description" }],
    "ajax": {
        "url": link,
        "dataSrc" : function (json) {
                      $.each(json.features, function(i, item) {
    
                console.log(item.attributes.objectid + " Long Lat " + item.attributes.Long + ', ' + item.attributes.Lat);
                item.attributes.objectid = item.attributes.objectid;// * 2;
                item.attributes.name = item.attributes.name.toUpperCase();
                item.attributes.url = '<a href="' + item.attributes.url + '" onclick="return false;">Dummy</a>';

    // make new marker obbject with BlueIcon else its red
                var mkr = new OpenLayers.Marker(new OpenLayers.LonLat(item.attributes.LONG_, item.attributes.LAT).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), BlueIcon.clone());
                console.log(fromProjection, toProjection);
                    mkr.custData = item.attributes;
                mkr.events.register("click", mkr, function(e, i) {
                  $(".olPopup").each(function(){
                    map.removePopup(map.popups[0]);
                  });
                  console.log("click");
                  $('#result').html(JSON.stringify(this.custData));
                  var  ID =   this.custData.objectid;
                  $("#row_" + ID).prependTo('#dTable').toggleClass('highlight');
                  popup = new OpenLayers.Popup.FramedCloud("chicken",
                    this.lonlat,
                    new OpenLayers.Size(200, 200),
                    "<h2>" + this.custData.name + "</h2><p>" + this.custData.url + "</p>",
                    null, true);
                  map.addPopup(popup);
                });
                console.log(mkr); // 6 mkr objects in console
//                Add mkr to map
                searchLayer.addMarker(mkr);
            });

            return json;
        },
    },
     
    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        // aData is the JSON for each row, so you can access the properties, such as  aData.LONG_, aData.name, aData.url, aData.objectid
        var rowId = "row_" + aData.attributes.objectid; 
        nRow.setAttribute('id',rowId);
    },
    
    scrollY : '200px', 
    scrollCollapse: true,
    paging: false,
    searching: false,
    info: true,
    "bDestroy": true
        });
}// End gGetPoints
     
</script>
  </body>
</html>

Open in new window


Old Data

[{"id":1,"name":"Irosin","Long":124.036411,"Lat":12.712478,"country_code":"AAA","url":"http://dummyimage.com/135x216.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":2,"name":"Menongue","Long":17.6984879,"Lat":-14.6594083,"country_code":"BBB","url":"http://dummyimage.com/149x135.png/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":3,"name":"Donglai","Long":126.154678,"Lat":41.654661,"country_code":"CCC","url":"http://dummyimage.com/100x109.png/5fa2dd/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":4,"name":"San Sebastian","Long":121.0519495,"Lat":14.7044701,"country_code":"DDD","url":"http://dummyimage.com/114x212.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":5,"name":"Teutônia","Long":-51.7994632,"Lat":-29.4799379,"country_code":"EEE","url":"http://dummyimage.com/247x178.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":6,"name":"Staroutkinsk","Long":59.3184961,"Lat":57.2287633,"country_code":"FFF","url":"http://dummyimage.com/169x222.jpg/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":7,"name":"Molo","Long":35.7323709,"Lat":-0.2488358,"country_code":"GGG","url":"http://dummyimage.com/242x164.bmp/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":8,"name":"Amnat Charoen","Long":99.855247,"Lat":12.0554892,"country_code":"HHH","url":"http://dummyimage.com/115x148.png/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":9,"name":"Jinjiang","Long":118.552365,"Lat":24.781681,"country_code":"III","url":"http://dummyimage.com/122x185.jpg/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."},
{"id":10,"name":"Sairam","Long":85.3117065,"Lat":27.6985161,"country_code":"JJJ","url":"http://dummyimage.com/117x156.jpg/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}]

Open in new window


New Data

{"objectIdFieldName":"objectid","globalIdFieldName":"globalid","geometryType":"esriGeometryPoint","spatialReference":{"wkid":4326,"latestWkid":4326},"fields":[{"name":"objectid","alias":"OBJECTID","type":"esriFieldTypeOID"},{"name":"facilityid","alias":"Emergency Facility ID","type":"esriFieldTypeString","length":20},{"name":"facname","alias":"Name","type":"esriFieldTypeString","length":255},{"name":"factype","alias":"Feature Type","type":"esriFieldTypeInteger"},{"name":"organiz","alias":"Organization","type":"esriFieldTypeString","length":255},{"name":"jurisdict","alias":"Jurisdiction","type":"esriFieldTypeString","length":255},{"name":"pocname","alias":"Contact Name","type":"esriFieldTypeString","length":255},{"name":"pocemail","alias":"Contact Email","type":"esriFieldTypeString","length":255},{"name":"pocphone","alias":"Contact Phone","type":"esriFieldTypeString","length":255},{"name":"capacity","alias":"Capacity","type":"esriFieldTypeString","length":255},{"name":"hoursoper","alias":"Hours Operation","type":"esriFieldTypeString","length":255},{"name":"daysoper","alias":"Days Operation","type":"esriFieldTypeString","length":255},{"name":"accessres","alias":"Access Restrictions","type":"esriFieldTypeString","length":255},{"name":"opendate","alias":"Open Date","type":"esriFieldTypeDate","length":8},{"name":"closeddate","alias":"Closed Date","type":"esriFieldTypeDate","length":8},{"name":"opsstatus","alias":"Operational Status","type":"esriFieldTypeString","length":50},{"name":"lastupdate","alias":"Last Update Date","type":"esriFieldTypeDate","length":8},{"name":"lasteditor","alias":"Last Editor","type":"esriFieldTypeString","length":50},{"name":"globalid","alias":"GlobalID","type":"esriFieldTypeGlobalID","length":38},{"name":"sheltstat","alias":"Shelter Status","type":"esriFieldTypeInteger"},{"name":"sheltcap","alias":"Shelter Capacity","type":"esriFieldTypeInteger"},{"name":"sheltcurpop","alias":"Shelter Current Population","type":"esriFieldTypeInteger"},{"name":"petfriend","alias":"Pet Friendly","type":"esriFieldTypeInteger"},{"name":"wheelchair","alias":"Wheelchair Accessible","type":"esriFieldTypeInteger"},{"name":"adacomp","alias":"ADA Compliant","type":"esriFieldTypeInteger"}],
  "features":
          [{"attributes":
              {"objectid":1,"name":"Irosin","LONG_":124.036411,"LAT":12.712478,"country_code":"AAA","url":"http://dummyimage.com/135x216.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}
          },
            { "attributes": {"objectid":2,"name":"Menongue","LONG_":17.6984879,"LAT":-14.6594083,"country_code":"BBB","url":"http://dummyimage.com/149x135.png/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}
            },
{"attributes":{"objectid":3,"name":"Donglai","LONG_":126.154678,"LAT":41.654661,"country_code":"CCC","url":"http://dummyimage.com/100x109.png/5fa2dd/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}},
{"attributes":{"objectid":4,"name":"San Sebastian","LONG_":121.0519495,"LAT":14.7044701,"country_code":"DDD","url":"http://dummyimage.com/114x212.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}},
{"attributes":{"objectid":5,"name":"Teutônia","LONG_":-51.7994632,"LAT":-29.4799379,"country_code":"EEE","url":"http://dummyimage.com/247x178.bmp/dddddd/000000","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}},
{"attributes":{"objectid":6,"name":"Staroutkinsk","LONG_":59.3184961,"LAT":57.2287633,"country_code":"FFF","url":"http://dummyimage.com/169x222.jpg/cc0000/ffffff","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."}
}              
]}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I can't get your code to work properly but lets look at the two JSON structures

In the original you have an array of these
{
      "id":1,
      "name":"Irosin",
      "Long":124.036411,
      "Lat":12.712478,
      "country_code":"AAA",
      "url":"http://dummyimage.com/135x216.bmp/dddddd/000000",
      "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."
   },

Open in new window

In the second you have this
{
 ...
 "features":[
      {
         "attributes":{
            "objectid":1,
            "name":"Irosin",
            "LONG_":124.036411,
            "LAT":12.712478,
            "country_code":"AAA",
            "url":"http://dummyimage.com/135x216.bmp/dddddd/000000",
            "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pellentesque scelerisque. Proin vel elit."
         }
      },

Open in new window


So where you would have used this
"dataSrc": function(json) {
   json.forEach(function(item) {
     console.log(item.name);
     console.log(item.Long);
     console.log(item.Lat);
   });
}

Open in new window

You would now have to do this
"dataSrc" : function(json) {
    json.features.forEach(function(item) {
          console.log(item.attributes.name);
          console.log(item.attributes.LONG);
          console.log(item.attributes.LAT);
    });
}

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi
Yes I kinda got that far

It's the DataTable bit I'm struggling with

My understanding is this line relates to the JSON data

    "columns": [{ "data": "objectid" }, { "data": "name" }, { "data": "LONG_" }, { "data": "LAT" }, {"data": "country_code"},{ "data": "url" }, { "data": "description" }],

Open in new window


And should match the actual table column order (Not Sure if the <th> values need to be the same?

      <table id="dTable" class="bordered">
        <thead>
          <tr>
            <th>objectid</th>
            <th>name</th>
            <th>LONG_</th>
            <th>LAT</th>
            <th>country_code</th>
            <th>url</th>
            <th>description</th>
          </tr>
        </thead>
        <tfoot>
        <tr>
          <th>objectid</th>
          <th>name</th>
          <th>LONG_</th>
          <th>LAT</th>
          <th>country_code</th>
          <th>url</th>
          <th>description</th>
        </tr>
        </tfoot>
      </table>

Open in new window


I Tried this but it didn't work

    "columns": [{ "data": "features.attributes.objectid" }, { "data": "features.attributes.name" }, { "data": "features.attributes.LONG_" }, { "data": "features.attributes.LAT" }, {"data": "features.attributes.country_code"},{ "data": "features.attributes.url" }, { "data": "features.attributes.description" }],

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Question: why are you generating the data differently?

Assuming you have to do it this way then I would have an intermediary function client side that receives the new data and then reformats it into the current structure so that you don't change your client side code.

Alternatively you can put another server script between your client and the script that generates the output to do the same thing.

Either way - don't try to make DataTables figure it out - rather massage the data into a form that DataTables understands easily.

Author

Commented:
Question: why are you generating the data differently?

Assuming you have to do it this way then I would have an intermediary function client side
Not my decision



I've not tested this as dev PC not connected to internet but I've attempted to make a jsfiddle which is complaining but not sure why

Do you suggest something like this?


        var Newjson=[];
$(function(){

$.ajax({
	url: "https://api.myjson.com/bins/8w0so",
  dataType: "json",
  type: "GET",
  "dataSrc" : function(json) {
    json.features.forEach(function(item) {
    Newjson.push({"id":item.attributes.objectid},
      {"name":  item.attributes.name},
      {"Long":  item.attributes.LONG_},
       {"Lat" : item.attributes.LAT},
       {"country_code" : item.attributes.country_code},
       {"code" : item.attributes.code},
       {"url" : item.attributes.url},
       {"description" : item.attributes.description}
      
    );
}

);
var myJSON = JSON.stringify(Newjson);
    // Set up the DataTable
    $('#dTable').DataTable({
        // Specify the column data
                      "columns": [{ "data": "id" }, { "data": "city" },  { "data": "long" },{ "data": "lat" },{"data" : "country_code"},{"data" : "code"}, { "data": "url" },{"data" : "description"}],
        // Set up the AJAX Datasource
        // this is just test data    
        data:myJSON,
        
  $.each(myJSON, function(i, item)  {
     console.log(item.name);
     console.log(item.Long);
     console.log(item.Lat);
   })
   
 });// end $ function

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Why are you stringifying the data - why not simply pass the array in as you generated it?

Author

Commented:
So changed to

$.each(Newjson, function(i, item) 

Open in new window


jsfiddle doesn't "$.each" ??
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
then use
Newjson.forEach(function(item) {
    ...
});

Open in new window

Author

Commented:
Sorry mate can you look at this jdfiddle  and suggest what I'm doing wrong?

I get "No data available in table"
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
That fiddle is a bit of a mess.

The fields you are getting from the JSON dont match your table

You are using = instead of ':' to create the objects - which are being created individually i.e. you are doing this

.push({id=item.attributes.objectid},
{name=item.attributes.name},
...

Open in new window

Instead of
.push({
   id: item.attributes.objectid,
   name: item.attributes.name,
...
});

Open in new window


Then you are making an AJAX call with a "dataSrc" which is invalid for $.ajax  - you need to use "success"

In your success handler you are not assigning the Newjson back to the grid.

This works - it is not ideal but it gives the basic idea
var CodeArray=[];
var Newjson = [];
$(function(){
  $.ajax({
    url: "https://api.myjson.com/bins/8w0so",
    dataType: "json",
    type: "GET",
  }).then(function(json) {
    json.features.forEach(function(item) {
      Newjson.push({
        id:   item.attributes.objectid,
        city:         '',
        name:         item.attributes.name,
        long:         item.attributes.LONG_,
        lat:          item.attributes.LAT,
        country_code: item.attributes.country_code,
        code:         '',
        url:          item.attributes.url,
        description:  item.attributes.description
      });

    });

    $('#dTable').DataTable().rows.add(Newjson).draw();
  });

  // Set up the DataTable
  $('#dTable').DataTable({
    // Specify the column data
    columns: [
      { data : "id" }, 
      { data : "city" },
      { data : "long" },
      { data : "lat" },
      { data : "country_code"},
      { data : "code"},
      { data : "url" },
      { data : "description"}
    ]
  });
});// end $ function

Open in new window


Your main problem seems to be a lack of experience with jQuery / JavaScript and AJAX - this is normal and easily solved.

Any parts of the above that are not clear please post back and I will take you through what the code is doing and why it was done that way.

Author

Commented:
Your main problem seems to be a lack of experience with jQuery / JavaScript and AJAX - this is normal and easily solved.

Add to that I work on a closed system  with a dodgy Internet PC that has only Notepad

In jsfiddle I see this so I'm Not surprised That fiddle is a bit of a mess.  I had thought I changed "=" to :
Capture.JPG

Any how I can see your building / drawing the DataTable as part of the ajax then function however I need to be able to loop through this data

In the original application the data that forms the DataTable is also added, as point data to a map click a point and the table row is highlighted

Would do that within "json.features.forEach(function(item)" or  during  Set up the DataTable code as I had done before?
Hi,

You may want to check the Documentaion about all Ajax Technics for Datatables
https://datatables.net/examples/ajax/

In your JSfiddle there is an error
Uncaught SyntaxError: Unexpected token
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Add to that I work on a closed system  with a dodgy Internet PC that has only Notepad
Ouch.

Would do that within "json.features.forEach(function(item)" or  during  Set up the DataTable code as I had done before?
This would go in the AJAX success function - where you build the Newjson - that is the point at which you have the "new" data so anything that is dependent on that data would get updated there.

In other words - where I have
$('#dTable').DataTable().rows.add(Newjson);
// Update your map here

Open in new window

Author

Commented:
Thank you  for your help
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial