for...in loop with jQuery append

Question

I'm still new to learning loops so I'm a little confused. I have a for...in loop that loops a json file of objects. Then I have jQuery create some html elements for each object. I have one problem though, every time it loops, it repeats the previous objects along with the new one so the output becomes:

-name

-name
-test

-name
-test
-someone

-name
-test
-someone
-something

But I'm trying to do

-name

-test

-someone

-something

How can I achieve this?

My current code for it is this:

var html = ""
for (var name in urls) {
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`
    $("#main").append(html)
}

Pranav C Balan · Accepted Answer · 2016-07-26 16:05:20Z

5

You are appending HTML string on each iteration instead append entire code outside the for loop. Although use Object#hasOwnProperty for getting only own properties and not its prototypes.

var html = ""
for (var name in urls) {
  if(urls.hasOwnProperty(name))
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`;
}
$("#main").append(html)

I think it would be better to use Object.keys() and String#map methods.

$("#main").append(
  Object.keys(urls).map(function(name){
    return `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`;     
  })
)

edited Jul 26, 2016 at 16:05

answered Jul 26, 2016 at 15:53

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

4 Comments

Rajaprabhu Aravindasamy Over a year ago

${name} How does this part works? Any new arrival to ES6? Can you link me to the relevant doc?

Tushar Over a year ago

@RajaprabhuAravindasamy Template strings

T.J. Crowder Over a year ago

@RajaprabhuAravindasamy: Yes, that's a feature of template strings, which the OP used.

ErraticFox Over a year ago

I feel extremely dumb now. @RajaprabhuAravindasamy template strings are so much better than the vanilla way in terms of productivity. Thank you for the answer. Will mark the answer correct when it lets me (time limit).

Collectives™ on Stack Overflow

for...in loop with jQuery append

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related