How to render an array inside another object array with Vue Js

Question

I am working with Laravel Vuejs, and from my database I obtain an object array called arrayService, through axios I perform a get where the array I obtain can be seen represented.

var app = new Vue({
  el: '#app',
  mounted() {
  //this.getService()
  },
  data() {
    return {
    arrayService: [
        { service: '2', format: [".mp3",".mp4"] },
        { service: '3', format: [".jpg",".png"] },
      ],
    arrayFormat: [".mp3",".mp4",".jpg",".png"]
    }
  },
  methods:
  {
    getService() { 
      axios.get('/').then(function(response){
        this.arrayService = response.data

        /*I GET FROM THE DATABASE 
       arrayService: [
        { service: '2', format: [".mp3",".mp4"] },
        { service: '3', format: [".jpg",".png"] },
      ],
       */
          $.each(response.data, function (key,value) {
            $.each(JSON.parse( value.format ), (key,element) => { 
               this.arrayFormat.push(element)
               
        /*RESULT OF PARSE:
       arrayFormat: [
          { [".mp3",".mp4",".jpg",".png"] }
        ]
       */  
 
            })
         })
      })
    }
  }
})







  
       
         
         Wrong result :
           
             Id Service: {{service.service}}
             

             Format:
             
                {{format}}
             
           
            
         
         
         Correct result:
             Id Service: 2
             

             Format:
             

             .mp3
             

             .mp4
             

             Id Service: 3
             

             Format:
             

             .jpg
             

             .png

When I store the array arrayService, what I do is a Parse, inside the format attribute, since there is another array with the formats of each service. (see comments).

By doing this Parse, I finally do a push to store all these elements (formats) in an array called arrayFormat.

The problem I am having is that when doing that push, it stores everything together, and it is not what I am looking for.

What I am looking for is to store each format, regarding its service.

In the HTML view I tried to show the correct result, but the idea is to put all this together with VueJS.

Any idea?

tony19 · Accepted Answer

You don't need the arrayFormat array at all, since the data structure you need is already in the API response.

You can iterate the nested array (service.format) directly:


  ...                      👇
  
    {{format}}

new Vue({
  el: '#app',
  data() {
    return {
      arrayService: [{
          service: '2',
          format: [".mp3", ".mp4"]
        },
        {
          service: '3',
          format: [".jpg", ".png"]
        },
      ],
    }
  },
})





  
    Id Service: {{service.service}}
    

    Format:
    
      {{format}}

How to render an array inside another object array with Vue Js

Answers (1)

Related Questions