Convert api response array to another array to pass to Vue prop

Question

I want to use this vue flipbook component and it needs a array of image urls for the prop "pages". My posts response is coming from the wordpress rest api.

I need to get the "image" property from the response array and convert it into another array of image urls. Normally I would use the posts() in computed like v-for=post in posts in my template and display the image like post.image_full in the loop..

Flipbook component:

<Flipbook
   class="flipbook"
   :pages="imagesArray" <--- images array here
   v-slot="flipbook"
   ref="flipbook"
   >
</Flipbook>

My Posts.vue component:

export default {
  name: 'GridOne',
  props: {
    page: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      request: {
        type: 'posts',
        params: { 
          per_page: this.$store.state.site.posts_per_page,
          page: this.page
        }, 
        showLoading: true 
      },
      totalPages: 0
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request) <--- my response array
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
    setTotalPages() {
      this.totalPages = this.$store.getters.totalPages(this.request)
    }
  },
  created() {
    this.getPosts().then(() => this.setTotalPages())
  }
}

Michael Mano · Accepted Answer · 2019-07-02 09:27:30Z

3

You can use JavaScript "map" function. This function takes one array and return a new one.

// If this is the response array....
const response = [{name: 'image 1', url: 'https://uri.com/img1'}, ...]


// Then you return something like this
response.map(item => {
    return {
       ...item,
       image_full: item.url
    }
})

edited Jul 2, 2019 at 9:27

Michael Mano

3,4582 gold badges16 silver badges36 bronze badges

answered Jul 1, 2019 at 20:59

Daniel Peña

765 bronze badges

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

2 Comments

shubhra Over a year ago

I'm getting undefined on posts when i look in the vue devtools. Sorry, i'm still learning and am probably doing it wrong. If i just do return this.$store.getters.requestedItems(this.request), I get the correct response from the api. This is how i'm doing it:

computed: {     posts() {       const response = this.$store.getters.requestedItems(this.request)       response.map(item => {         return item.media_full                })     }   },

aquilesb Over a year ago

@shubhra You have to return the response on the end of posts function. return response.map(item => { return item.media_full }) Also considerate to check if response is a valid variable before interate it

Collectives™ on Stack Overflow

Convert api response array to another array to pass to Vue prop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related