How to print a javascript array values in a jQuery .html() function?

Question

I have a JavaScript array that contains a set of strings. I want to display them in a HTML div element by line by line using j Query or JavaScript.

My code is up to now:

var data = data;
for (i = 1; i <= data.length; i++) {

  data[i] = data[i] + '<br />';

  $(target).html('<a>'+data[i]+'</a>');
}

My data is displayed in this moment right now.

Labelling MachinesLabels - Plastic, Metal, Foil etcLabels FabricLaboratories - MedicalLaboratories - TestingLaboratory Equipment & SuppliesLaboratory Equipment Services & Calibration

I want them displayed like this as links (inside tags):

Labelling Machines
Labels - Plastic, Metal, Foil etc
Labels Fabric
Laboratories - MedicalLaboratories - Testing
Laboratory Equipment & Supplies
Laboratory Equipment Services & Calibration

Thanks in advance

You need to use append method check my answer.

Rajendran Nadar
– Rajendran Nadar

2017-09-29 07:02:43 +00:00
Commented Sep 29, 2017 at 7:02 — Rajendran Nadar
– Rajendran Nadar, Commented Sep 29, 2017 at 7:02

Gurpreet Singh · Accepted Answer · 2017-09-29 07:18:06Z

2

You should add the breaks outside of the link tags and use .html() only once, as it completely replaces the innerHTML of the given element, i.e.

str = "";
for (i = 1; i <= data.length; i++) {
    str += "<a>" + data[i] + "</a><br />";
}
$(target).html(str);

I would suggest another approach, to use innerHTML (javascript) or append (jquery) as another answer has already mentioned

for (i = 1; i <= data.length; i++) {
    target.innerHTML += "<a>" + data[i] + "</a><br />";
}

edited Sep 29, 2017 at 7:18

answered Sep 29, 2017 at 6:46

Gurpreet Singh

1298 bronze badges

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

2 Comments

charlietfl Over a year ago

html() method replaces the target html every iteration of the loop

Rajendran Nadar Over a year ago

@charlietfl that's why I used append method.

brk · Accepted Answer · 2017-09-29 06:51:09Z

0

Your code is incomplete here.Not sure if you have declare variable i anywhere in code.Also you are starting to loop from 1st index

Instead of appending to DOM on every iteration,create a string and concat the value to it. Append it on completion of the iteration.

var data = data,
htmlString="";
for (var i = 0; i <= data.length; i++) {
htmlString+= data[i] + '<br />';
}
$(target).append(htmlString);

answered Sep 29, 2017 at 6:51

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Rajendran Nadar · Accepted Answer · 2017-09-29 06:58:24Z

0

The cleanest way will be wrapped in a div. And you need to use .append() method to not override the initial data that is already added to the target.

var data = ["Hello", "World", "Lorem", "Ipsum", "More length"];
for (var i = 0; i < data.length; i++) {
  $("#result").append('<div><a href="#" class="link">' + data[i] + '</a></div>');
}

.link {
  color: #5ca5cc;
  margin-bottom: 10px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Clean and more simple code along with working demo.

edited Sep 29, 2017 at 6:58

answered Sep 29, 2017 at 6:49

Rajendran Nadar

5,4784 gold badges37 silver badges56 bronze badges

Comments

Andy · Accepted Answer · 2017-09-29 07:10:35Z

0

Instead of a for/loop you could use ES6 in one line with map and a template literal.

$(target).html(arr.map(el => `<a>${el}</a><br/>`));

DEMO

edited Sep 29, 2017 at 7:10

answered Sep 29, 2017 at 7:05

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

kyun · Accepted Answer · 2017-09-29 07:35:47Z

0

var data = data;
var str = '';
for (var i = 1; i <= data.length; i++) {

  str += `<a>${data[i]}<br /></a>`;

}
$(target).html(str);

Try this.

edited Sep 29, 2017 at 7:35

answered Sep 29, 2017 at 6:46

kyun

10.4k9 gold badges36 silver badges79 bronze badges

1 Comment

charlietfl Over a year ago

This creates only one <a> with a list of items in it. Doesn't make sense

Collectives™ on Stack Overflow

How to print a javascript array values in a jQuery .html() function?

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related