[Vuejs]-Vue-star-rating TypeError: Cannot read property 'length' of undefined at listToStyles.js:26

0👍

Your myData is undefined.
You can write a more safe code as following

getRating(){
                    var pathArray = location.pathname.split('/');
                    var pid = pathArray[2];
                    fetch(`/api/rating/${pid}`)
                    .then(res => res.json())
                    .then(res => {
                        var mydata = res.data || []; // sets myData to empty array if res.data is undefined
                        this.totaluser = mydata.length;

                        var sum = 0;
                        for(var i=0; i < mydata.length; i++){
                            sum += parseFloat(mydata[i]['rating']);
                        } 
                        var avg = sum/mydata.length; // this will produce error if mydata.length is zero
                        this.totalrate = parseFloat(avg.toFixed(1));
                        var bar1 = 0;
                        var bar2 = 0;
                        var bar3 = 0;
                        var bar4 = 0;
                        var bar5 = 0;
                        for(var j = 0; j < mydata.length; j++){
                            if(parseInt(mydata[j]['rating']) == '1'){
                                bar1 += 1;
                            }
                            if(parseInt(mydata[j]['rating']) == '2'){
                                bar2 += 1;
                            }
                            if(parseInt(mydata[j]['rating']) == '3'){
                                bar3 += 1;
                            }
                            if(parseInt(mydata[j]['rating']) == '4'){
                                bar4 += 1;
                            }
                            if(parseInt(mydata[j]['rating']) == '5'){
                                bar5 += 1;
                            }
                        }
                        $('.bar-1').css('width', bar1+'%');
                        $('.bar-2').css('width', bar2+'%');
                        $('.bar-3').css('width', bar3+'%');
                        $('.bar-4').css('width', bar4+'%');
                        $('.bar-5').css('width', bar5+'%');
                    })
                    .catch(err => {
                        console.log(err)

                    });
                },
👤s4k1b

3👍

all the ‘length’ things you do is on res.data you are getting and that one is undefined as it seems. try to make a console log and be sure that your api gives you what you want to make res.data.length

Leave a comment