javascript - 在循环内连接 html 标签

Question

我一直在连接一个字符串以在数组循环中将其打印为 html。它只在类为 group 的 div 中打印第一个 anchor 标签。我应该修改什么以打印 group div 内的 anchor ？这是示例:

var data = [{
        "id": 1969,
        "first_release_date": 1083542400,
        "name": "Item 1"
    },
    {
        "id": 25076,
        "first_release_date": 1083542400,
        "name": "Item 2"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 3"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 4"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 5"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 6"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 7"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 8"
    },
    
    {
        "id": 9245,
        "first_release_date": 1566950400,
        "name": "Item 9"
    }
];

var tag = "",
    release = "",
    releaseChecker = 0;

Object.keys(data).forEach(function(key) {
    if (data[key].first_release_date != releaseChecker) {
        release = new Date(data[key].first_release_date * 1000);
        tag += '<h4>' + release.getDate() + '</h4>';
    }

    if (data[key].first_release_date != releaseChecker) {
        tag += '<div class="group">';
    }

    tag += '<a class="test" href="#">'+data[key].name+'</a>, ';

    if (data[key].first_release_date != releaseChecker) {
        tag += '</div>';
    }
    releaseChecker = data[key].first_release_date;
});
$(".el").html(tag);

.group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

Answer 1

Object.keys() 用于 object 但 data 是数组。它可能有效但它可能会导致一些意外行为。

除了使用 Object.keys()，您首先可以创建另一个数组来保存分组数据，然后对其进行迭代。

这是一个工作片段:

更新注意:您可以使用 map 和 join 来添加逗号，而不是在末尾对 , 进行硬编码。

var data = [{
        "id": 1969,
        "first_release_date": 1083542400,
        "name": "Item 1"
    },
    {
        "id": 25076,
        "first_release_date": 1083542400,
        "name": "Item 2"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 3"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 4"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 5"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 6"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 7"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 8"
    },
    
    {
        "id": 9245,
        "first_release_date": 1566950400,
        "name": "Item 9"
    }
];


    var tag = "",
    release = "",
    releaseChecker = 0,
    groupedData = [];

   data.forEach(function(item) {
        release = new Date(item.first_release_date * 1000);
        if(!groupedData.find(d => d.releaseDate === release.getDate())){
           groupedData.push({releaseDate: release.getDate(), items: []});
        }
        
        groupedData.find(d => d.releaseDate === release.getDate()).items.push(item);
       
    
  });
 groupedData.forEach(function(data){
 
    tag += '<h4>' + data.releaseDate + '</h4>';
    tag += '<div class="group">';
    
    tag += data.items.map(function(item){
       return '<a class="test" href="#">'+item.name+'</a>';
    }).join(', ');
    
    tag += '</div>';
 
 });
 
 $(".el").html(tag);

.group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

希望这对您有所帮助。