[Vuejs]-Using $set to grab jquery variable and push it to an vue array object

by

0👍

Add data key to hold the data set

 <script>
       var app = new Vue({
            el: "#app",
            data: {
                movies: [],
            },
        methods:
          $.getJSON("https://api.themoviedb.org/3/movie/now_playing?api_key=9d9f46b8451885697e5cf7d1927da80f", function (movies) {
              for (var x = 0; x < movies.results.length; x++) {
                //console.log("\nTitle"+movies.results[x].title);
                //app.movies.$set(x, movie.results[x].title);
                app.movies.push(movies.results[x].title);
                console.log(JSON.stringify(app.movies)) 
            }
          })
        }); 
    </script>

And try with this command

app.movies.push(movie.results[i].title);

Here is a working example or sample which i created : https://plnkr.co/edit/EnepqQqXzEquJlxqjzn6?p=preview

Ref1: https://v2.vuejs.org/v2/guide/list.html

0👍

If you want to access movies like:

<div v-for="(movie, index) of movies">
   ...
   {{movie.title}}
   ...
   {{movie.description}}

Then populate it as:

app.$set(app.movies, i, {title: movie.results[i].title, description: movie.results[i].description});

Or, if i is incrementing one by one, the equivalent:

app.movies.push({title: movie.results[i].title, overview: movie.results[i].description});

0👍

Your code needs a bit of an upgrade / correction before it’s OK, so I prepared a snippet for you that does the same thing (with a mockup JSON response), so you can see that you don’t need app or $set for this.

var app = new Vue({
  el: "#app",
  data: {
    movies: []
  },
  methods: {
    movieCall() {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => {
          json.forEach(movie => this.movies.push(movie))
          // or just simply:
          // this.movies = json
        })
    }
  },
  created() {
    this.movieCall()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(movie,index) in movies">
    <div>
      <div>{{index + ". Title: " + movie.title}}</div>
      <div>{{index + ". Body: " + movie.body}}</div>
    </div>
  </div>
</div>

I tried to keep this as close to your code as possible (but CSS classes were taken out).

Basically Vue is reactive (data property), so if you update the data property movies the template should immediately react to that and update the UI. That’s the core idea of a JS frontend framework.

Accessing data in object syntax (like movies.title, with a dot), is another matter. In your project you set up a data property – movies, that’s an array. An array can hold any type of elements – objects too.

The idea is that you download the objects and then read them (one by one) into the movies data property. Or, if you receive an array, then this.movies = response (make them equal, assigning the response to the movies array.

Then there’s an other thing: Vue templates have their lifecycle, and created() is a hook, that can be used to execute functions when the template is created. If you want something to run once, you should utilize these lifecycle hooks. (Of course, if your app reloads this template, then it executes the hook many times. To avoid this (downloading something multiple times) you should look into state management, but that’s a large topic in itself.)

Leave a comment