What is the best way to find information through the API?

Question

What is the best way to find information through the API?

As a newcomer to Vue.js, I decided to take on a project that involved utilizing an API. The initial version of this project was created by TraversyMedia using React, but I saw potential in converting it to Vuejs as it looked simple enough. However, I am encountering difficulties when trying to search the API for specific actors. Although the search bar registers user input, I am facing challenges in querying the API efficiently.*

<template lang="">
    <div>
        <!-- Breaking Bad -->
        <Header></Header>
        <Search v-on:wordChange="onWordChange"></Search>
        <ActorList v-bind:characters="actorInfo"></ActorList>
        <!-- characters is the name of the property we want to show up in the child component -->
        <!-- {{ actorInfo.length }} -->
        <Actor></Actor>
    </div>
</template>
<script>
    import Header from "./components/Header";
    import Search from "./components/Search";
    import ActorList from "./components/ActorList";
    import Actor from "./components/Actor";
    import axios from "axios";

    export default {
        name: "App",
        data: function() {
            return { actorInfo: [] };
        },
        components: {
            Header,
            Search,
            ActorList,
            Actor
        },
        mounted() {
            axios
                .get("https://www.breakingbadapi.com/api/characters?name", {})
                .then((response) => {
                    this.actorInfo = response.data;
                    // this.datas = response.data;
                    // console.log(response.data);
                })
                .catch(function(error) {
                    console.log(error);
                });
            //This is how to get all data from the api endpoint with axios
        },
        methods: {
            onWordChange: function(searchTerm) {
                console.log(searchTerm);
            }
        }
    };
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Montserrat";
        font-size: 15px;
        color: white;
        background: rgb(0, 0, 0);
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(2, 44, 23, 1) 33%,
            rgba(2, 44, 23, 1) 66%,
            rgba(0, 0, 0, 1) 100%
        );
    }
</style>

javascript vue.js search axios

Answer 1

Answer №1

When you place the axios request inside the mounted hook, it will only execute once when the component is mounted to the DOM. This means that nothing will happen as you type because the request is not triggered again.

I suggest two options to address this issue:

Option 1: Query the API once on page load and perform local searching on the client-side.

This approach allows for fast searching without querying the API repeatedly. You can control how the records are matched against your query. However, if new data is added to the API, you will need to refresh the page to see and search the updated information. It seems like this aligns with your current goal.

If this is the case, you can use a computed property to display the filtered results from a query while utilizing this.actorInfo to store the full list of searchable records:

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="filteredResults"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    data () {
      return {
        actorInfo: []
      }
    },
    mounted () {
      axios.get('https://www.breakingbadapi.com/api/characters?name')
        .then(response => {
          this.actorInfo = response.data
        })
    },
    computed: {
      filteredResults () {
        return this.actorInfo.filter(actor => {
          // Implement your own custom search algorithm here if needed
          return actor.toLowerCase().startsWith(this.searchTerm.toLowerCase())
        })
      }
    },
    methods: {
      onWordChange (searchTerm) {
        this.searchTerm = searchTerm
      }
    }
    ...
  }
</script>

Option 2: Query the API on every keystroke.

This method provides real-time access to new API data but may result in latency between keystrokes. There's also a risk of getting rate limited by the server due to frequent requests, and you have less control over how records are matched against the query.

To implement this, create a new method called search that performs an HTTP request based on the search term. Initially, call this method with an empty string in the mounted hook to load all records. Subsequently, each keystroke triggers a request with the input value to fetch filtered results.

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="actorInfo"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    mounted () {
      this.search('') // This loads all records on page load
    },
    methods: {
      onWordChange (searchTerm) {
        this.search(searchTerm)
      },
      search (searchTerm) {
        axios.get('https://www.breakingbadapi.com/api/characters?name=${searchTerm}')
          .then(response => {
            this.actorInfo = response.data
          })
      }
    }
    ...
  }
</script>

Answer 2

When you place the axios request inside the mounted hook, it will only execute once when the component is mounted to the DOM. This means that nothing will happen as you type because the request is not triggered again.

I suggest two options to address this issue:

Option 1: Query the API once on page load and perform local searching on the client-side.

This approach allows for fast searching without querying the API repeatedly. You can control how the records are matched against your query. However, if new data is added to the API, you will need to refresh the page to see and search the updated information. It seems like this aligns with your current goal.

If this is the case, you can use a computed property to display the filtered results from a query while utilizing this.actorInfo to store the full list of searchable records:

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="filteredResults"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    data () {
      return {
        actorInfo: []
      }
    },
    mounted () {
      axios.get('https://www.breakingbadapi.com/api/characters?name')
        .then(response => {
          this.actorInfo = response.data
        })
    },
    computed: {
      filteredResults () {
        return this.actorInfo.filter(actor => {
          // Implement your own custom search algorithm here if needed
          return actor.toLowerCase().startsWith(this.searchTerm.toLowerCase())
        })
      }
    },
    methods: {
      onWordChange (searchTerm) {
        this.searchTerm = searchTerm
      }
    }
    ...
  }
</script>

Option 2: Query the API on every keystroke.

This method provides real-time access to new API data but may result in latency between keystrokes. There's also a risk of getting rate limited by the server due to frequent requests, and you have less control over how records are matched against the query.

To implement this, create a new method called search that performs an HTTP request based on the search term. Initially, call this method with an empty string in the mounted hook to load all records. Subsequently, each keystroke triggers a request with the input value to fetch filtered results.

<template>
  <div>
    ...
    <Search v-on:wordChange="onWordChange"></Search>
    <ActorList v-bind:characters="actorInfo"></ActorList>
    ...
  </div>
</template>

<script>
  ...

  export default {
    ...
    mounted () {
      this.search('') // This loads all records on page load
    },
    methods: {
      onWordChange (searchTerm) {
        this.search(searchTerm)
      },
      search (searchTerm) {
        axios.get('https://www.breakingbadapi.com/api/characters?name=${searchTerm}')
          .then(response => {
            this.actorInfo = response.data
          })
      }
    }
    ...
  }
</script>

What is the best way to find information through the API?

Answer №1

Similar questions

The Parcel build was unsuccessful due to an error from @parcel/resolver-default: The file '../../../../../css/main.css' could not be loaded within the './src' directory

Perform the function prior to making any adjustments to the viewmodel attributes

Is it the browser's responsibility to convert ES6 to ES5 internally?

The class .is-invalid transforms into .is-valid when rendered

Exploring the process of integrating pagination into vue.js

Hide the Select Column from the material-react-table

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

How can an object inside an array be destructured in just one line?

click event to activate delayed function in dropdown

Identify and react to an unexpected termination of an ajax upload process

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

Is there a way to identify the subdocument ids that have been updated in Mongoose when performing an

JavaScript Fullcalendar script - converting the names of months and days

Issue with rendering components list in React.js

Setting the row ID value after performing form editing in free jqGrid

Traversing through nested arrays within nested objects using AngularJS

Is it possible for a function within a nodejs module to be defined but display as undefined upon access?

Unable to deserialize an instance of java.util.List from the VALUE_STRING

A guide on implementing the stencilFunc method in Three.js

Incorporating Hyperlinks into Text using React I18next