Dynatrace API integration with AppEngine

[allie_diaz]

I am building an app using AppEngine.  I want to gather various metrics within Dynatrace and display the results, filtering by a teams tag for an end of year monitoring audit review.  The data we need is not available in Grail (yet).  I have several Dyantrace API's we run in Google Sheets to gather this data, but it is a tedious task to separate it out by teams.  My question is, I am having trouble leveraging the Dyantrace API using typescript in AppEngine.   Has any had success leveraging the Dynatrace API Env 2 within an AppEngine project?

Attached is the code I have at the moment.  It isn't throwing any errors in Visual Studio Code editor, but when I run it, I get an error on the screen: 

JS Error | data2.forEach is not a function

TypeError: data2.forEach is not a function

[natanael_mendes]

You have to parse the data with JSON.parse() before using forEach():

[allie_diaz]

I don't actually have forEach() anywhere in my code. I am not sure where this error message is coming from.  Maybe I should be using a forEach() somewhere.  Have you leveraged the Dynatrace APIs in AppEngine.  If so, I would love to see your code snippet.  

[natanael_mendes · Accepted solution]

The error message "TypeError: data.forEach is not a function" typically occurs when you try to use the forEach method on a variable that is not an array. In your code, it seems that you are trying to use forEach on the data variable within the ApiDataDisplay component, but data is being assigned the value of the apiTable variable, which is the Axios library itself rather than an array.

To fix this issue, you should modify your code to correctly fetch the API data and then use the fetched data to render the table. Here's how you can do that:

const ApiDataDisplay = () => {
const [apiData, setApiData] = useState([]);

useEffect(() => {
async function fetchData() {
try {
const response = await apiTable.request(getApi);
const { data } = response;
setApiData(data.entities); // Assuming 'entities' is the array you want to display
} catch (error) {
console.error(error);
}
}

fetchData();
}, []);

const columns = useMemo<TableColumn[]>(() => ApiTableColumns, []);

return <DataTable columns={columns} data={apiData} />;
};

[allie_diaz]

This is exactly what I was looking for.  The App is now loading. I am getting "no data available", but it is loading.  That was a huge hurdle.  Thank you.  Now I have to figure out why no data is being returned.