How to access an API with Vue.js?

Question

How to access an API with Vue.js?

28.8k views Asked by thefreebird777 At 24 November 2024 at 13:39

I'm new to JavaScript and Vue.js, and I'm having trouble accessing an api using Vue.js. The API I'm trying to access has JSON that looks like this:

{
    "coord": {
        "lon": -88.99,
        "lat": 40.51
    },
    "weather": [
        {
            "id": 800,
            "main": "Clear",
            "description": "clear sky",
            "icon": "01n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 2.09,
        "pressure": 1022.3,
        "humidity": 69,
        "temp_min": 2.09,
        "temp_max": 2.09,
        "sea_level": 1052.03,
        "grnd_level": 1022.3
    },
    "wind": {
        "speed": 12.66,
        "deg": 205.502
    },
    "clouds": {
        "all": 0
    },
    "dt": 1482203059,
    "sys": {
        "message": 0.186,
        "country": "US",
        "sunrise": 1482239741,
        "sunset": 1482273134
    },
    "id": 4903780,
    "name": "Normal",
    "cod": 200
}

The API link on it's own works, but I do not think I'm accessing it when I run the program. Even when I don't try and parse the JSON and just display all the data collected from the api my variable is still empty. So, I must be doing something wrong to access the api. Also, after accessing the api, will parsing it like this work: for example, to access the tag "temp" => "data.main.temp"

var weather = new Vue({
        el: '#weather',

        data: {
            getTemp: ''
        },

        created: function () {
            this.fetchData();
        },        

        methods: {
            fetchData: function () {
                this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
                    function (data) {
                        this.getTemp = data.main.temp;
                    }
            }
        }

    })
    ;

HTML code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <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>
</head>

<body>
<div id="weather">
    {{getTemp}}
</div> <!--end of weather-->
</body>

<script src="app.js"></script>

</html>

Original Q&A

There are 2 answers

Belmin Bedak On 20 December 2016 at 08:21

I'd like to go with promises, and few other adjustments here, in your code

var weather = new Vue({
        el: '#weather',

        data: {
            getTemp: []
        },

        created: function () {
            this.fetchData();
        },        

        methods: {
            fetchData: function () {
                this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID')
                          .then(response => {
                             this.getTemp = response.data
                             // or like this this.getTemp = response.json()
                          })
            }
        }

    })
    ;

**Saurabh** · Accepted Answer · 2016-12-20 03:35:02

I see the problem with scope of this, scope of this changes inside $http.get black, you need to make following changes:

    methods: {
        fetchData: function () { 
            var vm = this
            this.$http.get('api.openweathermap.org/data/2.5/weather?q=Normal&units=imperial&APPID=MYAPPID'),
                function (data) {
                    vm.getTemp = data.main.temp;
                }
        }
    }

You can also check my similar answer here.

TechQA.

How to access an API with Vue.js?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JSON

Related Questions in API

Related Questions in VUE.JS

Related Questions in VUE-RESOURCE

Popular Questions

Popular Tags

Trending Questions