Error is not logged into the fCC Editor Console

Describe the Issue

Hello everyone!

This code passes the tests, when it should not, because I used different names in the argument and the statement of the function:

        .then(whateverString => {
          document.getElementById('message').innerHTML = JSON.stringify(completelyDifferentString)
        })

With this code, tests don’t fail, but the button Get Message does nothing when pressed.

It should probably return an error message like "completelyDifferentString" is not defined and should not pass the tests.

Affected Page

https://www.freecodecamp.org/learn/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method

Your code

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick= () => {
      // Add your code below this line
      fetch('/json/cats.json')
        .then(response => response.json())
        .then(whateverString => {
          document.getElementById('message').innerHTML = JSON.stringify(completelyDifferentString)
        })
      // Add your code above this line
    };
  });
</script>
<style>
  body {
    text-align: center;
    font-family: "Helvetica", sans-serif;
  }
  h1 {
    font-size: 2em;
    font-weight: bold;
  }
  .box {
    border-radius: 5px;
    background-color: #eee;
    padding: 20px 5px;
  }
  button {
    color: white;
    background-color: #4791d0;
    border-radius: 5px;
    border: 1px solid #4791d0;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    background-color: #0F5897;
    border: 1px solid #0F5897;
  }
</style>
<h1>Cat Photo Finder</h1>
<p id="message" class="box">
  The message will go here
</p>
<p>
  <button id="getMessage">
    Get Message
  </button>
</p>

Expected behavior

Using different names for the argument in the second .then should return an error:

        .then(whateverString => {
          document.getElementById('message').innerHTML = JSON.stringify(completelyDifferentString)
        })
        // error! "completelyDifferentString" is not defined

Tests should only pass if the names match, like so:

        .then(whateverString => {
          document.getElementById('message').innerHTML = JSON.stringify(whateverString)
        })

Screenshots

No response

System

• Device: [PC]
• OS: [Manjaro 22.0.0]
• Browser: [Librewolf]
• Version: [98.0.2 (64 bit)]

Additional context

No response

[raisedadead]

FWIW, the error is not shown on the fCC editor console but, surely, is logged on the browser console. Not sure if there is a way to fix this.

Needs additional investigation.

[KravMaguy]

I agree @ojeytonwilliams’s idea but unless timeout parameter is over 500ms instead of 250ms, the test always failed in my local environment. (It may be affected by camper’s machine spec or transmission speed)

I agree with you that hardcoding a time limit is not good as we cant know how long it will take on the camper’s machine.

Simply, using the code written by the camper, It seems that we can avoid passing the test when different names are used in second .then’s argument and JSON.stringify method’s value like bellow.

const arrangedCode = __helpers.removeWhiteSpace(code);
const jsonDataName = arrangedCode.slice(
  arrangedCode.indexOf('.json()).then(') + '.json()).then('.length,
  arrangedCode.indexOf('document.getElementById(\'message\').innerHTML') - '=>{'.length
);
const stringifyDataName = arrangedCode.slice(
  arrangedCode.indexOf('JSON.stringify(') + 'JSON.stringify('.length,
  arrangedCode.indexOf('JSON.stringify(') + 'JSON.stringify('.length + jsonDataName.length
);

assert(
  arrangedCode.match(
    /document\.getElementById\(('|")message\1\)\.innerHTML=JSON\.stringify\(?\w+\)/g
  ) 
  && jsonDataName === stringifyDataName
  && arrangedCode[arrangedCode.indexOf('JSON.stringify(') + 'JSON.stringify('.length + stringifyDataName.length] === ')'
);

It wont work, for example this is completely valid code and will fail the above test:

fetch('/json/cats.json') .then(response => response.json()) .then(x => { console.log('I want to do something') return x }) .then(data => { document.getElementById('message').innerHTML = JSON.stringify(data); })