Struggling to integrate data retrieved from a Vue.js API

Question

Struggling to integrate data retrieved from a Vue.js API

Once I receive the API call with an attached string input, I successfully get the result. However, I am struggling to incorporate it into my frontend. I have attempted various solutions found online without success and cannot seem to grasp the concept. Here's what I have tried so far:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = text/javascript src = https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<form action="http://127.0.0.1:1880/" target="_self">
    <label for="request"><strong>Please insert the input here:</strong></label><br>
    <input type="text" id="request" name="input"><br>
    <button v-on:click="getOverview($event)">Submit</button>
</form>
<h1 id="results" v-for="overview in overview">
    {{overview}}
</h1>
<script type = text/javascript >
    new Vue({
        el: "#results",
        data() {
            return {
                overview: []
            }

        },
        methods: {
            async getOverview(event) {
                try {
                    const {data:{json:{sub_regions}}} = await axios.get('http://127.0.0.1:1880/');
                    console.log('results data', sub_regions);
                    this.overview = sub_regions;
                }
                catch (error) {
                    console.log(error);
                    return [];
                }
            }
        },
        created(){
            this.getOverview()
        }
    })
</script>
</body>
</html>

I am new to JavaScript and feeling a bit overwhelmed by it, any help would be greatly appreciated. Thank you in advance! :)

EDIT: The file returned from the API is in JSON format

javascript api vue.js

Answer 1

Answer №1

It seems like you are attempting to execute a method outside of the Vue app itself. Although you have specified el: "results", you are trying to call a Vue method from a button that is not within its context.

Please consider revising your code as follows:

<div id="results">
  <form action="http://127.0.0.1:1880/" target="_self">
      <label for="request"><strong>Please enter input here:</strong></label><br>
      <input type="text" id="request" name="input"><br>
      <button v-on:click="getOverview($event)">Submit</button>
  </form>
  <h1 v-for="overview in overview">
      {{overview}}
  </h1>
</div>

Answer 2

It seems like you are attempting to execute a method outside of the Vue app itself. Although you have specified el: "results", you are trying to call a Vue method from a button that is not within its context.

Please consider revising your code as follows:

<div id="results">
  <form action="http://127.0.0.1:1880/" target="_self">
      <label for="request"><strong>Please enter input here:</strong></label><br>
      <input type="text" id="request" name="input"><br>
      <button v-on:click="getOverview($event)">Submit</button>
  </form>
  <h1 v-for="overview in overview">
      {{overview}}
  </h1>
</div>

Answer 3

Answer №2

Encountering some issues...

Make sure not to include Vue library twice (

https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js

and

https://unpkg.com/vue/dist/vue.js

). It's unnecessary.

Avoid using a v-for directive on the root Vue element.
Your form should be within the Vue root in order to utilize v-on.
The submit button will proceed with the default form submission behavior without any intervention.
The value of your input field is not being utilized. Consider binding it to a data property.

Revise your HTML code as follows:

<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please enter input here:</strong>
    </label> 
    <br>
    <input type="text" id="request" name="input" v-model="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item }}
  </h1>
</div>

Replace data section in your JS with:

data: () => ({
  overview: [],
  input: ''
})

You can access user input value by using this.input.

Here's an example incorporating a placeholder API:

new Vue({
  el: "#results",
  data: () => ({
    overview: [],
    input: ''
  }),
  methods: {
    async getOverview ($event) {
      let url = 'https://jsonplaceholder.typicode.com/users'
      if (this.input) {
        url += `/${encodeURIComponent(this.input)}`
      }
      try {
        const { data: sub_regions } = await axios.get(url)
        console.log('results data', sub_regions);
        this.overview = Array.isArray(sub_regions) ? sub_regions : [ sub_regions ]
      } catch (error) {
        console.log(error);
        this.overview = []
      }
    }
  },
  created() {
    this.getOverview()
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please insert the user ID here:</strong>
    </label>
    <br>
    <input type="number" id="request" name="input" v-model.number="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item.name }}
  </h1>
</div>

Additional Notes:

Avoid using the same variable name for array and iterable.
- Incorrect -
```
v-for="overview in overview"
```
- Correct -
```
v-for="thing in things"
```
VueResource is outdated. Update to the latest version (1.5.1) or consider alternative solutions.

Answer 4

Encountering some issues...

Make sure not to include Vue library twice (

https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js

and

https://unpkg.com/vue/dist/vue.js

). It's unnecessary.

Avoid using a v-for directive on the root Vue element.
Your form should be within the Vue root in order to utilize v-on.
The submit button will proceed with the default form submission behavior without any intervention.
The value of your input field is not being utilized. Consider binding it to a data property.

Revise your HTML code as follows:

<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please enter input here:</strong>
    </label> 
    <br>
    <input type="text" id="request" name="input" v-model="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item }}
  </h1>
</div>

Replace data section in your JS with:

data: () => ({
  overview: [],
  input: ''
})

You can access user input value by using this.input.

Here's an example incorporating a placeholder API:

new Vue({
  el: "#results",
  data: () => ({
    overview: [],
    input: ''
  }),
  methods: {
    async getOverview ($event) {
      let url = 'https://jsonplaceholder.typicode.com/users'
      if (this.input) {
        url += `/${encodeURIComponent(this.input)}`
      }
      try {
        const { data: sub_regions } = await axios.get(url)
        console.log('results data', sub_regions);
        this.overview = Array.isArray(sub_regions) ? sub_regions : [ sub_regions ]
      } catch (error) {
        console.log(error);
        this.overview = []
      }
    }
  },
  created() {
    this.getOverview()
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please insert the user ID here:</strong>
    </label>
    <br>
    <input type="number" id="request" name="input" v-model.number="input">
    <br>
    <button type="submit">Submit</button>
  </form>
  <h1 v-for="item in overview">
    {{ item.name }}
  </h1>
</div>

Additional Notes:

Avoid using the same variable name for array and iterable.
- Incorrect -
```
v-for="overview in overview"
```
- Correct -
```
v-for="thing in things"
```
VueResource is outdated. Update to the latest version (1.5.1) or consider alternative solutions.

Struggling to integrate data retrieved from a Vue.js API

Answer №1

Answer №2

Similar questions

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

What is the reason that the select option change event does not allow the use of "this" and event.target to access the selected value

The Vuejs component I created is failing to display on my Blade View

How do you attach events to slots without disrupting the layout of the content?

The parameters for Vue.js @change events are consistently returning as 0 whenever a file is uploaded by clicking on the picture

Discover the steps to incorporate an external JS file into Next.js 12

The disappearance of hashtag (#) when passed as req.query in the backend has been observed

Webpage push notifications are a convenient feature that allows websites to

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

What is the reason behind Chrome's fullscreen mode turning the background black?

What could be the reason for the Azure server sending a Bad Request response?

Step-by-step guide on permanently updating the text of select options with JavaScript

Every time I switch views using the router in vue.js, my three.js canvas gets replicated

Incorporate chat functionality into Angular using an embedded script

Should I choose JavaScript or TypeScript for Angular 2.0?

Unable to successfully upload a .docx file within OnlyOffice utilizing JavaScript

Troubleshooting: AngularJS Http Post Method Failing to Execute

The value of a variable undergoes a transformation following its insertion into an

Creating a regular expression to match special characters using JavaScript

Unraveling the mystery: How does JavaScript interpret the colon?