How do you properly type a fetch GET request?

For this one, I am probably creating some kind of syntax error that I am unaware of. After spending at least 2 hours on it, I decided to ask for help. I hope to get past this part so I can actually practice making MY OWN webpage for a project I am doing.

The exercise is:
GET FETCH CA exercise

I am having trouble implementing the exercise when it comes to the instructions below (number 6 in the steps)


Inside the success callback function, create a conditional statement that checks if the ok property of the response object evaluates to a truthy value. If so, log response.json() to the console. Run your code.

Paste https://goo.gl/cjyLB1 into the input field 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.


Here is the code for the final answer:

// Include data for accessing Google APIs
const apiKey = '<Your API 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(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  }, networkError => console.log(networkError.message));
};


function shortenUrl() {

};

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

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

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

Here is my actual code, where I need help with:

// Include data for accessing Google APIs
const apiKey = <your API 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(response => {response => { 
	if (response.ok) {
   return response.json(); 
});
};


function shortenUrl() {

};

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

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

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

As far as I can tell, I am doing the exact same thing as the given answer. I have also tried using console.log and the exercise still does not let me past.

I believe that understanding these concepts is important if I want to make my own website - so even though I could skip it, I would rather understand and do it right through doing myself.

I believe you have mismatched brackets/parens in your code.

Oh, after looking at it, I see you’ve highlighted the correct one. I just wish you had typed it, I guess. Thanks.

It seem like a bracket would be more appropriate? Are you pointing to a round bracket? or to a curly bracket? I thought you would clarify.

Why are there 2 response => ?

I make notes on the side and refer to them. So I’m gonna try remove that extra response

Im still not sure, though.

Here is my new code:

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

Any help will still be appreciated when you have time…

function expandUrl() {
  const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;

  fetch(urlToExpand).then(response => {
    if (response.ok) {
      return response.json();
    }
  });
}

I know the first paragraph was TL;DR
Instead of returning it, the instructions say I need to log it to the console. How would I log the response to the console?

You can chain another .then((data)=>console.log(data)) to the solution @DanCouper gave you , see here for examples

function expandUrl() {

  const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;

  fetch(urlToExpand).then(function(response) {
   
 if (response.ok) {
    
  return response.json().then(console.log(response);

    }

  });

}

Is this kind of what you had in mind? I’m still learning so it is kind of messy, but I’ve double spaced it to make it easier to read.

more like this,

function expandUrl() {
  const urlToExpand = url + '?shortUrl=' + $inputField.val() + '&key=' + apiKey;

  fetch(urlToExpand).then(response => {
    if (response.ok) {
      return response.json();
    }
  }).then(data=>console.log(data));
}

remember that fetch itself returns a promise, and that promise is what you are chaining the .then to

1 Like

If I just wanted to log it to the console, would I remove the return part? I’m sorry, I’m still confused :face_with_raised_eyebrow:

I’ve ordered a book and will review this. Thank you so much for your time and effort. I think there must be a glitch in the exercise and I need to BUILD projects!

I’m so excited to actually start building things now!