mapping JSON object in separate divs

Question

I am trying to put all object names in HTML and I am using this function.

  function getExistingLinks() {
      $.post( "http://0.0.0.0:9292/api/links", function( data ) {
        var names = data.map(function (i) {
        return i['link'].name
        });
        document.querySelector(".link-names").innerHTML = names;
      });
    }

html is very simple:

 <form id="addbookmark">
    <p><label for="title">Title</label><br />
    <input type="text" id="title" name="title" size="50" value="" /></p>
    <p><label for="url">Url</label><br />
    <input type="text" id="url" name="url" size="50" value="" /></p>
        <p class="link-names"></p>
    <p><input id="save" type="submit" value="Save Link" /></p>
  </form>

But in this situation all the names ale in one div .link-names, I would prefer put each name in separate div .link-name How can I do this?

Show us your HTML.

Rohan Kumar
– Rohan Kumar

2013-10-21 06:58:34 +00:00
Commented Oct 21, 2013 at 6:58 — Rohan Kumar
– Rohan Kumar, Commented Oct 21, 2013 at 6:58

McGarnagle · Accepted Answer · 2013-10-21 06:59:50Z

2

How about iterating over the names, and appending each?

var container = document.querySelector(".link-names");
names.forEach(function(name) {
    var div = document.createElement('div');
    div.innerHTML = name;
    container.appendChild(div);
    div.setAttribute('class', 'link-name');
});

answered Oct 21, 2013 at 6:59

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

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

1 Comment

bipen Over a year ago

well, with this i guess you end up having $.map and forEach ... two loops which is don't think is necessary.. is it ??

bipen · Accepted Answer · 2013-10-21 07:06:42Z

1

use $.each

 $.post( "http://0.0.0.0:9292/api/links", function( data ) {
   $.each(data,function (i,v) {
        var newDiv=$('<div />',{"class":"linkname",text:v.name});
        $('.link-names').append(newDiv);
        //or
         $('<div />',{"class":"linkname",text:v.name}).appendTo(".link-names");

    });

  });

edited Oct 21, 2013 at 7:06

answered Oct 21, 2013 at 7:00

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

mapping JSON object in separate divs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related