I am trying to fetch an array from a server, in particular this is what I do in the backend:
<code>this.app.get('/list', asyncHandler(async (request: Request, response: Response) => {
const validPuzzles: Array<string> = await fs.readdir('./puzzles');
response
.status(StatusCodes.OK)
.send(validPuzzles);
}));
</code>
<code>this.app.get('/list', asyncHandler(async (request: Request, response: Response) => {
const validPuzzles: Array<string> = await fs.readdir('./puzzles');
response
.status(StatusCodes.OK)
.send(validPuzzles);
}));
</code>
this.app.get('/list', asyncHandler(async (request: Request, response: Response) => {
const validPuzzles: Array<string> = await fs.readdir('./puzzles');
response
.status(StatusCodes.OK)
.send(validPuzzles);
}));
Now, in the client side, I am trying to fetch and utilize it as an object.
<code>const validPuzzles = <Array<string>> JSON.parse(await (await fetch('http://localhost:8789/list')).text();
</code>
<code>const validPuzzles = <Array<string>> JSON.parse(await (await fetch('http://localhost:8789/list')).text();
</code>
const validPuzzles = <Array<string>> JSON.parse(await (await fetch('http://localhost:8789/list')).text();
And this works!
However, what I really want to do is:
<code>const puzzleData = await fetch('http://localhost:8789/list');
const validPuzzles = <Array<string>> JSON.parse(await puzzleData.text());
</code>
<code>const puzzleData = await fetch('http://localhost:8789/list');
const validPuzzles = <Array<string>> JSON.parse(await puzzleData.text());
</code>
const puzzleData = await fetch('http://localhost:8789/list');
const validPuzzles = <Array<string>> JSON.parse(await puzzleData.text());
Which throws me the weird error “TypeError: Body is unusable” – it is really weird since doing all in one line works, but dividing it into another variable breaks it!
Why does this happen, and how can I fix it (or if there is a better way to transmit the array)?