mapping Json data and adding data attr

Question

I have a difficulty with mapping my my Json data. I would like to add data attr to each div with .name class. So as the result is like that:

<div class="name" data-key="sth"> sty</div>

Key can be got like that: ['streme'].key

here is my buggy JS:

function getExistingLinks() {
          $.post( "http://0.0.0.0:9292/api/links", function( data ) {
            var names = data.map(function (i) {
            return i['link'].name
            });
            var keys = data.map(function (i) {
            return i['link'].key
            });
            var container = document.querySelector(".link-names");
                names.forEach(function(name) {
                    var div = document.createElement('div');
                    div.innerHTML = name;
                    $('div').addClass("name");
                    // $('div').each( function(index) {
                           $('div')[index].data("key") = keys[index];
                       }
                    container.appendChild(div);
                });
       });  
      return false;   
    }

is hows 33 times Array[33] and in each of these 33 keys like that: 0: "p0E2bVUfq3zIRuUO9zY8X5ZbwAM" — lipenco
– lipenco, Commented Oct 22, 2013 at 4:33

Christophe · Accepted Answer · 2013-10-22 05:09:03Z

1

names.forEach(function(name,index) {
  var div = document.createElement('div');
  div.innerHTML = name;
  $(div).addClass("name");
  $(div).data("key") = keys[index];
});

You need to remove the quotes in the $() selector!

edited Oct 22, 2013 at 5:09

answered Oct 22, 2013 at 4:40

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

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

4 Comments

lipenco Over a year ago

Uncaught ReferenceError: i is not defined

Christophe Over a year ago

@lipenco you need a loop around the index! The point is to remove the quotes and use $(div) instead of $('div')

lipenco Over a year ago

hmm.. but $(div).each(function( index ) { $(div).data("key") = keys[index]; }); doesn't work: invalid left side of assignment

Christophe Over a year ago

I have updated my answer. The issue in your original code is that $('div') gets all the div elements in the document, while what you really wanted was $(div) to grab the div you just created.

Sudhir Bastakoti · Accepted Answer · 2013-10-22 05:04:06Z

0

As per your comment, may be try doing like:

var i = 0;
names.forEach(function(name) {
    var div = document.createElement('div');
    div.innerHTML = name;
    $('div').addClass("name");
    $('div').data("key", keys[i]);
    container.appendChild(div);
    i++;
});

edited Oct 22, 2013 at 5:04

answered Oct 22, 2013 at 4:41

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

2 Comments

lipenco Over a year ago

$(div).data("key") = keys[i]; - I have an error: invalid left side of assignment

Sudhir Bastakoti Over a year ago

@lipenco see my updated answer.. do this:: $('div').data("key", keys[i]); instead

PDA · Accepted Answer · 2013-10-22 05:10:44Z

0

the preferred method is to only add to the DOM once, as adding to the DOM will cause a redraw on each.

psuedo code as not sure what name represents in your innerHTML:

var divs = []; for (var i, len = names.length; i < len; i++) { divs.push($(''+name+'').data("key", keys[i])); }

$container.append(divs);

http://codepen.io/jsdev/pen/2866265243563efd79cf05a5b12202b3

answered Oct 22, 2013 at 5:10

PDA

7746 silver badges10 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-10-22 05:13:43Z

0

try something like this

 $('.name').data('key') //will give you sth

answered Oct 22, 2013 at 5:13

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

mapping Json data and adding data attr

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related