Using fetch to get Google Books API

JavaScript
1

Hey, so I’m learning what the fetch function is and the use of an API, but now I am stuck though.

I have created the code as per below:

require("isomorphic-fetch");
let items = [];

fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699")
  .then(function (res) {
    return res.json();
  })
  .then(function (result) {
    items = result.items;
    console.log(items);
  }),
  function (error) {
    console.log(error);
  };

So I get all the info on the book and so forth from the google api, but I now need to get the book title and the description of the book. I have searched for info on this but can’t seem to find anything that helps with this.

Can someone please help me here and help me understand how to get the title and description of the API?

3

So it won’t be any different than just accessing the nested items in an object? I may have been overthinking this entire thing.

5

Yes, thats true, but as stated the isbn is just this book, so that helps. I will certainly give it a go and let you know how it went. I will post my finding if I succeed :slight_smile:

6

If I follow what it suggests here though,

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"

How will I know where to search as with the code above I start with the declared variable but in the API, the info is not in a variable, I just use the fetch() function to call the data so I don’t know if I’m wrong? Possibly overthinking this at the moment though…

7

I think I am overthinking the entire thing :man_facepalming:

9

I get it now :smiley:

Code looks like this:

fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699")
  .then(function(res) {
    return res.json();
  })
  .then(function(result) {
    title = result.items[0].volumeInfo.title;
    description = result.items[0].volumeInfo.description;
    console.log(title);
    console.log(description);
  }),
  function(error) {
    console.log(error);
  };
1 Like
11

Firstly, thank you though, helped knowing someone is there to assist but was much better finding the solution on my own.

That is way shorter, but was told we are not permitted to use arrow function for this task, however, I will add it to my notes for further study and to grow my knowledge.

I will be searching destructuring and broaden my knowledge on it, is it in the freecodecamp curriculum?

1 Like
13

Awesome, can’t wait, I am now on " Basic JavaScript: Iterate with JavaScript While Loops" section.

1 Like
14

If I were to write this with an async/await function how will I go about that?

require("isomorphic-fetch");
let items = [];

fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699")
  .then(function (res) {
    return res.json();
  })
  .then(function (result) {
    items = result.items;
    console.log(items);
  }),
  function (error) {
    console.log(error);
  };
16

I did try though I get an error in chrome, about CORE so not sure if there is something I need to add to the code as per below;

const request = async () => {
  const response = await fetch(
    "https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699");
  const json = await response.json();
  let items = json.items;
  console.log(items);
  console.log(json);
};

request();
18

Yeah off my desktop, from C drive

20

I’m using node in VS Code Terminal

21

If I write it as below, with what I see online and mdn it works

const request = async () => {
  const response = await fetch(
    "https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699", {
      method: "GET",
      mode: "cors"
    }
  );
  const json = await response.json();
  let items = json.items;
  console.log(items);
  console.log(json);
};

request();