FAQ: Requests I - Introduction to Requests

This community-built FAQ covers the “Introduction to Requests” exercise from the lesson “Requests I”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise Introduction to Requests

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

The ‘Jenerate’ button in step 1 of this excercise generates an error in Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://jsonplaceholder.typicode.com/users. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

In Chrome, a similar error is produced. In both cases, bi content is loaded and jsonResponse is null

1 Like

When I click on the “Jenerate!” button, nothing happens. Neither on Firefox, nor on Edge…

3 Likes

Hi there,
I was having the same problem.
I am using chrome, and it turned out that was just a question of waiting enough time, some times it take one minute to get the output.

Cheer.

1 Like

Hi there,
I was playing with the code in the Requests | Codecademy
but now even though I reset the exercise my main.js file is completely empty. Is there a way to restore the file?

so if anyone else has a problem with empty file, CodeCademy does not provide any support at all. I had to make a new acc and start premium subscription just to be able to see it…

const buttonContainer = document.querySelector('#buttonContainer');
const display = document.querySelector('#displayContainer');
const collection = ["Another", "More", "Next", "Continue", "Keep going", "Click me", "A new one"];

const generateJson = () => {
  const xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  
  xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
  renderResponse(xhr.response);
      changeButton();
    }
  }
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
  xhr.send();
}

const formatJson = (resJson) => {
  resJson = JSON.stringify(resJson);
  let counter = 0;
  return resJson.split('')
  .map(char => {
    switch (char) {
      case ',':
        return `,\n${' '.repeat(counter * 2)}`;
      case '{':
        counter += 1;
        return `{\n${' '.repeat(counter * 2)}`;
      case '}':
        counter -= 1;
        return `\n${' '.repeat(counter * 2)}}`;
      default:
        return char;
    }
  })
  .join('');
}

const renderResponse = (jsonResponse) => {
  const jsonSelection = Math.floor(Math.random() * 10);
  display.innerHTML = `<pre>${formatJson(jsonResponse[jsonSelection])}</pre>`;
}

const changeButton = () => {
  const newText = Math.floor(Math.random() * 7);
  jsonButton.innerHTML = `${collection[newText]}!`;
}

jsonButton.addEventListener('click', generateJson);```