1

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
  • 197
  • 2
  • 15

1 Answers1

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);
                    });
Tibo
  • 197
  • 2
  • 15
  • 1
    If you're asking yourself why it works, see the documentation on [Arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and this [other question](https://stackoverflow.com/q/24900875/1218980). – Emile Bergeron Apr 12 '18 at 13:40
  • Yes, without the arrow syntax 'this' wouldn't have been available. Great job. :) – TytonDon Apr 13 '18 at 23:32