how to access the item in an array in a script?

Question

I am new to vue and Laravel Framework.

I wanted to fetch data from api and display those data dynamically.

I have created a table named 'Progress' and seeded some data. I have used API resource to fetch data .

I have created a vue template to fetch the data from the api.

this is my template

<template>
<div class="container">
    <h1> Goals </h1>
    <p id="demo"></p>
       <div  class= "progress progress-bar-segmented"  v-for = "progressdata in progress" v-bind:id="progressdata.id">
             <div> {{ progressdata.name }} </div>
             <div id="div1" class="progress-bar" style="width:20%">{{ progressdata.goal }}</div>
              <div id="div2" class="progress-bar value" style="width:20%">{{ progressdata.value }}</div>
        </div>
</div>

</template>

The problem is how to access the individual values like {{ progressdata.goal }} and {{ progressdata.value }} from a progress array in a script?

If I use var a = this.progressdata.goal inside a method. I could receive undefined value

I know that they are accessible only within that scope.. How to access them in a script individually?

this is my script

<script>

  export default {
     data: function() {
            return {
              progress: [],

          }
        },

    mounted() {
       this.loadContents();
       this.start();
       setInterval(this.loadContents, 1000);


    },
    methods: {

     loadContents: function() {
           //load Api
           axios.get('/api/progress')
           .then((response) => {
               this.progress = response.data.data;
         })
         .catch(function (error) {
           console.log(error);
    });
  },

  start: function() {
        var  allProgressElements = document.getElementsByClassName('progress');
        Array.prototype.forEach.call(allProgressElements, function(el) {
        var targetDOM = $(el).getElementsByClassName('value');
        targetDOM.innerHTML = json.data[targetDOM.id].value;
       });
       }
}
}
</script>

Anyone could help please?
thank you.

You can remove the start function completely. On a successful axios call, the progress value is set, and due to Vue's reactivity, the v-for will be activated. Do a console.log in the axios response to check the response. Is the response an array of objects, like you expect? — Maarten Veerman
– Maarten Veerman, Commented Jun 11, 2020 at 16:59
Thank you fo your feedback. No, i need to get the value of each item in the progress array individually for example goal and value ..How to get them ? And how to pass them inside a method in the script? Could you please help.. — Komal Raja
– Komal Raja, Commented Jun 12, 2020 at 1:14
Inside your script (methods, computed, etc) you can access the progress array, and access each item in the array: a = this.progress[0].goal — Maarten Veerman
– Maarten Veerman, Commented Jun 12, 2020 at 4:37
yeah i have tried a = this.progress[0].goal in a method ..But i recieved TypeError: Cannot read property 'goal' of undefined". How to solve this ? Could you please help? — Komal Raja
– Komal Raja, Commented Jun 12, 2020 at 6:42

Maarten Veerman · Accepted Answer · 2020-06-12 07:01:28Z

1

There are several things going on here:

Useing Vue, there is hardly ever the need to use function to access the DOM directly. So eliminate those in the start function.
You have a misunderstanding in code execution flow, espessially because of the axios Promise (see code below)
Make sure to read all about Vue reactivity, properties and scoping.

<script>

  export default {
     data: function() {
            return {
              progress: [], // The progress array is defined
          }
        },

    mounted() {
       // Component mounted, start loading of contents
       this.loadContents();

       // Note i removed code here! Because that codes was
       // executed right after the loadContents call, but
       // before the axios result came in!  
    },
    methods: {

     loadContents: function() {
           //load Api
           // The get function returns a promis
           axios.get('/api/progress')
           .then((response) => {
               // Promise resolved, now set the data:
               this.progress = response.data.data;
               // And now we can perform the start function
               this.start()
               // Maybe add the setInterval code here, although you need
               // to check if you really want to hit your server every second....
               // Better to use a websocket and let the server notify you about the progress
         })
         .catch(function (error) {
           console.log(error);
    });
  },

  start: function() {
      // And in this function we now have access to the progress array:
      for (const item of this.progress) {
         console.log(item.goal) 
     }
  }
}
</script>

answered Jun 12, 2020 at 7:01

Maarten Veerman

1,6211 gold badge10 silver badges10 bronze badges

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

8 Comments

Komal Raja Over a year ago

Thank you for your support.. is it possible to declare the item.goal in a variable like a=item.goal? If I do i didn't get the result. Could you please help?

Komal Raja Over a year ago

I need to create a circular progress bar with goal as target and value as server data. The value should be updated every second to 2. I am not sure how to do.?Could you please help me? Thanks.

Maarten Veerman Over a year ago

Look at vuetifyjs.com/en/components/progress-circular/… than in your v-for loop, add this progress-circular, and set it's percentage to :percentage="progessdata.value / progressdata.goal" (basically it doesnt matter if you use vuetify or not, just calculate the progress in you v-for loop, you don't really need the start function I think)

Komal Raja Over a year ago

Thanks for your support :-) I have placed the below code from the given link.. ```<div class = "progress"

Maarten Veerman Over a year ago

You need to use vuetify in Vue. See vuetifyjs.com/en/getting-started/quick-start

|

Collectives™ on Stack Overflow

how to access the item in an array in a script?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related