Issues with retrieving JSON data from Google Books API object

I've been working on retrieving data from the Google Books API and displaying the titles of the first 10 results on a web page. The site is successfully making the request, and I have a callback function that handles the results as shown below:

function displayTitles(books) {
    var list = books.items;
    var i;
    for(i = 0; i < 10; i++) {
        var title = list[i].title;
        var tag = "result" + i;
        var x = document.getElementById(tag);
        x.innerHTML = title;
    }
}

Let's assume the following API call was made:

<script src="https://www.googleapis.com/books/v1/volumes?q=Way of Kings&filter=partial&callback=displayTitles"></script>

Currently, it's displaying "undefined" instead of the actual titles in each designated location. I'm having trouble identifying the error. Can anyone help?

javascriptjsongoogle-books

Answer №1

The data response contains the title within a volumeInfo object.

Instead of:

var title = list[i].title;

Use this instead: 

var title = list[i].volumeInfo.title;

Answer №2

It seems that the title is being extracted from the volumeInfo object in the returned collection. I found success with this approach:

let title = list[i].volumeInfo.title;

For instance:

https://jsbin.com/puyayamuwi/edit?html,output

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Property 'blogCategory' is unreadable because it is undefined

Having trouble rendering blog posts from a json file in React const BlogPost = (props) => { const [post, setPost] = useState({ id: "", blogCategory:"", blogTitle:"", postedOn:"", ...

javascriptreactjsstate

How can the issue of v-slot missing in Vue2.7 be resolved?

After executing the given code, the results displayed are captured in Google Chrome. Below is a snippet of the code used: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e ...

javascriptvue.jsv-slot

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

Adding YAJL to your iPad project

I am in desperate need of assistance. I am trying to integrate YAJL into my iPad project. After adding the YAJL framework to my project, I encountered an error when trying to run it: dyld: Library not loaded: /Users/gabe/Library/Frameworks/YAJL.framework/ ...

iphonejsonipadyajl

Exploring confidential videos through the VIMEO API

I encountered an issue with the Vimeo API, and navigating through their documentation was quite overwhelming. I am trying to send a request to the api in order to fetch information about private videos. I have a code snippet that works for normal videos: ...

jqueryjsonajaxvimeo-api

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

javascripthtmlcss

"Exploring the new features of Node.js 14 with ECMAScript modules

When exploring Node's official documentation regarding its built-in support for ECMAScript modules, it is mentioned that There are different types of specifiers: ... Bare specifiers such as 'some-package' or 'some-package/shuffle&apo ...

javascriptnode.js

Using shortcode to enhance wordpress post content

I am trying to implement a feature similar to the one found at http://jsfiddle.net/theimaginative/gA63t/ within a wordpress post. I have attempted to create a shortcode for inserting this into a post, but I am encountering difficulties. While I have been s ...

javascriptphpjqueryhtmlwordpress

Tips for increasing the number of pixels in the current position of an element?

I need to shift an image to the right by adding pixels to its current left position. The challenge arises when the image, positioned absolutely, goes back to its nearest relative parent (the container) and creates a strange visual effect. Within my flex c ...

javascriptjqueryhtmlcss

Determine the SVG arc connecting two given points

My situation involves having coordinates for points X and A, A',... as follows: X [x,y] (starting point) A [a,b], A'[a',b'], etc. (ending points) I also have information about angles XCA, XCA', etc. However, I am struggling t ...

javascriptmathsvgcoordinates

Sort ng-repeat based on the initial character

Working in AngularJS, I am handling an array of objects and aiming to display filtered data based on the first letter. My initial method used was as follows. HTML: <p ng-repeat="film in filmList | startsWith:'C':'title'">{{film. ...

javascriptangularjsangularjs-ng-repeatangular-filters

The process of generating collection names dynamically based on user information

My goal is to enhance the structure of my data collection and make it more organized. While I am familiar with accessing and retrieving data, I am unsure about creating the schema. Here is my current schema: var MySchema = new Schema ({ event: { ...

javascriptnode.jsmongodbmongoose

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

The time-out counter fails to detect the input field

After writing a method to reset the timeout on mouse click, keyup, and keypress events, I realized that it does not account for input fields. This means that when I am actively typing in a field, the timeout will still occur. Below is the code snippet: ...

javascriptjquerytimeoutkeypress

What is the best approach to integrate a JQuery-powered widget into a Vue.js module for seamless use?

I have a group of colleagues who have started developing a complex web application using Vue.js. They are interested in incorporating some custom widgets I created with JQuery in the past, as re-creating them would be time-consuming and challenging. While ...

javascriptjqueryvue.js

Utilizing an ActiveX control embedded within another ActiveX control on a webpage

Struggling with accessing a non IDispatch method in an ActiveX control I created. In my web page, I have two separate Active X objects that were developed by me. The issue arises when I call a method on the first object, which returns an interface pointer ...

javascriptinternet-exploreractivex

Update a BehaviourSubject's value using an Observable

Exploring options for improving this code: This is currently how I handle the observable data: this.observable$.pipe(take(1)).subscribe((observableValue) => { this.behaviourSubject$.next(observableValue); }); When I say improve, I mean finding a wa ...

javascriptangulartypescriptrxjs

Navigating the loop in Vue using JavaScript

I'm facing an issue where I need to send data at once, but whenever I try sending it in a loop, I end up getting 500 duplicate id status errors. I have a hunch that if I click on something in JavaScript, the data might be sent all at once. assignment ...

javascriptasynchronouslaravel-5vue.jsasync-await

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4

Using vue.js to sort comments based on the highest number of votes

Can someone guide me on sorting data (comments) based on the number of votes using vue.js? Much appreciated! data: { comments: [{ title: "Excellent blog post!", votes: 5 }, { title: "Interactive commenting feature in VueJ ...

javascriptvue.js