How to get the src attribute from a JSON object?

Question

This is one object of my JSON :

        {
          "box": [
            {
              "htm": "<div style=\"float:left;margin:0 0 10px\"><img alt=\"BICYCLE GARAGE\" src=\"//cdn.membershipworks.com/u/5ceef04cf033bfad7c9d9c82_lgl.jpg?1565140260\" class=\"SFbizlgo\" onerror=\"SF.del(this)\"></div><div style=\"float:left\"><h1 style=\"display:block;margin:0;padding:0;\">BICYCLE GARAGE</h1><p style=\"margin:15px 0 0;\">&quot;For bicycling around the block or around the world&quot; Bloomington, Indiana</p></div><div style=\"clear:both;\"></div>"
            }
          ],
          "lbl": "About"
        }
      ],

To get the box object I did const logoHtml = tpl[0].box[0].htm and in my console I'm getting <div style="float:left;margin:0 0 10px"><img alt="ALAMEDA BICYCLE" src="//cdn.membershipworks.com/u/5ceef04bf033bfad7c9d9c0a_lgl.jpg?1566946141" class="SFbizlgo" onerror="SF.del(this)"></div><div style="float:left"><h1 style="display:block;margin:0;padding:0;">ALAMEDA BICYCLE</h1><p style="margin:15px 0 0;"></p></div><div style="clear:both;"></div>

Which is good! To get the src attribute I've been doing const newLogo = document.getElementsByTagName('img').src

Now, how do I combine those two constants to get the src attribute from the img tag?

^ to parse a page snippet use `document.createElement("div")` instead of `document.createElement("html")`. — 3limin4t0r, Feb 04 '20 at 17:35

score 0 · Answer 1 · answered Feb 04 '20 at 17:48

I have written a sample using your description. Hopefully it helps.

var htmlObj = {
          "box": [
            {
              "htm": "<div style=\"float:left;margin:0 0 10px\"><img alt=\"BICYCLE GARAGE\" src=\"//cdn.membershipworks.com/u/5ceef04cf033bfad7c9d9c82_lgl.jpg?1565140260\" class=\"SFbizlgo\" onerror=\"SF.del(this)\"></div><div style=\"float:left\"><h1 style=\"display:block;margin:0;padding:0;\">BICYCLE GARAGE</h1><p style=\"margin:15px 0 0;\">&quot;For bicycling around the block or around the world&quot; Bloomington, Indiana</p></div><div style=\"clear:both;\"></div>"
            }
          ],
          "lbl": "About"
        };

//Parse the string into a dom elements
var elem = new DOMParser().parseFromString(htmlObj.box[0].htm, 'text/html');
//The image
var img = elem.getElementsByTagName('img');
// Get the src.
document.getElementById('mysource').innerHTML = img[0].src;

<div id="mysource"></div>

How to get the src attribute from a JSON object?

1 Answers1