Console.log in a function is not logging to the console

JavaScript
1

I can’t figure out why I can not see my console.log from w\in this function:

document.getElementById('getText').addEventListener('click', getText);

function getText() {
  fetch('sample.txt')
    .then(function (res) {
      console.log(res);
    })
}

Here is a message I see about the issues tab:
Some problems no longer generate console messages, but are surfaced in the issues tab. Click to view 1 possible improvement.

Blockquote

Does anyone know what the problem is here? I can console.log everywhere EXCEPT within a function. But this doesn’t work:

function why() {
  console.log('WHY');
}

It has to have something to do with Chrome. I can keep going along with what I am working on without checking my output in the console, but I would like to know why something like this would happen.

Also, in researching this I did something and now the console doesn’t clear after each page reload. How do I fix that? Same in Firefox. I think it may be VS Code.

2

Something tells me you can’t use fetch like that to open a local file on your computer, so I’m guessing that fetch is throwing an exception and thus the console.log is never being executed.

If you want to access local files from a web page then you should look into the FileReader API.

If you are having trouble getting console.log to work in other places I think I would need more information, perhaps you could give us a link to the project?

3

Yeah, if it is one of your files that you want to open, then I think you should just import it at writing time, or put it on an API. As this is, the browser assumes that you are trying to open a file on the end user’s computer (where your app would run) so it sees that as a huge security risk.

4

I’ve already done that - plus didn’t you see the 2nd function? I got another error working on in the same file - an error in the console telling me that data.forEach is not a function. I have no idea what is going on but something is…

5

Do you have a repo for this? Is it in an online IDE? What you’re describing doesn’t make sense to me, I’d have to see it.

an error in the console telling me that data.forEach is not a function

That means that data is not an array. Can you log it out and log out typeof data?

6

Are you calling this function?
why()

The second function seemed to me to be the one I quoted. But that has nothing to do with an error for forEach as far as the code you provided would reveal.

7

No, I haven’t tried typeof - can’t remember how to do t hat. It’s an array:

[
  {
    "id": 1,
    "name": "Rick",
    "email": "rick@gmail.com"
  },
  {
    "id": 1,
    "name": "Glenn",
    "email": "glenn@gmail.com"
  },
  {
    "id": 1,
    "name": "Negan",
    "email": "negan@gmail.com"
  }
]
8

No I didn’t call the function, but the video I was watching got the console.log to work w\o calling the function.

9

In that case, the console.log can’t have been inside the function, maybe there were multiple console.logs. A block of code inside a function will never run unless you call the function.

10

I recently added parcel-builder which added a bunch of node modules. That’s the only thing I can think might do it. I now see “Watch Sass” at the bottom of VS Code. Everything is messing up

  1. My console won’t clear after each reload.
  2. Getting text to output to the DOM using fetch won’t clear off the page after each reload.
  3. the forEach error…

Here is the code that fetches the array from a file called users.json:

function getUsers() {
  fetch('users.json')
    .then((res) => res.json)
    .then((data) => {
      let output = '<h2>Users</h2>';
      // console.log(data);
      data.forEach(function (user) {
        output += `
          <ul>
            <li>ID: ${user.id}</li>
            <li>Name: ${user.name}</li>
            <li>IEmail ${user.email}</li>
          </ul>
        `;
      });
      document.getElementById('output').innerHTML = output;
    })
}

getUsers();
11

You’re not calling the .json method here (calling = adding parenthesis):

.then((res) => res.json)

// should be

.then((res) => res.json())
12

Oh man, such a small thing that I forgot and missed looking at the code - thanks! Works now.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.