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"] }
        ]
       */  
 
            })
         })
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="app">
  <div>
       <div class="row">
         <div class="col-sm-6">
         <h5>Wrong result :</h5>
           <div v-for="service in arrayService"  :key="service.id">
             <strong>Id Service:</strong> {{service.service}}
             <br>
             <strong>Format:</strong>
             <div v-for="format in arrayFormat" :key="format.id">
                {{format}}
             </div>
           </div>
            
         </div>
         <div class="col-sm-6">
         <h5>Correct result:</h5>
             <strong>Id Service:</strong> 2
             <br>
             <strong>Format:</strong>
             <br>
             .mp3
             <br>
             .mp4
             <br>
             <strong>Id Service:</strong> 3
             <br>
             <strong>Format:</strong>
             <br>
             .jpg
             <br>
             .png
           <br>
         </div>
       </div>
       <br>
       <br>
       <br>
       <br><br>
       <br>
       <br>
       <br>
       <br>
       <br>
  </div>
</div>

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 · 2021-07-07 00:46:31Z

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:

<div v-for="service in arrayService" :key="service.service">
  ...                      👇
  <div v-for="format in service.format" :key="format">
    {{format}}
  </div>
</div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="app">
  <div v-for="service in arrayService" :key="service.service">
    <strong>Id Service:</strong> {{service.service}}
    <br>
    <strong>Format:</strong>
    <div v-for="format in service.format" :key="format">
      {{format}}
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related