How to access an API with Vue.js?

Question

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>

Community · Accepted Answer · 2017-05-23 12:32:16Z

9

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.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Dec 20, 2016 at 3:35

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

thefreebird777 Over a year ago

Thanks, it's still not working, but that would have caused me problems later.

Saurabh Over a year ago

@thefreebird777 Are you getting data from API, if you console log data in $http call?

thefreebird777 Over a year ago

no, I'm not. But if I put the API url in my address bar it works, so the link is good.

Saurabh Over a year ago

Can you check what you get when you console.log(data.main) inside $http call?

thefreebird777 Over a year ago

(process:1374): GLib-CRITICAL **: g_path_get_basename: assertion 'file_name != NULL' failed

Belmin Bedak · Accepted Answer · 2016-12-20 08:21:42Z

3

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()
                          })
            }
        }

    })
    ;

answered Dec 20, 2016 at 8:21

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

5 Comments

kiltek Over a year ago

Shouldn't it be: this.data.getTemp = response.data ?

Belmin Bedak Over a year ago

@kiltek nope, It shouldn't

kiltek Over a year ago

ok, it figures itself out, magically. Got it working with your version.

adelriosantiago Over a year ago

How does it figures it out? @BelminBedak

Belmin Bedak Over a year ago

@adelriosantiago not sure exactly, but I guess It uses some kind of proxy.

Collectives™ on Stack Overflow

How to access an API with Vue.js?

2 Answers 2

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related