Creating object that displays an array of properties for movie list in Vue 3 JS-CodePudding

What I am trying to achieve with the movie_properties is to make it that, it stores the lists information, like the movies id, names, genre, comingSoon, avalable, thumbnail and preview.

just a note this is an API call that I am working with and all the information is in there. I just need to know if what I am doing is correct and how do would I push the above information from the list into their respective group.

Vue.js code

const url = "https://project-apis.codespace.co.za/api/movies";
const watchlistEndpoint = " https://project-apis.codespace.co.za/api/list";

const { createApp } = window.Vue;

const getData = () =>
  new Promise((resolve) => {
    fetch(url)
      .then((response) => response.json())
      .then((json) => json.data.map((item) => item.name))
      .then((names) => resolve(names));
  });

const component = {

  data() {
    return {
      movie_properties:{
        id:[],
        names:[],
        genre:[],
        comingSoon:[],
        avalable:[],
        thumbnail:[],
        preview:[]
      },

      list: [],
      search: ''
    }
  },

  computed:{
    filteredList(){
        return this.list.filter(item => item.includes(this.search))
    },

    createID(){
        return this.list.id()
    }
  },

  mounted() {
    getData().then((resolveData) => { this.list = resolveData;})
  },


  template: /*HTML Elements*/
    `<div v-if="list.length < 1">Fetching data...</div>
     <div v-else>
     <div >
      <div >

        <ul>
          <li>Home</li>
          <li>TV Shows</li>
          <li>Movies</li>
          <li>New & Popular</li>
          <li>My List</li>
        </ul>

        <input  v-model="search">
        
      </div>

        <ul>
            <li v-for="item in filteredList">{{ item }}</li>
        </ul>
    </div>
    `
}

window.addEventListener("DOMContentLoaded", () => {
  const app = createApp(component);
  app.mount("#netflixApp");
});

CodePudding user response：

Please don't take this as offense but if you do not know how to enumerate or push to array - it sounds like you're trying to jump from 2nd grade to 6th grade, skipping those in-between ...

 mounted() {
    getData().then((resolveData) => 
    { 
      this.list = resolveData;
      const result = {
        id:[],
        names:[],
        genre:[],
        comingSoon:[],
        available:[],
        thumbnail:[],
        preview:[]
      };
      const tmp = new Date();
      const today = tmp.getFullYear()   '-'   String(tmp.getMonth()   1).padStart(2, '0')   '-'   String(tmp.getDate()).padStart(2, '0');
      resolveData.forEach(movie =>
      {
        result.id.push(movie.id);
        result.names.push(movie.name);
        result.comingSoon.push(movie.is_coming_soon > 0);
        result.thumbnail.push(movie.image);
        result.preview.push(movie.description);
        result.available.push(movie.release_date <= today);
      });
      this.movie_properties = result;
    });
  },