CODEWITHSUNDEEP
javascript
pyjama
pyjama

Reputation: 135

Iterate over array and assign new values

I have an array that looks like this:

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"
  }
]

I want to iterate over the comments in the array and create a div for each of the comments.

This is what I have:

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++;
    }
});

This is the expected output:

<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>

How can I assign a new value over each iteration?

Thank you very much

Upvotes: 0

Views: 51

Answers (4)

Edward Muniz
Edward Muniz

Reputation: 1

I see some folks were quicker than me, but here's what I came up with that closely resembled your original approach, I know I learn best this way. Using forEach alone to iterate over the array made the biggest difference.

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;

Upvotes: 0

random
random

Reputation: 7901

If you are using tr, there is no need to create the div. Append tr to the 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>

Upvotes: 0

Josh Wulf
Josh Wulf

Reputation: 4877

You want to use Array.map with no side-effects. See this article.

The solution:

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)

You can now test each piece of it in an automated test suite without a DOM.

Upvotes: 0

wxker
wxker

Reputation: 1896

You should use Array's forEach on comments_data directly instead of using the Object.entries function.

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>'
    );
});

Upvotes: 1

Related Questions