Getting metadata elements back to the frontend of my dapp

How about getting metadata elements back to the frontend of my dapp? Just posted this on the Ethereum SE, but what do you guys think?

Working on a collectible card game based on ERC721 with the metadata extension. When a person “collects” a warrior, it is successfully “minted” to the owner and the tokenURI is successfully set to the path of the json file with the metadata (name, description, image path) in it.

My question is how do I now get that metadata (especially the image) so I can show it on my website? I have a page that displays the warriors the person has collected. On that page I’m successfully getting the info for the warrior structs and painting to the page. Here’s that code I have in my app.js file:

function getWarriorsByOwner(owner) {
return new Promise(function (resolve, reject) {
App.contracts.WarriorFactory.deployed().then(function(instance){
  instance.getWarriorsByOwner.call(owner)
    .then(function(warriors){
      resolve(warriors);
    });
});
});
}

function displayWarriors(ids) {
$("#warriors").empty();
for (id of ids) {
// Look up warrior details from our contract. Returns a `warrior` object
getWarriorDetails(id.toNumber())
.then(function(warrior) {

// Using ES6's "template literals" to inject variables into the HTML.
// Append each one to our #warriors div
$("#warriors").append(`<div class="col-md-4">
<div class="card mb-4 shadow-sm">
  <img class="card-img-top" src="" alt="Card image cap">
  <div class="card-body">
  <h5 class="card-title card-name">${warrior[0].toString()}</h5>
  <strong>Attack</strong>: ${warrior[1].toString()}<br/>
  <strong>Defend</strong>: ${warrior[2].toString()}<br/>
  <strong>Strategy</strong>: ${warrior[3].toString()}
  <strong>Cards Issued</strong>: ${warrior[4].toString()}
  <strong>Total Cards</strong>: ${warrior[5].toString()}
  </div>
  </div>
</div>`);
});
}
}

So, if a person owns warrior 0 in the warriors array, I get all the attributes for that warrior. If I call tokenURI(0) I also see the correct path to the json file with the rest of the info in it that I don’t keep on chain.

What would I need to add to also read the correct json file and set the image source here in the above:

<img class="card-img-top" src="" alt="Card image cap">

I’m very new to this which means I know just enough to be tempted to do very stupid things, the above may be an awesome example of just that.

Any advice? Thanks, Kevin

Hey Kevin! Sorry for the late reply! Still need help with this?

Would love some help if you’ve got time to take a look.
Kevin

Sure thing! Can you show me one instance of your metadata json please?

Hello Kevin! Do you still need help with this task?