JavaScript, Web API import with D3 (Data Driven Document)

Question

I'd like to import data from an Web API (JSON format) and use it for visualization. As you see in the following code, I've already implemented everything and it works (almost).

Question: The dataExport isn't the same as data. Why? How can I change my code so that dataExport the same like data?

Code:

var dataExport = d3.json("http://link to the Server...", function(error, data){
            if(error) {
                console.log(error);
            } else {
                console.log(data);

                console.log(data.collection.items);
            }
});
        
console.log(dataExport);

Console.log(data);

Object {collection: Object}
collection: Object
href: "http://link to the Server..."
items: Array[50]
links: Array[1]
queries: Array[1]
version: "1.0"
__proto__: Object
__proto__: Object

Console.log(dataExport);

Object {header: function, mimeType: function, responseType: function, response: function, get: function…}
abort: function (){return c.abort(),i}
get: function (){return i.send.apply(i,[n].concat(Qo(arguments)))}
header: function (n,t){return n=(n+"").toLowerCase(),arguments.length<2?a[n]:(null==t?delete a[n]:a[n]=t+"",i)}
mimeType: function (n){return arguments.length?(t=null==n?null:n+"",i):t}
on: function (){var r=e.apply(t,arguments);return r===t?n:r}
post: function (){return i.send.apply(i,[n].concat(Qo(arguments)))}
response: function (n){return e=n,i}
responseType: function (n){return arguments.length?(s=n,i):s}
send: function (e,r,u){if(2===arguments.length&&"function"==typeof r&&(u=r,r=null),c.open(e,n,!0),null==t||"accept"in a||(a.accept=t+",*/*"),c.setRequestHeader)for(var l in a)c.setRequestHeader(l,a[l]);return null!=t&&c.overrideMimeType&&c.overrideMimeType(t),null!=s&&(c.responseType=s),null!=u&&i.on("error",u).on("load",function(n){u(null,n)}),o.beforesend.call(i,c),c.send(null==r?null:r),i}
__proto__: Object

Answer 1

because you store the whole parsing-process in your dataStore-variable, while the data-variable only contains the data you call within the d3.json - as it should be.

you don't need to use another variable, so just try

d3.json("http://link to the Server...", function(error, dataStore){
        if(error) {
            console.log(error);
        } else {
            console.log(dataStore);

            console.log(dataStore.collection.items);
        }
});

dataStore should contain the wanted results

edit: to access it outside the d3.json

var dataStore; //declare a global variable somewhere at the beginning of your script

and then

d3.json("http://link to the Server...", function(error, data){
    if(error) {
        console.log(error);
    } else {
        dataStore=data;
    }
});

console.log(dataStore);
console.log(dataStore.collection.items);