CODEWITHSUNDEEP
javascriptapivue.js
Bernnt
Bernnt

Reputation: 21

Problem incorporating data got from API vue.js

After get API call with a string input attached, I get the result alright. The problem I have is incorporating it to my frontend. I have tried a lot of solutions that I found online but nothing working and cannot understand. So far I have done this:

<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 a bit lost with javascript as I am new to it, all kinds of help are welcome, Thank you in advance! :)

EDIT: the file I get from the API is JSON

Upvotes: 2

Views: 83

Answers (2)

Phil
Phil

Reputation: 164731

Some problems here...

  1. You're including Vue twice (https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js and https://unpkg.com/vue/dist/vue.js). Don't do that
  2. You cannot use a v-for directive on your root Vue element
  3. Your form is outside your Vue root so you won't be able to use v-on
  4. Your submit button will submit the form normally. There's nothing stopping that from happening
  5. Your input value is never used. You should try binding it to a data property

Change your HTML to

<div id="results">
  <form action="http://127.0.0.1:1880/" @submit.prevent="getOverview">
    <label for="request">
      <strong>Please insert the 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>

and in your JS, replace data with

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

Then you can use this.input if you ever need to get the value the user types in.

Here's an example using 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>

Other notes:

  • Avoid using the same variable name for your array and iterable.

    • Bad - v-for="overview in overview"
    • Good - v-for="thing in things"

  • VueResource is long dead. Avoid using it or at least update to the latest version (1.5.1)

Upvotes: 1

procoib
procoib

Reputation: 487

Looks as though you are trying to call a method outsides of the vue app itself. You have the el: "results" but you are trying to invoke a vue method within your button outside of its context.

Try something like this:

<div id="results">
  <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 v-for="overview in overview">
      {{overview}}
  </h1>
</div>

Upvotes: 1

Related Questions