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

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
– mplungjan, Commented Aug 4, 2021 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, but we can't tell without seeing the code. — CherryDT
– CherryDT, Commented Aug 4, 2021 at 17:04
@mplungjan I tried using toString because I was having issues with the split method (I was getting an "undefined") — Martina
– Martina, Commented Aug 4, 2021 at 17:24

stWrong · Accepted Answer · 2021-08-04 17:43:46Z

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 4, 2021 at 17:43

stWrong

3162 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mplungjan Over a year ago

No need for all that async, just move processing where the data arrives

stWrong Over a year ago

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.

Martina Over a year ago

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)

stWrong Over a year ago

setContentType is not supported according to the spec: developer.mozilla.org/en-US/docs/Web/API/Response fetch.spec.whatwg.org/#response-class It's a server side operation (if you are using node in backend, refer: stackoverflow.com/questions/52812561/…)

Martina Over a year ago

@stWrong oh ok, thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related