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?

#2

The title and the description are nested within other objects within the first element of the result.items array. I suggest reviewing how to access nested properties of objects in our Basic JavaScript curriculum.

1 Like
#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.

#4

The only catch is that the items property of result is an array. The fact that items is plural suggests to me you could receive multiple books. However, since isbn should be a unique number, you probably do not have to worry about that, so you only need to access the first element which contains an object with other property you will need to access first before getting to title and description.

Once you figure it out, let me know and I will show you how to use destructuring (unless you end up using destructuring) to get the title and description.

1 Like
#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:

#8

result is the variable which is an object, which as a property named items which is an array containing one element which is an object containing a property you need to access which contains both the title and description properties whose values you need.

1 Like
#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
#10

Now using destructuring and arrow function syntax:

fetch("https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699")
  .then(res =>res.json())
  .then(({ items: [ { volumeInfo : { title, description} } ] }) => {
    console.log(title);
    console.log(description);
  }),
  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
#12

There are several destructuring challenges in the ES6 section.

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

Give it a try first yourself.

#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();
#17

You running this on a local machine?

#18

Yeah off my desktop, from C drive

#19

Are you using Node or are you doing this from the client?

How are you running this code?

#20

I’m using node in VS Code Terminal