在JavaScript中使用数组映射对象

Question

I'm using Vue Select Image for multi selecting images. Vue Select Image expects the array to be with the following keys

 [{ id: '1', src: 'https://unsplash.it/200?random', alt: 'Alt Image 1' }, { id: '2', src: 'https://unsplash.it/200?random', alt: 'Alt Image 2' }] 

And my api route gives the object with following keys:

 (2)[{…}, {…}] 0: created_at: "2019-07-26 07:44:56" id: 3 name: null path: "img/d1ef5a9c54ee32df12c213b1491e1636.jpg" thumb: "img/thumb_d1ef5a9c54ee32df12c213b1491e1636.jpg" updated_at: "2019-07-26 07:44:56" 

Below is my code snippet:

 import VueSelectImage from "vue-select-image"; import "vue-select-image/dist/vue-select-image.css"; export default { data() { return { dataImages: [{ id: "", src: "", alt: "" }] }, selected: {}, initialLoad() { axios.get("api/gallery").then(response => { this.dataImages = Object.keys(response.data.data).map(function(key) { return [Number(key), response.data.data[key]]; }); // console.log(response.data.data); }); }, components: { VueSelectImage }, }; 

 <template> <div> <vue-select-image :dataImages="dataImages" @onselectimage="selected"></vue-select-image> </div> </template> 

The above code maps object with array with its own keys. And displays 2 circle as there are 2 data receiving from api. Clicking on them gives the following error:

Error in event handler for "onselectimage": "TypeError: fns.apply is not a function"

Answer 1

Map through array of objects you get from API, it returns new array with objects with desired fields.

axios.get("api/gallery").then(response => {
  this.dataImages = response.data.data.map((obj, index) => {
    return {
      id: obj.id,
      src: obj.path,
      alt: `Alt image ${index}`
    };
  });
});