CODEWITHSUNDEEP
jsonvue.jsaxios
Tibo
Tibo

Reputation: 197

Get Json values with Axios

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 ?

Upvotes: 1

Views: 5558

Answers (1)

Tibo
Tibo

Reputation: 197

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

Upvotes: 2

Related Questions