CODEWITHSUNDEEP
javascriptjson
Adam Nieuwenhuizen
Adam Nieuwenhuizen

Reputation: 11

How use img source from the values in the json response?

I am trying to pass a url value in JSON as an image tag in my HTML using javascript.

Following is the json response, i get:

{
    "remaining": 50,
    "cards": [{
        "suit": "SPADES",
        "value": "2",
        "code": "2S",
        "images": {
            "svg": "https://deckofcardsapi.com/static/img/2S.svg",
            "png": "https://deckofcardsapi.com/static/img/2S.png"
        },
        "image": "https://deckofcardsapi.com/static/img/2S.png"
    },
    {
        "suit": "CLUBS",
        "value": "QUEEN",
        "code": "QC",
        "images": {
            "svg": "https://deckofcardsapi.com/static/img/QC.svg",
            "png": "https://deckofcardsapi.com/static/img/QC.png"
        },
        "image": "https://deckofcardsapi.com/static/img/QC.png"
    }],
    "success": true,
    "deck_id": "ag5x22svcp8g"
}

I can access and parse all other json data except 'images' as an actual image.

Here is my JavaScript:

document.getElementById("card1").innerHTML = parse.cards[0].suit + ", " + 
parse.cards[0].value
document.getElementById("card2").innerHTML = parse.cards[1].suit + ", " + 
parse.cards[1].value


document.getElementById("card1image").src= cards[1].images.png;

Here is the HTML tag i wish to put it into.

    <img id="card1image"/> //<---- this one
    <div id="card1"></div>

    <img id="card2image">
    <div id="card2"></div>

It does not throw an error, it just simply does not display the image. I'm pretty sure I've done the getElemntByID call wrong. any information would be helpful.

It is worth noting that the url inside the JSON object is different on reload as it pulls a random card from a deck. Tried storing the response URL in a variable and still could not get it working.

Upvotes: 0

Views: 400

Answers (2)

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Here's the working code. You just write your line like this

parse.cards[1].images.png

You just missed the word parse in your code.

var parse = {
  "remaining": 50,
  "cards": [{
      "suit": "SPADES",
      "value": "2",
      "code": "2S",
      "images": {
        "svg": "https://deckofcardsapi.com/static/img/2S.svg",
        "png": "https://deckofcardsapi.com/static/img/2S.png"
      },
      "image": "https://deckofcardsapi.com/static/img/2S.png"
    },
    {
      "suit": "CLUBS",
      "value": "QUEEN",
      "code": "QC",
      "images": {
        "svg": "https://deckofcardsapi.com/static/img/QC.svg",
        "png": "https://deckofcardsapi.com/static/img/QC.png"
      },
      "image": "https://deckofcardsapi.com/static/img/QC.png"
    }
  ],
  "success": true,
  "deck_id": "ag5x22svcp8g"
}

document.getElementById("card1").innerHTML = parse.cards[0].suit + ", " +
  parse.cards[0].value
document.getElementById("card2").innerHTML = parse.cards[1].suit + ", " +
  parse.cards[1].value


document.getElementById("card1image").src = parse.cards[1].images.png;
<img id="card1image" />
<div id="card1"></div>

<img id="card2image">
<div id="card2"></div>

Upvotes: 1

Dong Nguyen
Dong Nguyen

Reputation: 1269

Did you mean parse.cards[1].images.png? You are missing parse

Upvotes: 1

Related Questions