[HELP] fetch() GET Requests IV issue


#1

Not going to lie, this whole section on Requests is hard for me. I’ve been pumping through so far with no real errors until I hit this exercise. As I’m going along, the Instructions are telling me I have correctly completed Step 6, but the results aren’t right.

Here’s my code so far: (Note: I actually have a key where is)

// Include data for accessing Google APIs
const apiKey = '<MY KEY>';
const url = 'https://www.googleapis.com/urlshortener/v1/url';

// Some page elements

const $inputField = $('#input');
const $expandButton = $('#expand');
const $shortenButton = $('#shorten');
const $responseField = $('#responseField');

// AJAX functions

function expandUrl() {
	const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;
  
  fetch(urlToExpand).then(function(response) {
    if(response.ok) {
      console.log(response.json())
    }
  })
};


function shortenUrl() {

};

function expand() {
  $responseField.empty();
  expandUrl();
  return false;
};

function shorten() {
  $responseField.empty();
  shortenUrl();
  return false;
};

$expandButton.click(expand);
$shortenButton.click(shorten);

Now, here’s what this step says I should get when pasting the shortened URL and click expand:

If everything worked correctly, there should be a Promise in the console. Click the arrow to expand the Promise and notice that at one point, the PromiseStatus was pending, and now it is resolved. Clicking the down arrow next to PromiseValue will show the response from the Google URL Shortener API - the information that we requested! We’ll learn how to access this information in the next exercise.

And this is all that logs to the console:

main.js:17 GET https://www.googleapis.com/urlshortener/v1/url?shortUrl=https://goo.gl/cjyLB1&key=MY_KEY 403 ()
expandUrl @ main.js:17
expand @ main.js:31
dispatch @ jquery-3.1.0.min.js:3
q.handle @ jquery-3.1.0.min.js:3

I’ve retried this exercise, checking my syntax over and over, but I’m stumped. Can anyone tell me what’s going on?


#2

I got the 403 error too and found out that my API key is authorized to access google maps, not google url shortener (lol).
Edited the permissions and end up with a 400 error now. Still trying to figure out the 400 error though.