What is the best way to repeat html code using javascript object?

Question

Using some js object like

links = {
    link1: "Text1",
    link2: "Text2",
    link3: "Text3"
};

I want to create several <a> elements with href from keys and content from values, like

<a href="link1">Text1</a>
<a href="link2">Text2</a>
<a href="link3">Text3</a>

What is the best and the shortest way to do it using js or some popular js frameworks?

Maksim · Accepted Answer · 2015-04-02 13:37:59Z

2

you want to use for loop in javascript.

HTML:

 <p id="demo" />

JS:

links = {
    link1: "Text1",
    link2: "Text2",
    link3: "Text3"
};

var element, filling = "";
for (element in links) {
    filling += "<a href=\"{0}\">{1}</a>"
        .replace("{0}", element)
        .replace("{1}", links[element]);
}

document.getElementById("demo").innerHTML = filling;

See the demo here: http://jsfiddle.net/0subxy9m/1/

edited Apr 2, 2015 at 13:37

Maksim

2647 silver badges20 bronze badges

answered Apr 2, 2015 at 12:47

Bartosz Jastrzebski

515 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

test1n · Accepted Answer · 2015-04-02 13:11:53Z

2

with Angular for example and your links object

HTML

<li ng-repeat="(link,text) in links">
    <a href="http://example.com/{{link}}">{{text}}</a>
</li>

JS

$scope.links = {
  link1: "Text1",
  link2: "Text2",
  link3: "Text3"
};

plnkr demo here

edited Apr 2, 2015 at 13:11

answered Apr 2, 2015 at 12:50

test1n

711 silver badge7 bronze badges

Collectives™ on Stack Overflow

What is the best way to repeat html code using javascript object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related