Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fetching Book Title from Google Books API with ISBN

    Hi everyone, I'm very new to Javascript and React-Native and am building just a very simple app using Expo that can scan the barcode of a book for the ISBN and then match it to the title of the book.

    I think I've managed to get the ISBN number from the barcode and my alert message at the end is showing the correct corresponding book title too, but I keep getting an undefined is not an object (evaluating '_this.state.results.items[0].title) error after scanning the barcode. I'm fetching the data from Google Books API. Any one have ideas where or why it's going wrong? I'm posting the relevant part of my code below.

    Thank you! Sorry if there are a ton of mistakes or my code is terrible. I'm really new to this and really appreciate the help!


    Code:
    import React from 'react';
    import { Dimensions, StyleSheet, Text, View } from 'react-native';
    import { BarCodeScanner } from 'expo';
    
    const { width } = Dimensions.get('window');
    
    export default class App extends React.Component {
    
      constructor(props) {
        super(props);
    
        this.state= {
          results: {
            kind: '',
            totalItems: 0,
            items: []
          }
        }
        this.fetchData = this.fetchData.bind(this);
      }
    
    
      fetchData(isbn) {
        fetch(`https://www.googleapis.com/books/v1/volumes?q=isbn:${encodeURIComponent(isbn)}`)
        .then((response)=> response.json())
        .then((responseData)=> {
          console.log('responseData', responseData);
          this.setState({results: responseData})
        });
        
      }
    
      _handleBarCodeRead = ({ type, data }) => {
        var isbn = data;
        this.fetchData(isbn)
        var title = this.state.results.items[0].volumeInfo.title;
        alert(`ISBN: ${isbn}, Title: ${title}`)
      }
    
      render() {
        return (
          <BarCodeScanner
            onBarCodeRead={this._handleBarCodeRead}
            style={[StyleSheet.absoluteFill, styles.container]}
          >
            <View style={styles.layerTop} />
            <View style={styles.layerCenter}>
              <View style={styles.layerLeft} />
              <View style={styles.focused} />
              <View style={styles.layerRight} />
            </View>
            <View style={styles.layerBottom} />
          </BarCodeScanner>
        );
      }
    }

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,845
    Thanks
    58
    Thanked 690 Times in 685 Posts
    Is the problem that somtimes the API is not finding a record that matches the bar code? That would seem to be a case that you would want to include some error handling for


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •