Web api using fetch

Hope there is someone who can help me out on this.

I am writing a script that is fetching api and displays the content .
The code looks like this:

fetch(‘https://api.magicthegathering.io/v1/cards’)
.then(response => response.json())
.then(cards => {

		// dom
			
	});

I am stuck in the DOM part so is there anyone who could help me out, what I am trying to output to the dom NOT console.log. ?

Just however you want to set stuff in the DOM, the way you do it doesn’t change because it’s fetched data or anything. Like this just dumps whatever cards is as the text content of .some-element:

document.querySelector('.some-element').textContent = JSON.stringify(cards);

If u look at this json u will see there is a “imageUrl” with images, how do I output all of these. ?

You have a ‘cards’ object with an array of characters. Let’s say you just wanted to display some information about the first character, along with an image. You could do this.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch One Magic Character</title>
  </head>
  <body>
    <button id="getMagicCharacter" type="button" name="button">Get Character</button>
    <h1 id="name"></h1>
    <h2 id="type"></h2>

    <script>
      document.getElementById('getMagicCharacter').addEventListener
      ('click', getMagicCharacter);

      function getMagicCharacter(){
        fetch('https://api.magicthegathering.io/v1/cards')
        .then((res) => res.json())
        .then((cards) => {
          document.getElementById('name').innerHTML = cards["cards"][0].name;
          document.getElementById('type').innerHTML = cards["cards"][0].type;
          src = cards["cards"][0].imageUrl;
          img = document.createElement('img');
          img.src = src;
          document.body.appendChild(img);
        });
      }
    </script>
  </body>
</html>

To display all of the images will require a bit of work, but hopefully this will set you on the right track.

Note: the button is just for demonstration purposes.

1 Like

awsome any chance we could squeeze a for loop in there so on load it just fetches all images and shows them all. ?

‘We’ could, but I’ll let you make it happen :wink:
Definitely doable.

could u have a look at this code and tell me what I have done wrong here since it does not output. ?



fetch('https://api.magicthegathering.io/v1/cards')
    .then(response => response.json())
    .then(result => {
        let output = ""
        for (let i = 0; i < 99; i++) {
             output.innerHTML += `
                      <div>
                          <img src=${result.cards[i].imageUrl} >
                      </div>
          `;
     document.querySelector('#output').innerHTML = output;
    }
    });

You’ve said output is a string. Strings don’t have an innerHTML property, that’s a browser thing for DOM objects. I think you meant to just build a big string then use innerHTML (which you do do, it’s just that the code will have errored out by that point)

tl/dr:

output.innerHTML +=

should be

output +=
1 Like

awsome thanks you have saved my day.

1 Like