javascript - 各属性クラスとデータをそれぞれにマッピングするJsonオブジェクト

Question

class .name と data-key za data attr を使用して、jason データを個別の div に書き込もうとしています。データに問題があり、そのための適切なインデックスを取得しています。

これが私のバギーの試みです。Console.log はすべてのキーを書き込みますが、最後の関数は div にデータ属性を与えません

$.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");
              container.appendChild(div);
           });


        $.each((".name"), function(index) {
          $(this).data("key", keys[index]);
          console.log(keys[index]);
        });

Answer 1

この更新されたコードで試してください

$.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");
          container.appendChild(div);
       });


    $(".name").each(function(index) {
      $(this).data("key", keys[index]);
      console.log(keys[index]);
    });

Answer 2

あなたはこれ$を('.names') $.each試してみませんでした、

$.each($(".name"), function(index) {
// ----^ use $ here
    $(this).data("key", keys[index]);
    console.log(keys[index]);
});

または単に、

$(".name").each(function(index) {
    $(this).data("key", keys[index]);
    console.log(keys[index]);
});

好きなときkeyにadding element追加できます。container

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