Not getting report.getPages in Embedded Power BI report

Question

While trying to get the Visuals from a Embedded Power BI report in .Net MVC Application, I tried the below mentioned code from Embedded Power BI Playground site. But I am not able to get the Visuals. On debugging, I could see values for getPages property of Report as:

getPages: ƒ ()arguments: null caller: null length: 0 name: ""

Also the console.log(report.getPages()); gives

[[PromiseStatus]]: "pending" [[PromiseValue]]: undefined

PF the code which I tried:

// Get a reference to the embedded report HTML element
var embedContainer = $('#embedContainer')[0];

// Get a reference to the embedded report.
report = powerbi.get(embedContainer);

// Retrieve the page collection and get the visuals for the first page.
report.getPages()
    .then(function (pages) {
        // Retrieve active page.
        var activePage = pages.filter(function (page) {
            return page.isActive
        })[0];

        activePage.getVisuals()
            .then(function (visuals) {
                Log.log(
                    visuals.map(function (visual) {
                        return {
                            name: visual.name,
                            type: visual.type,
                            title: visual.title,
                            layout: visual.layout
                        };
                    }));
            })
            .catch(function (errors) {
                Log.log(errors);
            });
    })
    .catch(function (errors) {
        Log.log(errors);
    });

Answer 1

You have a timing issue. Use the PowerBI event handler and don't apply changes to the report unless you know is fully loaded, rendered and available. To do this you can make sure of the Rendered event.

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events

Here is an example getting a page, getting a visual from the page, and exporting the data from the visual.

var report = powerbi.embed(reportContainer, config);

report.on("rendered", function (event) {
  // do stuff here like get pages, export data, apply filters or whatever it is you want to do to manipulate the report

  report.getPages().then((pages) => {
    pages[0].getVisuals().then((visuals) => (d = visuals));
  });

  var v = d[1].exportData(models.ExportDataType.Summarized, 100);
});