Vuejs computed property for loop print all values, but returns only one value

Question

Vuejs computed property 'for loop' print all values, but returns only one value.

computed: {
            orderedUsers: function () {
                //console.log(this.bannerData)
                //console.log(this.subBannerData[0].event_pi[0].id);
                this.secondSubBanner = [];
                for(let i=0; i<this.bannerData.length;i++){
                    this.subBanner = this.bannerData[i].pressInformation;
                    //console.log(this.subBanner.event_pi);
                    for(let j= 0;j<this.subBanner.length;j++){
                        this.secondSubBanner = this.subBanner[j].id;
                        console.log(this.secondSubBanner);// output: 257, 256, 254,261
                    }
                }
                return [this.secondSubBanner];
            },


sortedArray(){
            this.v = this.orderedUsers;
            console.log(this.v);// output:261
        }

Can someone tell me where is my mistake? Thank you.

Why are you returning [this.secondSubBanner] and not just this.secondSubBanner? Also you don't appear to be using this.secondSubBanner as the array you declare it as. I don't see how you can be outputting a list of ids when you're assigning only one id at a time. — Matt Ellen
– Matt Ellen, Commented Dec 23, 2019 at 13:51
change to this.secondSubBanner.push(this.subBanner[j].id); then you'll be appending to the list — depperm
– depperm, Commented Dec 23, 2019 at 13:53
@MattEllen I have used the Array brackets around this.secondSubBanner so that it returns the values as array and I can sortout the Json depending on this array values. Thank you for your spontaneous reply. It has helped me. — Sreenivasulu Gudipati
– Sreenivasulu Gudipati, Commented Dec 23, 2019 at 14:32

Matt Ellen · Accepted Answer · 2019-12-23 14:00:34Z

I'm pretty sure your problem is that you're declaring this.secondSubBanner as an array, but then setting its value to an id. I guess what you really want to do is the following:

for(let i=0; i<this.bannerData.length;i++){
    this.subBanner = this.bannerData[i].pressInformation;
    for(let j= 0;j<this.subBanner.length;j++){
        this.secondSubBanner.push(this.subBanner[j].id);                   
    }
}

And then change the return to be:

return this.secondSubBanner;

Also, if the value of subBanner and secondSubBanner are not used outside of the function then drop the this. and declare them with let, because you're creating unnecessary object state.

For example:

let secondSubBanner = [];

T. Short · Accepted Answer · 2019-12-23 13:54:50Z

1

Your problem is here:

this.secondSubBanner = this.subBanner[j].id;

You are re-assigning the value each time. So it will only return the last value in the loop.

What you should do instead is push the values like so:

this.secondSubBanner.push(this.subBanner[j].id);

answered Dec 23, 2019 at 13:54

T. Short

3,62417 silver badges30 bronze badges

1 Comment

Sreenivasulu Gudipati Over a year ago

I have tried to upVote but I have got this notification. "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score"

Sreenivasulu Gudipati · Accepted Answer · 2019-12-23 14:52:30Z

Now the Console.log(this.v) outputs an empty array at starting [ ] (4) [254, 256, 257, 261]

which results in _orderBy property cannot sort the Json i guess.

 `sortedArray(){
                this.v = this.orderedUsers.sort();
                console.log(this.v);//output: 254,256,257,261
                return _.orderBy(this.bannerData, this.v)// output: 257,256,254,261
            }`

Although the sortedArray() prints the id's in order, I do not get the return value in order when I use _.orderBy property of Vuejs.

Collectives™ on Stack Overflow

Vuejs computed property for loop print all values, but returns only one value

3 Answers 3

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Related