Thanks for your reply @cryptokid!
Here my main.js:
Moralis.initialize (āRFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43ā);
Moralis.serverURL = āhttps://9hafjo6ivsjx.usemoralis.com:2053/serverā;
function fetchNFTMetadata(NFTs){
let promises = [];
for (let i = 0; i < NFTs.length; i++) {
let nft = NFTs[i];
let id = nft.token_id;
//Call Moralis Cloud function -> Static JSON file
promises.push(fetch("https://9hafjo6ivsjx.usemoralis.com:2053/server/functions/getNFT?_ApplicationId=RFT8asCRdZDwwvoweVO735eB28ICP5qDi4sO5W43&nftId=" + id)
.then(res => res.json())
.then(res => JSON.parse(res.result))
.then(res => {nft.metadata = res})
.then( () => {return nft;}))
}
return Promise.all(promises);
}
function renderInventory(NFTs){
const parent = document.getElementById("app");
for (let i = 0; i < NFTs.length; i++) {
const nft = NFTs[i];
let htmlString = `
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="${nft.metadata.image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">${nft.metadata.name}</h5>
<p class="card-text">${nft.metadata.decription}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
`
let col = document.createElement("div");
col.className = "col col-md-3"
col.innerHTML = htmlString;
parent.appendChild(col);
}
}
async function initializeApp(){
let currentUser = Moralis.User.current();
if(!currentUser){
currentUser = await Moralis.Web3.authenticate();
}
const options = { address:"0x323e4aec236d77615ce1ab8f35d12437b81733ca", chain:"rinkeby"};
let NFTs = await Moralis.Web3API.token.getAllTokenIds(options);
let NFTWithMetadata = await fetchNFTMetadata(NFTs.result);
renderInventory(NFTWithMetadata);
}
initializeApp();