加载CSV数据并将结果保存到变量 [英] Loading csv data and save results to a variable

问题描述

我正在尝试从csv文件加载数据，并将数据存储在名为store的字典变量中作为关键路由. csv文件的第一行如下所示:

ID,AirlineID,AirlineName,AirlineCountry,SourceAirportID,SourceAirportCode,SourceAirport,SourceCity,SourceCountry,SourceLatitude,SourceLongitude,DestAirportID,DestCode,DestAirport,DestCity,DestCountry,DestLatitude,DestLongitude
1,24,American Airlines,United States,4355,ABE,Lehigh Valley International Airport,Allentown,United States,40.65209961,-75.44080353,3876,CLT,Charlotte Douglas International Airport,Charlotte,United States,35.2140007,-80.94309998
2,24,American Airlines,United States,4355,ABE,Lehigh Valley International Airport,Allentown,United States,40.65209961,-75.44080353,3752,PHL,Philadelphia International Airport,Philadelphia,United States,39.87189865,-75.2410965
3,24,American Airlines,United States,3718,ABI,Abilene Regional Airport,Abilene,United States,32.41130066,-99.68190002,3670,DFW,Dallas Fort Worth International Airport,Dallas-Fort Worth,United States,32.896801,-97.03800201

这是我尝试加载数据并将结果存储到store.routes上的方法.我在控制台中只得到一个空的"{}"字典.

let store = {};

function loadData() {

    let promise = d3.csv("routes.csv")

    return promise.then(routes => {
    store.routes = routes;
        return store;
    })
}
loadData();
console.log(store.routes);

解决方案

在这里可能使人困惑的是，数据加载是异步的，这意味着必须等待直到承诺被解决后，才能使用数据./p>

您可以通过以下几种方式进行选择-回叫，承诺，或异步/

三个示例的共同特征是它们

1. 通过d3.csv
发起数据检索请求
2. 等待直到数据检索完成
3. 使用检索到的数据调用doViz函数

鉴于d3.csv返回承诺，我猜想loadDataWithPromise的结构可能是最容易使用的结构.

-编辑---

此处是操作方法，与您当前的方法非常相似.请注意，console.log(store.routes)放在函数中，当Promise解析时会调用该函数.这样可以确保在异步数据检索完成后执行该程序.

const store = {};

const logData = () => {
  console.log(store.routes)
}

const loadData = () => {
  return d3.csv('../data/routes.csv')
    .then((routes) => {
      store.routes = routes
      logData()
    })
}

loadData()

希望这会有所帮助！

I am trying to load data from a csv file and store the data in a dictionary variable named store as key routes. The first lines of the csv file look like this:

ID,AirlineID,AirlineName,AirlineCountry,SourceAirportID,SourceAirportCode,SourceAirport,SourceCity,SourceCountry,SourceLatitude,SourceLongitude,DestAirportID,DestCode,DestAirport,DestCity,DestCountry,DestLatitude,DestLongitude
1,24,American Airlines,United States,4355,ABE,Lehigh Valley International Airport,Allentown,United States,40.65209961,-75.44080353,3876,CLT,Charlotte Douglas International Airport,Charlotte,United States,35.2140007,-80.94309998
2,24,American Airlines,United States,4355,ABE,Lehigh Valley International Airport,Allentown,United States,40.65209961,-75.44080353,3752,PHL,Philadelphia International Airport,Philadelphia,United States,39.87189865,-75.2410965
3,24,American Airlines,United States,3718,ABI,Abilene Regional Airport,Abilene,United States,32.41130066,-99.68190002,3670,DFW,Dallas Fort Worth International Airport,Dallas-Fort Worth,United States,32.896801,-97.03800201

Here is how I am trying load the data and store the results onto store.routes. I only get an empty "{}" dictionary in the console.

let store = {};

function loadData() {

    let promise = d3.csv("routes.csv")

    return promise.then(routes => {
    store.routes = routes;
        return store;
    })
}
loadData();
console.log(store.routes);

解决方案

What might be confusing here, is that the data loading is asynchronous, meaning that you have to wait until the promise is resolved before you can use the data.

You have a couple of options of going about this - a callback, a promise, or async/await. I've wrote a short script exemplifying their usage:

const store = {};

const doViz = (routes, dataRetrievalOrigin) => {
  console.log(routes, dataRetrievalOrigin)
  store.routes = routes
}

const loadDataWithCallback = (callback) => {
  d3.csv("../data/routes.csv")
    .then((routes) => {
      callback(routes)
    })
}

loadDataWithCallback((routes) => {
  doViz(routes, 'Data loaded from loadDataWithCallback')
})

const loadDataWithPromise = () => {
  return d3.csv("../data/routes.csv")
}

loadDataWithPromise().then((routes) => {
  doViz(routes, 'Data loaded from loadDataWithPromise')
})

const loadDataWithAsync = async () => {
  return d3.csv("../data/routes.csv")
}

;(async () => {
  doViz(await loadDataWithAsync(), 'Data loaded from loadDataWithAsync')
})()

The common trait among the three examples are that they

1. Initiate a data retrieval request via d3.csv
2. Waits until the data retrieval is complete
3. Calls the doViz function with the retrieved data

Given that d3.csv returns a promise, I'm guessing that the structure of loadDataWithPromise might the most straightforward one to use.

--- Edit ---

Here is how to do it, closely mimicking your current approach. Notice that console.log(store.routes) is put into a function, that is called when the Promise resolves. This makes sure it is executed after the asynchronous data retrieval is complete.

const store = {};

const logData = () => {
  console.log(store.routes)
}

const loadData = () => {
  return d3.csv('../data/routes.csv')
    .then((routes) => {
      store.routes = routes
      logData()
    })
}

loadData()

Hope this helps!

这篇关于加载CSV数据并将结果保存到变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！