FAQ: Requests I - XHR Post Requests III

OK, I self-helped.

The reason res.errors is available is because the response is JSON, which is an object, so I can access the value by specifying the key as a property of the object.

For example, if the response was…

{ name: "Terry Gilliam" }

…I could get "Terry Gilliam" via res.name.

2 Likes

Hello all, i put the url in and press shorten, but nothing shows, why? every step is green.

2 Likes

I ran your code, and it works perfectly with my API key. If you haven’t replaced the value of apiKey with your actual key from rebrandly.com, you’ll need to do that. Don’t post it here. API keys are private. If you’ve already tried your code with a valid API key, post a reply, and I’ll have another look, but I don’t see any issues with your code. Good luck!

Thanks, may i know what should be shown on screen if it works? Thanks!

Hello i tried again still no show…

1 Like

I think if you just remove the angle brackets < > from around your api key value, you’ll have it. Keep the quotation marks, but delete the brackets. :slightly_smiling_face:

3 Likes

what a stupid mistake! thank you so much!

and thanks for reminding me keeping api key secret, otherwise i would be spreading around the world :joy:

2 Likes

How does the main,js access the renderResponse fuction in helperFuntion.js here as its not exported in this excercisei

If you look in the index.html file for the exercise, you see these two lines of code near the end of the file just inside the closing body tag:

  <script src="public/main.js"></script>
  <script src="public/helperFunctions.js">

Because both files are linked to the html file, the functions inside of helperFunctions.js are accessible to the functions in main.js.
Check out this thread: Code using function from another file without import / export

2 Likes

is there an alternative to rebrandly? The site doesn’t generate an API key for me - clicking the button does nothing and i’ve tried on several browsers.

Thank you! I had the same ‘problem’ today.

1 Like

I just followed this lesson today, and had the same issue. In my case, I had created my OWN const for the API key. However, there was already a const for the API key defined that said ‘’, or something along those lines. Make sure there aren’t two copies like I had, press “run code” again (this updates the output area), put in your URL, and try again.

This lesson is truly disappointing. I learned nothing. It’s just about copying stuff. Barely anything is explained. A lot of concepts are just thrown at you…

7 Likes

I wish more was explained. I’m trying to piece it together by looking at documentation, but a little more explanation would help direct me instead of fumbling around.

1 Like

I’m having difficulty to sign up with rebrandly. My account is suspended even its fresh account. Anybody have same case?

if we assigned const xhr = new XMLHttpRequest wouldn’t (xhr.readyState === XMLHttpRequest.DONE) be the same as (xhr.readyState === xhr.DONE)? If not, why?

1 Like

I have another question.
in XHR GET Requests III step 5 theres .word method that I cant find, were is it?

 // Creates an empty array to contain the HTML strings
  let wordList = [];
  // Loops through the response and caps off at 10
  for(let i = 0; i < Math.min(res.length, 10); i++){
    // creating a list of words
    wordList.push(`<li>${res[i].word}</li>`);

Theres one similar in step 9: .shortUrl ?

const renderResponse = (res) => {
  // Displays either message depending on results
  if(res.errors){
    responseField.innerHTML = "<p>Sorry, couldn't format your URL.</p><p>Try again.</p>";
  } else {  
    responseField.innerHTML = `<p>Your shortened url is: </p><p> ${res.shortUrl} </p>`;
  }
}

thankfull for answers

Hi all,
Even though I’ve completed the exercise correctly, the application doesn’t do anything after clicking ‘shorten’.
By the I’m having the same issue with the exercise ‘XHR GET Requests IV’.
Absolutely no clue as to what I’m doing wrong.
Anyone?
(since API keys appear to be secret, I replaced it here with XXX)

I’m quite at loss here…

Thanks :slight_smile: !

// Information to reach API

const apiKey = ‘XXX’;

const url = ‘https://api.rebrandly.com/v1/links’;

// Some page elements

const inputField = document.querySelector(’#input’);

const shortenButton = document.querySelector(’#shorten’);

const responseField = document.querySelector(’#responseField’);

// AJAX functions

const shortenUrl = () => {

const urlToShorten = inputField.value;

const data = JSON.stringify({destination: urlToShorten});

const xhr = new XMLHttpRequest;

xhr.responseType = ‘json’;

xhr.onreadystatechange = () => {

if (xhr.readyState === XMLHttpRequest.DONE) {

renderResponse(xhr.response)(xhr.response);

}

xhr.open(‘POST’,url);

}

xhr.setRequestHeader(‘Content-type’, ‘application/json’);

xhr.setRequestHeader(‘apikey’, apiKey);

xhr.send(data);

}

I’m cancelling my account after this course module. It’s been a bumpy ride, but I think it’s high time I moved on to something else.

Important course modules are bugged or under-explained. Throughout the entirety of this course module, I got all the ticks and made the course work, but I didn’t understand anything.

I laughed when the tutor said “as a challenge, try to rebuild it all from scratch”. How will I do that when I know nothing of what was done?

From promises/await…async, we are thrown into a code that uses a module for reading files and we’re expected to know all of that. I’m lucky that I have a Python background, so I was able to get the basic gist. There was a sentence “now you’ve written a boiler plate for constructing an XMLHttpRequest”. We don’t even know what a boiler plate is, we do not know what an XMLHttpRequest object is, but the sentence was made anyway. It seems like they can’t be bothered to try to make us understand.
The mentality now is;
First step: throw in an image of the code.
Second step: Make them write everything in the image in the editor.
Last step: Repeat step one and two for every single thing.

The course module explaining how to export modules was overly verbose, we should have finished that in 15 minutes, but we had lessons upon lessons of literally copying and pasting.
The “higher-order function” course module was a mess, I don’t even want to remember it.

In my opinion, get the person who wrote the module on classes and ask him to rewrite the remaining modules here.
It was nice knowing you all, and thanks to everyone who answered my questions or linked to helpful materials when we needed that.

1 Like

Same here. I winged it. Fortunately, you don’t need to get a valid response from rebrandly to continue with the lesson. Hopefully they don’t rely on it for other lessons.