Get Json values with Axios

Question

I'm trying to get all "Title", "Year" and "imdbID" from this link.

I'm using Vuejs and Axios to do so. But I'm not sure how it's done ?

Here's my code :

<!DOCTYPE html>

<html>

<head>
    <meta charset=""utf-8>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>Web Project 2018</title>
    <link rel="stylesheet" href="">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <h2>Liste of films</h2>
        <ul>
            <li v-for="film in films">{{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}</li>
        </ul>
</div>

    <script>
        new Vue({
            el: '#app',
            data : {
                films: [],
                errors: []
            },
            created() {
                axios.get('http://www.omdbapi.com/?apikey=xxxxx&s=iron%20man')
                        .then(function(response) {
                            this.films = response.data;
                        })
                        .catch(function(error) {
                            this.errors.push(error);
                        });
            }
        })
    </script>
</body>

</html>

With this, I only get a page with {{ film.Title }}, {{ film.Year }}, {{ film.imdbID }}

I'm sure it's simple but I can't figure it out... Any help please ?

Tibo · Accepted Answer · 2018-04-14 16:14:32Z

2

Worked with arrows :

 axios.get('http://www.omdbapi.com/?apikey=xxxx&s=iron%20man')
                    .then(response => {
                        this.films = response.data.Search;
                    })
                    .catch(error => {
                        this.errors.push(error);
                    });

edited Apr 14, 2018 at 16:14

answered Apr 12, 2018 at 13:16

Tibo

1973 silver badges18 bronze badges

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

2 Comments

Emile Bergeron Over a year ago

If you're asking yourself why it works, see the documentation on Arrow function and this other question.

TytonDon Over a year ago

Yes, without the arrow syntax 'this' wouldn't have been available. Great job. :)

Collectives™ on Stack Overflow

Get Json values with Axios

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related