Appending to each element with a specific class

Question

I have a jQuery script shown bellow. It is suppose to get AWS ML prediction and compare the score and depending upon the score append to a cell in a table the correct prediction. All these cells have the same class prediction. When the button is clicked and this script is triggered, it does everything correctly but when it gets to the appending part it throwing an error saying Cannot read property 'append' of undefined.

When i run the same script inside chrome console it appends correctly to the correct places. I am not really sure why this is happening.

    $(document).ready(function(){
        var highPred="";
        $("#predict").click(function(){
        var predictionTables = $(".prediction");
            for (var i = 0; i < 4; i++) {
                var predictedScoresAWS=[];
                var params = {
                  Record: myData[i]
                };
                machinelearning.predict(params, function(err, data) {
                  if (err){
                    console.log(err, err.stack); // an error occurred
                  } else{
                    console.log(data);           // successful response
                    // data = $.parseJSON(data);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Reduce purge history day count']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Increase the java heap space']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Successful run']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Other error']);
                    console.log(predictedScoresAWS)
                    var highPredIndex = predictedScoresAWS.indexOf(Math.max(...predictedScoresAWS))
                    switch(highPredIndex){
                        case 0:
                            highPred='Reduce purge history day count';
                            break;
                        case 1:
                            highPred='Increase the java heap space';
                            break;
                        case 2:
                            highPred='Successful run';
                            break;
                        case 3:
                            highPred='Other error';
                    }
                    console.log(highPred);
                    console.log(predictionTables);
                    console.log(predictionTables[i])
                    while (predictedScoresAWS.length) { predictedScoresAWS.pop(); }
                    predictionTables[i.].append(highPred);
                    }
                });
            }
        });
    });

Barmar · Accepted Answer · 2018-06-29T15:14:21.757

0

When you use a subscript with a jQuery collection it returns the DOM object, not a jQuery object. You should use .eq() to get the jQuery object, and then you can call the jQuery append() method.

predictionTables[i].append(highPred);

should be:

predictionTables.eq(i).append(highPred);

Another problem is that you're trying to use the iteration variable i in an asynchronous callback. See JavaScript closure inside loops – simple practical example and Javascript infamous Loop issue? for the problem with this and many solutions. If you can use ES6, just change var i = 0 to let i = 0.

edited Jun 29 '18 at 15:14

answered Jun 29 '18 at 02:40

Barmar

741,623
53
500
612

I did try to use that but when i do I don't get any errors but i don't see the string being appended to the table cell. @Barmar – Sreekuttan Sudarsanan Jun 29 '18 at 02:46
I just noticed that this is an async callback in a `for` loop. So you're running into this problem: https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – Barmar Jun 29 '18 at 15:12
Sorry for the late reply, I did find a way around this. Seems that appending doesn't really work like that for some reason. But i did try the answers from other stackoverflow question and was able to get it working. Thank you! – Sreekuttan Sudarsanan Jul 05 '18 at 15:17

Appending to each element with a specific class

1 Answers1