Problem when converting the output of Fetch to string (Javascript)

Question

I have a txt file containing a list of all Italian words (link) that I want to read and then convert to an array of words, but I'm a bit stuck on the reading part. The file was originally downloaded from the web, so it might or might not have some encoding issues.

To read the file, I am using Fetch, with the same code suggested in the top answer of this post. After reading it, if I use alert(storedText) the text is correctly displayed; however, if I try var s = storedText.toString() and then alert(s) I get "undefined" in the alert box.

I guess there is some problem when reading the file, but I'm rather new to JavaScript and I can't figure out what exactly the problem is. Do you guys have any idea?

Edit: this is my full code

var storedText;

fetch('http://doodlemarty.unaux.com/wp-content/uploads/2021/08/parole.txt')
  .then(function(response) {
response.setContentType("text/html;charset=UTF-8");
    response.text().then(function(text) {
      storedText = text;
      done();
    });
  });

var s = storedText.toString();
var fullList = storedText.split('\n');

function test () {
//first try:
alert(storedText);
//second try:
alert(s);
//trying split:
alert(fullList[2]);
  };

I have the test function execute when a button is clicked.

Why do you need toString on it? It is already a string. Do a storedText.split(/\s+/) to get the words. Make sure it is UTF8 and the page that runs it has meta tag for UTF8 too — mplungjan, Aug 04 '21 at 17:01
My feeling is that your first `alert` was within the promise's `then` handler but the second one was outside, running too early, in which case this would be a duplicate of [this good old question](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call), but we can't tell without seeing the code. — CherryDT, Aug 04 '21 at 17:04
@mplungjan I tried using toString because I was having issues with the split method (I was getting an "undefined") — Martina, Aug 04 '21 at 17:24
That text list resource requires a computed cookie in order to be accessed. Otherwise, you just get html informing you that you need JS. — jsejcksn, Aug 04 '21 at 17:48
Change `function test () {` to `function test (storedtext) {` and change `done()` to `test(storedText)` — mplungjan, Aug 04 '21 at 18:19

score 0 · Answer 1 · answered Aug 04 '21 at 17:43

0

This seems like a async issue with promises. You are trying to access storedText before its value is updated in the fetch operation.

Try this:

var storedText;
var s;
var fullList;

async function callFetch() {
    let response = await fetch('http://doodlemarty.unaux.com/wp-content/uploads/2021/08/parole.txt')
    response.setContentType("text/html;charset=UTF-8");
    let text = await response.text();
    storedText = text;
}

function setVariables() {
    s = storedText.toString();
    fullList = storedText.split('\n');
}

async function test() {
    await callFetch();
    setVariables();
    //first try:
    alert(storedText);
    //second try:
    alert(s);
    //trying split:
    alert(fullList[2]);
};

answered Aug 04 '21 at 17:43

stWrong

334
2
14

1

No need for all that async, just move processing where the data arrives – mplungjan Aug 04 '21 at 18:13
Yes @mplungjan, that is the idea. In the simplest terms, just process the data after you get it from API. It was just my opinion that async looks more readable. – stWrong Aug 04 '21 at 18:15
Thanks a lot, that worked! Anyway, in order to make it work I have to remove the line where response.setContentType is called... Any idea why? (I have already noticed the missing semicolon in the first line of callFetch and fixed it) – Martina Aug 04 '21 at 19:58
`setContentType` is not supported according to the spec: https://developer.mozilla.org/en-US/docs/Web/API/Response https://fetch.spec.whatwg.org/#response-class It's a server side operation (if you are using node in backend, refer: https://stackoverflow.com/questions/52812561/nodejs-how-to-set-content-type-header-for-every-request) – stWrong Aug 04 '21 at 22:56
@stWrong oh ok, thank you! – Martina Aug 05 '21 at 09:28

Problem when converting the output of Fetch to string (Javascript)

1 Answers1