CODEWITHSUNDEEP
javascriptjqueryjson
Markus Hayner
Markus Hayner

Reputation: 2959

Append link to href from JSON

Can anyone explain to me how can I append the link from JSON file to a href? I could grab the images but I have no idea how to get the links.

This is my code that I am using

<body style="background: #e5e5e5">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <a href="">
                        <div class="cover" id="img"></div>
                    </a>
                </div>
            </div>
        </div>
        <script>
        var data = {
            "info": [{
                "cover": "highlighted/1.gif",
                "link":"http://google.com"
            },
            {
                "cover": "highlighted/1.gif",
                "link":"http://google.com"
            }]
        };
        data.info.forEach( function(obj) {
            var img = new Image();
            img.src = obj.cover;
            document.getElementById("img").appendChild(img);
        });
        </script>
    </body>

Upvotes: 0

Views: 2052

Answers (4)

Jehan Bruggeman
Jehan Bruggeman

Reputation: 353

Note: <a> is an inline element, you should put it in the div.

Here is a working code:

<body style="background: #e5e5e5">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="cover" id="img">
                </div>
            </div>
        </div>
    </div>
    <script>
    var data = {
        "info": [{
            "cover": "highlighted/1.gif",
        "link":"http://google.com/1"
        },
        {
            "cover": "highlighted/2.gif",
        "link":"http://google.com/2"
        }]
    };
    var imagesBlock = document.getElementById("img");
    data.info.forEach( function(obj) {
        var img = new Image();
        img.src = obj.cover;
        var a = document.createElement('a');
        a.setAttribute('href', obj.link);
        a.appendChild(img);
        imagesBlock.appendChild(a);

    });
    </script>
</body>

Here is another version, where we clone a DOM tree instead,, following discussion (see below):

<body style="background: #e5e5e5">
    <div class="container">
        <div class="row" id="repeatingImages">
            <div class="col-sm-4">
                <div class="cover">
                    <a><img /></a>
                </div>
            </div>
        </div>
    </div>
    <script>
    var data = {
        "info": [{
            "cover": "highlighted/1.gif",
        "link":"http://google.com/1"
        },
        {
            "cover": "highlighted/2.gif",
        "link":"http://google.com/2"
        }]
    };

    var repeatingImages = document.getElementById("repeatingImages");

    // get the template block, clone and remove the source
    var blockTemplate = repeatingImages.getElementsByTagName("div")[0].cloneNode(true);
    repeatingImages.getElementsByTagName("div")[0].remove();

    data.info.forEach( function(obj) {
        block = blockTemplate.cloneNode(true);
        block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
        block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
        repeatingImages.appendChild(block);

    });
    </script>
</body>

Upvotes: 2

lshettyl
lshettyl

Reputation: 8181

I guess you are after this?

All you need to do is:

  • Create a link element and assign href to it
  • Create an img element and assign src to it
  • Append img element to the link element
  • Append link to the target div

var data = {
    "info": [{
        "cover": "highlighted/1.gif",
        "link":"http://google.co.uk"
    },{
        "cover": "highlighted/2.gif",
        "link":"http://google.com"
    }]
};
data.info.forEach(function(obj) {
    
    var link = document.createElement("a");
    link.href = obj.link;
    
    var img = document.createElement("img");
    img.src = obj.cover;
    
    link.appendChild(img);
    document.getElementById("img").appendChild(link);
});
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="cover" id="img"></div>
        </div>
    </div>
</div>

Note: Manipulating DOM within a loop is not a good practice when the manupulation is massive. In this case, you could make use of DOM DocumentFragments like below.

var fragment = document.createDocumentFragment();

data.info.forEach(function(obj) {    
    var link = document.createElement("a");
    link.href = obj.link;
    var img = document.createElement("img");
    img.src = obj.cover;
    link.appendChild(img);
    fragment.appendChild(link);
});
//Append outside the loop all at once.
document.getElementById("img").appendChild(fragment);

Upvotes: 2

user4813899
user4813899

Reputation:

Use .each()

$.each(data.info, function(i, val) {
      var src = val.cover;
      var link = val.link;
      $('a').attr('href', link)
});

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Use the attr() function to assign the href attribute:

 $('#anchor').attr('href', obj.link);

If you want to append a new element (#holder is the element in which the new element will get appended):

$('#holder').append('<a href="' + obj.link + '">LinkText</a>');

Upvotes: 0

Related Questions