0

The project I'm trying to achieve the desired result within is a TypeScript, React project that's running Storybook.js.

I have a csv file that I've stored in the public folder of my React application. The csv contains date and value data that I would like to use to draw a graph for testing purposes.

As it stands im currently using the below function to fetch the data:

private fetchFromUrl = async() => {
    const response = fetch(`${process.env.PUBLIC_URL}/tempData/data_for_damian.csv`)
        .then(res => res.text())
        .then(res => readString(res))
        .then(res =>{
            return(res.data)
        })
        
        return await response
}

Which returns:

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "fulfilled"
[[PromiseValue]]: Array(143816)

Plottable.js expects a table of coordinates in this format:

[ 
  { "x": 0, "y": 1 },
  { "x": 1, "y": 2 },
  { "x": 2, "y": 4 },
  { "x": 5, "y": 20 },
]

How do I extract the table of data from the promise?

Alternatively could I populate a table of values as part of the fetch function instead?

Damian Jacobs
  • 488
  • 6
  • 21
  • How are you calling your `fetchFromUrl` function? Also, using `async/await` doesn't turn your function into a synchronous one - you're still getting a `Promise` back when you call it. – goto Aug 11 '20 at 11:37
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – goto Aug 11 '20 at 11:39
  • I've chosen a different approach where I populate an array within the fetch and then return that. I tested out your above suggestion and I think if I spend more time with it, it would probably work to resolve my issue – Damian Jacobs Aug 11 '20 at 11:59

1 Answers1

0

In the end I chose a different approach where I populate an array with values within the fetch function.

    private fetchFromUrl = () => {
        type dateValue = {
            x: Date,
            y: number
        }
        
        var data: Array<dateValue> = Array();

        fetch(`${process.env.PUBLIC_URL}/tempData/monthly.csv`)
            .then(res => res.text())
            .then(res => readString(res))
            .then(res =>{
                const Coords = res.data    
                Coords.forEach(x => data.push( {x: new Date(x[0]), y: Number(x[1]) } ))
            })
        
        return(data)
    }
Damian Jacobs
  • 488
  • 6
  • 21
  • You realize this won't work, right? `fetch` is asynchronous and you're treating this function as it was synchronous. – goto Aug 11 '20 at 12:08
  • You must be getting lucky then - this is definitely **not** how you deal with asynchronous functions, and I wouldn't be surprised if you start running into issues at a later point. https://stackoverflow.com/a/14220323/5862900 – goto Aug 11 '20 at 12:54
  • Ill look into what you linked above to see how I can fix what I currently have. Thank you for taking the time to look at my code – Damian Jacobs Aug 11 '20 at 13:00