Href Links Dymamically

Question

I have some links in an json file

<code>
"links": [
            {"link": "http://www.google.com/",
             "id": "1"
            },
            {"link": "http://www.poogle.com/",
             "id": "2"
            },
            {"link": "http://www.foogle.com/ ",
             "id": "3"
            },

]
</code>

on a webpage, I will like a js function or script that will write in the url href dynamically

So if im on a page and the href is

 <a href  id=”1”> </a>

it should be able to write in google.com into that ahref.

Also is this the best approach to take, should I use Id? Or something else?

Your insight will be helpful

UPDATED

JSON FILE:

{"links": 

[
            {"link": "google.com",
             "id": "1"
            },
            {"link": "yahoo.com",
             "id": "2"
            },
            {"link": "msn.com",
             "id": "3"
            },
            {"link": "mash.com",
             "id": "4"
            },
            {"link": "facebook.com",
             "id": "5"
            }
        ]

}

JS

for (var i = 0; i < linksObj.links.length; i++) {
    var linkObj = linksObj.links[i];
    var elem = document.getElementById(linkObj.id);

    if (elem) {
       elem.href = linkObj.link;
       elem.innerHTML = linkObj.link;
    }
}

HTML

<a id='1'></a><br>
<a id='2'></a>

Just a note but, whats with the funny quotes (`”`)? This could cause you issues later. — John Hartsock, Sep 27 '11 at 18:30
"1" is not a valid ID, btw. see [here](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html). — yincrash, Sep 27 '11 at 18:31

score 2 · Answer 1 · answered Sep 27 '11 at 18:30

2

First off, IDs beginning with a number are not valid - change them to have a letter in front :)

Other than that though, this would do:

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  $('#' + link.id).attr('href', link.link);
}

EDIT

Also, as John Hartsock mentions above, make sure you use a standard double quote to surround your attribute values, not the curly one shown in your original code.

answered Sep 27 '11 at 18:30

Clive

36,918
8
87
113

Hey Clive i was getting some trouble implementing this. – Jerry S. Sep 27 '11 at 19:53

score 1 · Answer 2 · answered Sep 27 '11 at 18:34

1

here's the way to do it if you don't want to use jQuery:

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  document.getElementById(link.id).setAttribute('href', link.link);
}

answered Sep 27 '11 at 18:34

yincrash

6,394
1
39
41

score 0 · Answer 3 · answered Sep 27 '11 at 18:41

0

var linksObj = {"links": [
            {"link": "http://www.google.com/",
             "id": "1"
            },
            {"link": "http://www.poogle.com/",
             "id": "2"
            },
            {"link": "http://www.foogle.com/ ",
             "id": "3"
            },

]};

for (var i = 0; i < linksObj.links.length; i++) {
    var linkObj = linksObj.links[i];
    var elem = document.getElementById(linkObj.id);

    if (elem) {
       elem.href = linkObj.link;
       elem.innerHTML = linkObj.link;
    }
}

Example

answered Sep 27 '11 at 18:41

amit_g

30,880
8
61
118

HEY amit_g, I put the JSON content in my JSON file and then put the FOR LOop in my JS file, but it's still not working. – Jerry S. Sep 27 '11 at 20:09
Did you not comment earlier that it worked? Show us the exact code (update your question) that you have. – amit_g Sep 27 '11 at 20:10
How are the JSON file and javascript files included in the HTML? – amit_g Sep 27 '11 at 20:47
Show us that code also. Specifically how you are populating linksObj variable from the JSON. – amit_g Sep 27 '11 at 20:57

Href Links Dymamically

3 Answers3