Question

我有一个看起来像这样的数组：

comments_data = [
  {
    "user": "abc",
    "content": "very cool post",
    "timestamp": "2020-02-24T02:14:40.455517Z",
    "thumb": "accounts/652473305/652473305.jpg"
  },
  {
    "user": "abc",
    "content": "cool post",
    "timestamp": "2020-02-24T02:14:31.188760Z",
    "thumb": "accounts/652473305/652473305.jpg"
  }
]

我想遍历数组中的注释并为每个注释创建一个div。

这就是我所拥有的：

Object.entries(comments_data).forEach(([key, value]) => {
    var c_user = value["user"]; 
    var c_content = value["content"];   
    var c_dates = value["timestamp"];   
    var c_thumb_pre = value["thumb"];   
    c_user = JSON.stringify(c_user);
    var c_date = c_dates.split('T')[0];
    var c_thumb = '/media/' + c_thumb_pre 

    var i = 0;
    this_ = $('.main_cont_panel_inbox_tbody')
    while (i < comments_count) {
        var tablerow = document.createElement("div");
        tablerow.setAttribute('class', 'comment_data');
            tablerow.innerHTML = '\
                <tr class="main_cont_panel_inbox_tr_1" >\
                <th class="main_cont_panel_inbox_th_1">\
                <a class="main_cont_panel_inbox_artistinfo">\
                <img class="main_cont_panel_inbox_artist_logo" src="'+ c_thumb +'">\
                ' + c_user + '</a></th>\
                <th class="main_cont_panel_inbox_th_2">\
                <a class="main_cont_panel_inbox_content "> ' + c_content + " | " + c_date+ '\
                </a></th></tr>\
                ';
        this_.append(tablerow);
        i++;
    }
});

这是预期的输出：

<tr class="main_cont_panel_inbox_tr_1" >
    <th class="main_cont_panel_inbox_th_1">
        <a class="main_cont_panel_inbox_artistinfo">
        <img class="main_cont_panel_inbox_artist_logo" src="/media/accounts/652473305/652473305.jpg">    abc  </a></th>
    <th class="main_cont_panel_inbox_th_2">
        <a class="main_cont_panel_inbox_content ">  very cool post  | 2020-02-24 
        </a>
    </th>
</tr>
<tr class="main_cont_panel_inbox_tr_1" >
    <th class="main_cont_panel_inbox_th_1">
        <a class="main_cont_panel_inbox_artistinfo">
        <img class="main_cont_panel_inbox_artist_logo" src="/media/accounts/652473305/652473305.jpg">    abc  </a></th>
    <th class="main_cont_panel_inbox_th_2">
        <a class="main_cont_panel_inbox_content "> cool post  | 2020-02-24 
        </a>
    </th>
</tr>

如何在每次迭代中分配一个新值？

非常感谢您

Answer 1

您应该直接在comments_data上使用Array的forEach，而不要使用Object.entries函数。

comments_data.forEach(comment => {
    $('.main_cont_panel_inbox_tbody').append('\
        <tr class="main_cont_panel_inbox_tr_1" >\
            <th class="main_cont_panel_inbox_th_1">\
                <a class="main_cont_panel_inbox_artistinfo">\
                    <img class="main_cont_panel_inbox_artist_logo" src="'+ comment.thumb +'">' + comment.user + '\
                </a>\
            </th>\
            <th class="main_cont_panel_inbox_th_2">\
                <a class="main_cont_panel_inbox_content "> ' + comment.content + " | " + comment.date + '</a>\
            </th>\
        </tr>'
    );
});

Answer 2

您想使用Array.map且没有副作用。参见this article。

解决方案：

const comments_data = [
	{
	  "user": "abc",
	  "content": "very cool post",
	  "timestamp": "2020-02-24T02:14:40.455517Z",
	  "thumb": "accounts/652473305/652473305.jpg"
	},
	{
	  "user": "abc",
	  "content": "cool post",
	  "timestamp": "2020-02-24T02:14:31.188760Z",
	  "thumb": "accounts/652473305/652473305.jpg"
	}
]
  
const extractDate = timestamp => timestamp.split('T')[0]

const makeTR = element => `<tr class="main_cont_panel_inbox_tr_1" >
    <th class="main_cont_panel_inbox_th_1">
        <a class="main_cont_panel_inbox_artistinfo">
        <img class="main_cont_panel_inbox_artist_logo" src="/media/${element.thumb}">    ${element.user}  </a></th>
    <th class="main_cont_panel_inbox_th_2">
        <a class="main_cont_panel_inbox_content "> ${element.content}  | ${extractDate(element.timestamp)} 
        </a>
    </th>
</tr>`

const output = comments_data.map(makeTR).join('\n')
console.log(output)

您现在可以在没有DOM的自动测试套件中对其进行测试。

Answer 3

如果您使用的是tr，则无需创建div。将tr附加到table。

comments_data = [
    {
      "user": "abc",
      "content": "very cool post",
      "timestamp": "2020-02-24T02:14:40.455517Z",
      "thumb": "accounts/652473305/652473305.jpg"
    },
    {
      "user": "abc",
      "content": "cool post",
      "timestamp": "2020-02-24T02:14:31.188760Z",
      "thumb": "accounts/652473305/652473305.jpg"
    }
 ];

comments_data.forEach(({user, content, timestamp, thumb}) => {
    $('.main_cont_panel_inbox_tbody').append('\
        <tr class="main_cont_panel_inbox_tr_1" >\
            <th class="main_cont_panel_inbox_th_1">\
                <a class="main_cont_panel_inbox_artistinfo">\
                    <img class="main_cont_panel_inbox_artist_logo" src="'+ thumb +'">' + user + '\
                </a>\
            </th>\
            <th class="main_cont_panel_inbox_th_2">\
                <a class="main_cont_panel_inbox_content "> ' + content + " | " + timestamp.slice(0, 10) + '</a>\
            </th>\
        </tr>'
    );
});

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

Answer 4

我看到有些人比我快，但是这就是我想出的与您最初使用的方法非常相似的方法，我知道我通过这种方法学得最好。单独使用forEach遍历数组的效果最大。

var tablerow = document.createElement("div");
tablerow.setAttribute("class", "comment_data");
var tableRowOuput = "";

comments_data.forEach(function(value) {
var c_user = value["user"];
var c_content = value["content"];
var c_dates = value["timestamp"];
var c_thumb_pre = value["thumb"];
c_user = JSON.stringify(c_user);
var c_date = "placeholder";
var c_date = c_dates.split("T")[0];
var c_thumb = "/media/" + c_thumb_pre;
tableRowOuput +=
    '\
    <tr class="main_cont_panel_inbox_tr_1" >\
    <th class="main_cont_panel_inbox_th_1">\
    <a class="main_cont_panel_inbox_artistinfo">\
    <img class="main_cont_panel_inbox_artist_logo" src="' +
    c_thumb +
    '">\
    ' +
    c_user +
    '</a></th>\
    <th class="main_cont_panel_inbox_th_2">\
    <a class="main_cont_panel_inbox_content "> ' +
    c_content +
    " | " +
    c_date +
    "\
    </a></th></tr>\
";
});

tablerow.innerHTML = tableRowOuput;

遍历数组并分配新值

4 个答案: