-1

With JavaScript I am trying to pull a text file and turn it into a string. I got that working, but I want to turn that string into a array with commas or hyphens. Here's what I got so far to split the words into separate elements on a HTML page

function title() {
  fetch('Text.txt')
    .then(response => response.text())
    .then(text => name = text)
    .then(name => name.toUpperCase());
    return(name);
};

function append(text, id) {
  var p = document.createElement('P');
  p.id = 'title' + id;
  p.innerHTML = text;
  document.getElementById('imgcont').appendChild(p);
};

function getName() {
  name = title();
  name.split("-");
  append(name[0], 1);
  append(name[1], 2);
};

The text file will include something like this

Fighers-Conro

I am trying to append this to 2 HTML Element, and I got that working just fine, but every time I look at the output I just get the letter "F" on the fist element and the letter "i" on the second element in the html page. I got further into it, and used console.log(Array.isArray(name)); and it returned False, but a self made array returns True.

I may be doing one small mistake, but I can't find the issue. Any help would be appreciated!

ScarsTRF
  • 11
  • 2
  • 5
    `name.split("-")` returns an array, it doesn't modify `name` in place; so `name.split('-')[0]` would give you what you want; or you could assign the outcome to another variable. – Ja͢ck Mar 04 '20 at 15:33
  • 2
    You can't return a value from an asynchronous function like `fetch`, like that. – Cerbrus Mar 04 '20 at 15:36
  • ```let nameArr = name.split('-');``` ```append(nameArr[0], 1);``` ```append(nameArr[1], 2);``` – Telmo Dias Mar 04 '20 at 15:37
  • @Ja͢ck Thanks actually.... I was completely blind of this. – ScarsTRF Mar 04 '20 at 15:46
  • @Cerbrus I was able to get the string from the Text file using the title function above. I wasn't trying to split it then, but split it in another function. Sorry, but this was nothing related to the fetch API, because it works for me how I have it and for what I need. Thanks though – ScarsTRF Mar 04 '20 at 15:49
  • ... how? The [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) returns a `Promise`. – Cerbrus Mar 04 '20 at 15:50
  • @Cerbrus When I fetch the text file I just capture the string inside of it using the `.then(text => name = text)`. it works just fine for me.... the issue I was having was turning the string I get from the fetch into a array and I was just missing something small like I always do. I needed to add `nameAr = name.split("-")` and it works just like I want now. – ScarsTRF Mar 04 '20 at 15:55
  • The point is that `fetch` is async. When the `fetch` takes just a little longer to run, your `return` statement will run before `.then(text => name = text)`, meaning your `name` will be undefined. I strongly suggest having a look at the dupe target, as this is not how you want to handle asynchronous requests. – Cerbrus Mar 04 '20 at 15:57
  • I actually see what you mean by the run time sometimes when I get the elements in, it actually shows one of them undefined. I need to look into that. Thanks though @Cerbrus – ScarsTRF Mar 04 '20 at 16:01

1 Answers1

0
.then(text => name = text)

doesn't split up your text. It just sets it to a different variable.

Edit:

Also you need to assign your "split" string to a variable in order to store the array.

Edward Bull
  • 51
  • 4