Why is it that my array is defined but the elements inside it are not?

[sophief10]

Hi everyone!

I created this code in jsPsych:

var finalTimeline = []; 

       
        var holdingCell = [];
       

        //LIKING RATING TASK - SET 1
       
        var likingScale = [
            "1 (Strongly Dislike)",
            "2",
            "3",
            "4",
            "5",
            "6 (Strongly Like)"
        ]; //create rating scale for the liking rating task

        var likingRatingTask_1 = {
            timeline: [
                {
                    type: 'image-button-response-with-name',
                    stimulus: jsPsych.timelineVariable('food'),
                    choices: likingScale,
                    prompt: "I would like to eat this food right now, in its presented quantity.",
                    render_on_canvas: true,
                    name: jsPsych.timelineVariable('name'),
                    save_trial_parameters: {
                        name: true
                    }
                }
            ],
            timeline_variables: [
            {food: "Images/small_salad.jpeg", name: 'salad'},
            {food: "Images/small_pear.jpeg", name:'pear'},
            {food: "Images/small_lollipop.jpeg", name:'lollipop'},
            {food: "Images/small_grapes.jpeg", name:'grapes'},
            {food: "Images/small_cotton_candy.jpeg", name:'cotton candy'},
            {food: "Images/small_cookie.jpeg", name:'cookie'},
            {food: "Images/small_carrot.jpeg", name:'carrot'},
            {food: "Images/small_cake.jpeg", name:'cake'},
            {food: "Images/small_brownie.jpeg", name:'brownie'},
            {food: "Images/small_apple.jpeg", name:'apple'},
            {food: "Images/large_salad.jpeg", name:'salad'},
            {food: "Images/large_pear.jpeg", name:'pear'},
            {food: "Images/large_lollipop.jpeg", name:'lollipop'},
            {food: "Images/large_grapes.jpeg", name:'grapes'},
            {food: "Images/large_cotton_candy.jpeg", name:'cotton candy'},
            {food: "Images/large_cookie.jpeg", name:'cookie'},
            {food: "Images/large_carrot.jpeg", name:'carrot'},
            {food: "Images/large_cake.jpeg", name:'cake'},
            {food: "Images/large_brownie.jpeg", name:'brownie'},
            {food: "Images/large_apple.jpeg", name:'apple'}
            ], 
            randomize_order: true,
            on_timeline_finish: function() {
                var imageNames = ['salad', 'pear', 'lollipop', 'grapes', 'cotton candy', 'cookie', 'carrot', 'cake', 'brownie', 'apple']; //list the category names
                for (let i = 0; i < imageNames.length; i++) {
                    var responseData = jsPsych.data.getLastTimelineData().filter({name: imageNames[i]}).select('response').sum(); //for each image category, sum the responses
                    var pictureData = jsPsych.data.getLastTimelineData().filter({name: imageNames[i]}).select('stimulus').values; //for each image category, retrieve the image paths
                    holdingCell.push({
                        rating: responseData,
                        picture1: pictureData[0],
                        picture2: pictureData[1]
                    }); 
                }
            }
        };
        finalTimeline.push(likingRatingTask_1);
        console.log(holdingCell);
        console.log(holdingCell[0]);

The problem is that the 'holdingCell' array elements seem to be undefined even though the array itself is defined. That is, the function 'console.log(holdingCell)' returns an array of 10 objects, as it should. However, the function 'console.log(holdingCell[0])' returns 'undefined.' It is as though the array only exists as a whole, where it is impossible to access any individual element in the array.

Has anyone encountered this problem before? If so, would you please detail how you solved it?

[becky-gilbert]

It looks like you're adding elements to the holdingCell array inside the on_timeline_finish function, which means this array won't have any elements until the likingRatingTask_1 timeline ends. However your console.log lines are in your main script, which runs when the page first loads, at which point the holdingCell array doesn't contain anything.

So try moving your console.log lines into the end of the on_timeline_finish function, so that you can check the value of the array after the elements have been added:

on_timeline_finish: function() {
  var imageNames = ['salad', 'pear', 'lollipop', 'grapes', 'cotton candy', 'cookie', 'carrot', 'cake', 'brownie', 'apple']; //list the category names
  for (let i = 0; i < imageNames.length; i++) {
    // ...
    // add elements to holdingCell
    holdingCell.push({
      // ...
    }); 
  } 
  // check contents of holdingCell
  console.log(holdingCell);
  console.log(holdingCell[0]);
}

Does that give you the values you expected?

[sophief10]

Yes, it does. Thank you, @becky-gilbert !