Unable to assign element of a 1D array obtained from tensor.data() as value of an object

[what i want to do]

I created a rank-3 tensor.

Then I got a flattened 1D array of all the values in this tensor by using tensor.data() method.

I want to assign each element of this flattened array as value of an object.


[what is the problem]

I’m unable to obtain the individual elements of the array using a.data().then((data) => { card.value = data[i] }); .

console.log(card.value) returns undefined.

However, using card.value = a.dataSync()[i]; seems to work, instead.


[main.js]

import * as tf from "@tensorflow/tfjs";

import Card from "./Card.js";

// create a rank-3 tensor 
const a = tf.randomNormal([4, 3, 2]);
a.print();

// assign values in the tensor to a series of div object 
for (let i = 0; i < a.size; i += 1) {
        // create card object
        const card = new Card(i, "card " + String(i), "96px", "96px");

        // assign a value to card
        // [method 1] using synchronous method works 
        // card.value = a.dataSync()[i];

        // [method 2] using asynchronous method is not working ... 
        a.data().then((data) => { card.value = data[i] });

        console.log(card.value);

[Card.js]

export default class Card {
    // constructor
    constructor(_idx, _name, _width, _height, _posx, _posy, _posz, _value) {
        this.idx = _idx;
        this.name = _name;

        this.width = _width;
        this.height = _height;

        this.posx = _posx;
        this.posy = _posy;
        this.posz = _posz;

        this.value = _value;
    }
}

Could anybody kindly help to take a look of the issue shown above and advise what is missing? Thanks.