将Json对象映射到每个属性类和数据

时间:2013-10-22 06:05:58

标签: javascript jquery json

我正在尝试将jason数据写入具有类.name和data-key za数据attr的单独div中。我有数据问题并获得正确的索引。

这是我的错误尝试。 Console.log写入所有键,但最后一个函数不为div提供数据attr

$.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]);
        });

2 个答案:

答案 0 :(得分: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]);
    });

答案 1 :(得分:0)

您错过了$ ('.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]);
});

您可以在keyadding 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++;            
});