smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
            .then((data) => {
                let newItem = $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
                            '<span class="side-stick"></span>' +
                            '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="'+element.short_description+'">'+element.short_description+'<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
                            '<p class="note-date font-12 text-muted">'+element.shortcode+' - '+element.id+' (TSRTODO - creation date here)</p>' +
                            '<div class="note-content">' +
                                '<p class="note-inner-content text-muted" data-noteContent="'+element.long_description+'">'+element.long_description+'</p>' +
                            '</div>' +
                            '<div class="d-flex align-items-center">' +
                                '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
                                '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
                                '<div class="ml-auto">' +
                                        '<span><i class="fa fa-search focus" data-href="'+element.id+'"></i></span>' +
                                '</div>' +
                            '</div>' +
                        '</div></div>');
                data.data.itemsOpen.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });
                data.data.itemsInProgress.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });

This code is throwing error because

element is not defined

in the let newItem part of the code. And this is expected. How can I fix my code so that I can define newItem outside of the foreach loop? So I can define it once and use it twice

        smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
            .then((data) => {
                let newItem = $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
                            '<span class="side-stick"></span>' +
                            '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="'+element.short_description+'">'+element.short_description+'<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
                            '<p class="note-date font-12 text-muted">'+element.shortcode+' - '+element.id+' (TSRTODO - creation date here)</p>' +
                            '<div class="note-content">' +
                                '<p class="note-inner-content text-muted" data-noteContent="'+element.long_description+'">'+element.long_description+'</p>' +
                            '</div>' +
                            '<div class="d-flex align-items-center">' +
                                '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
                                '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
                                '<div class="ml-auto">' +
                                        '<span><i class="fa fa-search focus" data-href="'+element.id+'"></i></span>' +
                                '</div>' +
                            '</div>' +
                        '</div></div>');
                data.data.itemsOpen.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });
                data.data.itemsInProgress.forEach(element => {
                    newItem.find('.side-stick').addClass('background-'+element.color);
                    $('#sortable1').append(newItem);
                });

This code is throwing error because

element is not defined

in the let newItem part of the code. And this is expected. How can I fix my code so that I can define newItem outside of the foreach loop? So I can define it once and use it twice

• javascript

• What are you expecting element to be? You haven't defined it here. – mykaf Commented Feb 12 at 21:18
• 1 You could write a function that takes in element as a parameter and return the html. – mykaf Commented Feb 12 at 21:19
• 1 You don't define element until the forEach() loops. You can't use it in newItem because that's outside the loops. What are you expecting it to be there? – Barmar Commented Feb 12 at 21:24
• 1 @LelioFaieta: "if I have to define a function explicitly or I can define the variable as a function" - What are you expecting that difference to be? It seems like a function is exactly what you're looking for here. – David Commented Feb 12 at 21:26
• 1 @LelioFaieta: A variable can reference a function, if that's what you're asking. But a function is still a function. – David Commented Feb 12 at 21:28

2 Answers 2

You need to assign newItem inside the forEach() calls, since that's where you define element.

Since you're doing the same thing in both forEach() loops, you can avoid duplicate code by concatenating the arrays and using one loop over that.

smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
  .then((data) => {
    [...data.data.itemsOpen, ...data.data.itemsInProgress].forEach(element => {
      let newItem = $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
        '<span class="side-stick"></span>' +
        '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="' + element.short_description + '">' + element.short_description + '<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
        '<p class="note-date font-12 text-muted">' + element.shortcode + ' - ' + element.id + ' (TSRTODO - creation date here)</p>' +
        '<div class="note-content">' +
        '<p class="note-inner-content text-muted" data-noteContent="' + element.long_description + '">' + element.long_description + '</p>' +
        '</div>' +
        '<div class="d-flex align-items-center">' +
        '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
        '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
        '<div class="ml-auto">' +
        '<span><i class="fa fa-search focus" data-href="' + element.id + '"></i></span>' +
        '</div>' +
        '</div>' +
        '</div></div>');
      newItem.find('.side-stick').addClass('background-' + element.color);
      $('#sortable1').append(newItem);
    });
  });

Another option is to define a function:

function newItem(element) {
  return $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
    '<span class="side-stick"></span>' +
    '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="' + element.short_description + '">' + element.short_description + '<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
    '<p class="note-date font-12 text-muted">' + element.shortcode + ' - ' + element.id + ' (TSRTODO - creation date here)</p>' +
    '<div class="note-content">' +
    '<p class="note-inner-content text-muted" data-noteContent="' + element.long_description + '">' + element.long_description + '</p>' +
    '</div>' +
    '<div class="d-flex align-items-center">' +
    '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
    '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
    '<div class="ml-auto">' +
    '<span><i class="fa fa-search focus" data-href="' + element.id + '"></i></span>' +
    '</div>' +
    '</div>' +
    '</div></div>');
}

smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
  .then((data) => {
    [...data.data.itemsOpen, ...data.data.itemsInProgress].forEach(element => {
      newItem(element).find('.side-stick').addClass('background-' + element.color).appendTo($("#sortable"))
    });
  });

What I was looking for is the following:

const createNoteItem = (element) => 
    $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
        '<span class="side-stick"></span>' +
        '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="' + element.short_description + '">' + element.short_description + '<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
        '<p class="note-date font-12 text-muted">' + element.shortcode + ' - ' + element.id + ' (TSRTODO - ' + new Date().toLocaleDateString() + ')</p>' +
        '<div class="note-content">' +
        '<p class="note-inner-content text-muted" data-noteContent="' + element.long_description + '">' + element.long_description + '</p>' +
        '</div>' +
        '<div class="d-flex align-items-center">' +
        '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
        '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
        '<div class="ml-auto">' +
        '<span><i class="fa fa-search focus" data-href="' + element.id + '"></i></span>' +
        '</div>' +
        '</div>' +
        '</div></div>');