Trying to make a for on a Vue-js object

Asked

Viewed 172 times

1

I’m trying to loop (for) an array object in Vue-Js, (javascript) whose size is 11 (lenght=11) as below. But when I do:

console.log(this.grouped) // Here it shows the object with length=11

  for (var i=0;i<10; i++){
     console.log(i+" Nome:"+this.agrupados.product_name )
  }

loop does not work. It is as if lenght is null and not 11.

On inspection of Chrome presents this: inserir a descrição da imagem aqui

The code I have is:

created() { 
    this.getProducts() // Atualiza valores a receber 
    console.log(this.agrupados) 
    for (var i=0;i<10; i++){ 
        console.log(i+" Nome:"+this.agrupados.product_name ) 
    } 
},
javascript vue.js

  • Can you show the code that this is inserted into? That is, it shows more code around your problem.

  • Flavius, he actually finds the data and so he does it. The problem is that since it is an array you need to pass the position of the array that contains the attribute. Pass on the console.log(this.agrupados[i]. product_name should solve your problem.

  • 3

    Tried to this.agrupados[i].product_name ?

  • created() { this.getProducts() // Updates values to receive console.log(this.grouped) for (var i=0;i<10; i++){ console.log(i+" Name:"+this.grouped.product_name ) } },

  • Flavio, what does the this.getProducts() and what gives console.log(JSON.stringify(this.agrupados))?

  • Search the recorded data in the firestore. console.log and group the data, totaling, as shown in the figure above, in the Chrome inspection

  • use the code @Noobsaibot, I think it will work

  • Flavio, so we can help you quickly, without having to guess, which console.log(JSON.stringify(this.agrupados))?

  • gives the following: [ ]

  • a pair of clasps

  • Console.log (this.grouped) yields the data below:

  • Grouped:[] List.See? 16cf:120 0 Name:Undefined List.See? 16cf:120 1 Name:Undefined List.See? 16cf:120 2 Name:Undefined List.See? 16cf:120 3 Name:Undefined List.See? 16cf:120 4 Name:Undefined List.See? 16cf:120 5 Name:Undefined List.See? 16cf:120 6 Name:Undefined List.See? 16cf:120 7 Name:Undefined List.See? 16cf:120 8 Name:Undefined List.See? 16cf:120 9 Name:Undefined

  • The Result above when I do the code below:

  • console.log("Grouped:"+JSON.stringify(this.grouped)) for (var i=0;i<10; i++){ console.log(i+" Name:"+this.grouped[i].product_name ) }

  • The strange thing is that when I rewrite the html, it works. It shows the data right. Now when I try to loop the script, it gives: Undefined

  • @Flaviocardoso gives himself [] That’s very important for the problem. You have an asynchronous logic there and you’ll need to use computed probably. What makes the this.getProducts()?

  • Take the data in the firestore and group, totalized and generating the grouped array

  • I did the calculation on computed and gave the same message

  • I suggest you put in the whole component so we can understand the logic that you have

  • Unfortunately I haven’t gotten the solution to my problem yet. I appreciate if anyone can help me

  • Solved with the suggestion of @Noobsaibot. Grateful. Really needed to put the index.: this.agrupados[i]. product_name. Thank you very much

Show 16 more comments

2 answers

0

To loop a Javascript array there are basically three ways:

1. Javascript classic (using the for with a counter):

const arrayExemplo = ['A', 'B', 'D'];

for (let i = 0; i < arrayExemplo.length; i++) {
    console.log(`${i} ${arrayExemplo[i]}`);
}

2. Javascritp modern-day (uses the structure for...):

const arrayExemplo = ['A', 'B', 'D'];

for (const value of arrayExemplo) {
    console.log(`${value}`)
}

3. Using the method foreach (that is part of the object Array).

const arrayExemplo = ['A', 'B', 'D'];

arrayExemplo.forEach(function(item, index) {
    console.log(`${index} ${item}`);
})

-2

const user = {}; user.name = "Eduardo"; user.idade = 21;

for(let item in user){

 // item =>  Nome da propriedade
 // user[item] => Valor da propriedade

 console.log( item + ' => ' + user[item] )

}

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.