How do I properly implement the GET the then chain of the GET fetch request?


#1

NOTE: for some reason I am having trouble formatting the second line of code even though I am using the apostrophes etc.

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.


#2

For that step, it asks us to log the response. Returning it will be in a later step.


#3
if (response.ok) {
   console.log(something)

Is the above more in line? I tried to use console.log, like I said, and it didn’t work…


#4
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));
}

What part of this do I need to delete?

I really want to be able to finish this exercise - as I am very close. I’ve struggled since yesterday and don’t want to skip it…