OpenLayers 4 server data not displaying but same file data displays

Question

I am brand new to openLayers, got several Examples from the site working OK but now I am stuck when trying to switch from static file source to server (database) source. I am using ver 4.0.1

My server output is GeoJSON. I ran it through geojsonlint.com and it conforms. If I write the server response to console.log and copy (or view the server response in F12 Dev Tools and copy) and paste that into a file, it loads and displays just fine when my OL source url points to the file. But when I load the exact same data directly from the server into my map, it seems to load fine but nothing displays. I have tried changing the projections of source and features, to no avail.

I am limiting output to 100 features. They are polygons. I can query and see I have 100 features loaded into the layer. I can query and see that I have all the layers on the map. But only the OSM layer (base) displays when loading server data. What gives?

Here is what my raw data looks like (partial):

 {"d":
"{\"type\": \"FeatureCollection\", \"crs\": { \"type\": \"name\", \"properties\": { \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\" }},
\"features\": [
{\"type\": \"Feature\", \"properties\":{\"name\":\"60.0505\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.760199636185646,41.285820006929207],[-88.760155747029913,41.285834529557967],[-88.760152680477418,41.285835096224112],[-88.760178957327653,41.285886280555211],[-88.760182023882308,41.285885713888376],[-88.760220822924964,41.285872516818131],[-88.760199636185646,41.285820006929207]]]}}
,{\"type\": \"Feature\", \"properties\":{\"name\":\"189.944\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.760152680469886,41.285835096224751],[-88.760116576863126,41.285836767179227],[-88.760087235203429,41.2858348902221],[-88.760090859431287,41.285889709953722],[-88.760131737533243,41.285890450563663],[-88.760178957320036,41.2858862805557],[-88.760152680469886,41.285835096224751]]]}}
,{\"type\": \"Feature\", \"properties\":{\"name\":\"176.599\"},\"geometry\": {\"type\": \"Polygon\",\"coordinates\": [[[-88.7600872352026,41.285834890222162],[-88.760014241893046,41.285834799248633],[-88.760012428996035,41.285834367185579],[-88.7600119545558,41.285889253871225],[-88.760016018391411,41.285889670752233],[-88.760090859430449,41.285889709953778],[-88.7600872352026,41.285834890222162]]]}}.... etc

The geoJSON is wrapped in a JSON element d at the server, so you get it with serverResponse.d. I know I don't need the properties for the FeatureCollection because they are default, but I am trying to copy the geojson/polygon-samples.geojson example as closely as possible. Here's the javascript:

$(document).ready(function () {

        var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var dataLayer = new ol.layer.Vector({
            source: dataLayerSourceEmpty
        });//for some reason I had to start with empty source and add data later for the loader to work

        var dataLayerSourceEmpty = new ol.source.Vector();

        var dataLayerSource = new ol.source.Vector({

            format: new ol.format.GeoJSON({
                projection: 'ESPG:3857'
            }),
            loader: function (extent, resolution, projection) {
                var url = dataSVC;  //it is a WCF service call to server
                var format = new ol.format.GeoJSON();
                format.ignoreExtraDims = true;
                var source = this;

                $.ajax({
                    method: 'POST',
                    url: url,
                    data: JSON.stringify(payload),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    processData: false,
                    timeout: 0,
                    success: function (data, statusString, jqXHR) {
                        console.dir(data.d); //show the geoJSON looking fine
                        try {
                            var features = format.readFeatures(JSON.parse(data.d), {
                                featureProjection: 'ESPG:3857'
                            });
                            source.addFeatures(features);               
                            console.log('loaded features');
                            source.changed();
                            var featureCount = dataLayer.getSource().getFeatures().length;
                            console.log('loaded ' + featureCount + ' features'); //says I got 100 features
                        } catch (err) {
                            alert(err);
                            return;
                        }
                    },
                    error: function (xhr, txtStatus, err) {
                        console.log("jqxhr error: " + err + "; status " + txtStatus + "; xhr= " + JSON.stringify(xhr));
                    }
                });
            },
            strategy: ol.loadingstrategy.all
        });

var map = new ol.Map({
            target: 'map',
            layers: [osmLayer, dataLayer],
            view: new ol.View({
                center: ol.proj.fromLonLat([-88.760199636185646, 41.285820006929207])
                , zoom: 15
            })
        });

setTimeout(function () {

            dataLayer.setSource(dataLayerSource);
        }, 1000);
});

My map is only displaying the osmLayer and not the dataLayer. I hate to say I have been hacking at this for 2+ days and can't find any useful hints at all. I tried just loading the data into a local object and then setting source to object: myGeoJSONobject, with no luck. Please help give me a clue.

Answer 1

Answer for my own question. I was researching rendering and webgl when I came across a line of code that fixed my problem:

var features = format.readFeatures(JSON.parse(data.d), {
      featureProjection: **map.getView().getProjection()**
});

all that business about 'ESPG:3857' was for naught