Can't access anim endpoints from loadAnimation

I want to change text of some of the layers in my project using the function updateDocumentData. In order to do so I want to track down the endpoints to my text objects in the json.

My plan here was to use console.log to print out the layers one by one but layers[0] returns Cannot read property of null. So after a long time of testing and head scratching I realized something is weird. I print the anim.renderer then anim.renderer.layers and then anim.renderer again.

When using layers as endpoint it returns null, but in the developer console in Chrome the other two calls returns layers with 5 elements. ( See screenshot below ). I have tried using JQUERY and waiting for document.ready and tried to access the end layer right away but it is the same problem. I also tried using let instead of var.

Thanks.

var animData = {
            container: document.getElementById('lottie'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'test1.json'
          };

          var anim = lottie.loadAnimation(animData);

          console.log(anim.renderer);
          console.log(anim.renderer.layers);
          console.log(anim.renderer);

EDIT - This is the current latest build ( 5.1.14 )

[kayson]

Yes works after that, thanks!

Here is the edited code if anyone will catch the same problem:

var animData = {
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: false,
    path: 'test1.json'
};

var anim = lottie.loadAnimation(animData);

anim.addEventListener("DOMLoaded", function() {
    console.log(anim.renderer);
    console.log(anim.renderer.layers);
    console.log(anim.renderer);
    anim.renderer.elements[0].updateDocumentData({
        t: '111'
    });
    anim.play();
});

[NandiniNayak]

@kayson and @bodymovin thanks for sharing the solution. When I try the code snippet shared by @kayson , it resolves the undefined error, instead I get ’ Uncaught TypeError: anim.renderer.elements[0].updateDocumentData is not a function’. is updateDocumentData depricated?? …please find my code snippet, also i have console logged to ensure I am targeting the right index.

  anim.addEventListener("DOMLoaded", function () {
      console.log("BFEORE:", anim.renderer.elements[0].currentTextDocumentData.t);
      anim.renderer.elements[0].updateDocumentData({
         t: 'w'
      });
      anim.play();
      console.log("AFTER:", anim.renderer.elements[0]);
 });