I have a method in Vuejs which updates a set of variables based on a selection.

methods: {
  updateChart(){
    this.chart1.series[1].data = [this.$store.state.selectedcities[0].value[1]];
    this.chart1.series[2].data = [this.$store.state.selectedcities[0].value[2]];
    this.chart1.series[3].data = [this.$store.state.selectedcities[0].value[3]];
    this.chart1.series[5].data = [this.$store.state.selectedcities[0].value[5]];
    this.chart1.series[7].data = [this.$store.state.selectedcities[0].value[7]];
    this.chart1.series[8].data = [this.$store.state.selectedcities[0].value[8]];
    this.chart1.series[9].data = [this.$store.state.selectedcities[0].value[9]];
    this.chart1.series[11].data = [this.$store.state.selectedcities[0].value[11]];
    this.chart1.series[12].data = [this.$store.state.selectedcities[0].value[12]];
    this.chart1.series[13].data = [this.$store.state.selectedcities[0].value[13]];
    this.chart1.series[14].data = [this.$store.state.selectedcities[0].value[14]];
    this.chart1.series[16].data = [this.$store.state.selectedcities[0].value[16]];
    this.chart1.series[17].data = [this.$store.state.selectedcities[0].value[17]];
    this.chart1.series[18].data = [this.$store.state.selectedcities[0].value[18]];
    this.chart1.series[20].data = [this.$store.state.selectedcities[0].value[20]];
    this.chart1.series[21].data = [this.$store.state.selectedcities[0].value[21]];
    this.chart1.series[22].data = [this.$store.state.selectedcities[0].value[22]];
}

The problem is that it looks rather verbose, so I wonder if I can run a for loop there that iterates through those numbers. The thing is that the numbers aren't sequenced. I mean the series runs as {1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22}.

In the end what I'm searching for is something that looks like this:

methods:{
 updateChart(){
  var n = {1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22}
    for(i in n){
          this.chart1.series[i].data = [this.$store.state.selectedcities[0].value[i]];
            }
          }
        }

I'm not really sure how to do it as I'm quite new to javascript.

EDIT:

Is it possible to add a nested foreach with this method? For example:

var k = [1,3,6]
var n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22]
    n.forEach(i=>{
          this.chart[k].series[i].data = [this.$store.state.selectedcities[k].value[i]];
            })

Note that k was added to the formula and that n is child of k. So for each k it should run the series of n.

I have a method in Vuejs which updates a set of variables based on a selection.

methods: {
  updateChart(){
    this.chart1.series[1].data = [this.$store.state.selectedcities[0].value[1]];
    this.chart1.series[2].data = [this.$store.state.selectedcities[0].value[2]];
    this.chart1.series[3].data = [this.$store.state.selectedcities[0].value[3]];
    this.chart1.series[5].data = [this.$store.state.selectedcities[0].value[5]];
    this.chart1.series[7].data = [this.$store.state.selectedcities[0].value[7]];
    this.chart1.series[8].data = [this.$store.state.selectedcities[0].value[8]];
    this.chart1.series[9].data = [this.$store.state.selectedcities[0].value[9]];
    this.chart1.series[11].data = [this.$store.state.selectedcities[0].value[11]];
    this.chart1.series[12].data = [this.$store.state.selectedcities[0].value[12]];
    this.chart1.series[13].data = [this.$store.state.selectedcities[0].value[13]];
    this.chart1.series[14].data = [this.$store.state.selectedcities[0].value[14]];
    this.chart1.series[16].data = [this.$store.state.selectedcities[0].value[16]];
    this.chart1.series[17].data = [this.$store.state.selectedcities[0].value[17]];
    this.chart1.series[18].data = [this.$store.state.selectedcities[0].value[18]];
    this.chart1.series[20].data = [this.$store.state.selectedcities[0].value[20]];
    this.chart1.series[21].data = [this.$store.state.selectedcities[0].value[21]];
    this.chart1.series[22].data = [this.$store.state.selectedcities[0].value[22]];
}

The problem is that it looks rather verbose, so I wonder if I can run a for loop there that iterates through those numbers. The thing is that the numbers aren't sequenced. I mean the series runs as {1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22}.

In the end what I'm searching for is something that looks like this:

methods:{
 updateChart(){
  var n = {1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22}
    for(i in n){
          this.chart1.series[i].data = [this.$store.state.selectedcities[0].value[i]];
            }
          }
        }

I'm not really sure how to do it as I'm quite new to javascript.

EDIT:

Is it possible to add a nested foreach with this method? For example:

var k = [1,3,6]
var n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22]
    n.forEach(i=>{
          this.chart[k].series[i].data = [this.$store.state.selectedcities[k].value[i]];
            })

Note that k was added to the formula and that n is child of k. So for each k it should run the series of n.

• javascript
• vue.js
• for-loop
• vuejs2
• vue-ponent

• @BoussadjraBrahim you're totally right. Fixed. – FilipeTeixeira Commented Sep 11, 2019 at 15:29
• it's a difference of 20 seconds i had also +1ed @Félix answer – Boussadjra Brahim Commented Sep 11, 2019 at 15:31

2 Answers 2

n should be an array and loop through it using forEach method like :

 var n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22]
    n.forEach(i=>{
          this.chart1.series[i].data = [this.$store.state.selectedcities[0].value[i]];
            })

ُEDIT

var m = [1,3,6]
 m.forEach(k=>{
     n.forEach(i=>{
          this.chart[k].series[i].data = 
        [this.$store.state.selectedcities[k].value[i]];
            })

})

You could use foreach.

updateChart() {
    var n = [1,2,3,5,7,8,9,11,12,13,14,16,17,18,20,21,22];

    n.forEach(number => {
        this.chart1.series[number].data = [this.$store.state.selectedcities[0].value[number]];
    });
}