Fetch API display undefined js

Question

I try to fetch from https://js.cexplorer.io/api-static/asset/list.json.

here my js code:

<script>
let test;
fetch("https://js.cexplorer.io/api-static/asset/list.json")
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
    test = res.data.policy;
  })
document.getElementById("test").innerHTML = test;
console.log(test); 
</script>

In homepage there is a div:

<div id="test"></div>

In Google Console I have correct response from the APIm but in the homepage I see undefined instead the value of API. I don't have a lot of experience with js and API. I don't understand where is the error.

Answer 1

You should make sure that there is actually a property with res.data.policy To make sure make a console for each property

console.log(res);
console.log(res.data);
console.log(res.data.policy);

You will understand which state causes undefined