JS variable not working in AJAX success

Question

Fetched data from database with php and ajax, Everything is ok except note variable is empty.Can somebody find out the issue why note value is not going to display. How can i fix it.

success: function(response) {

var cats = {};
response.results.forEach(function(element) {
    cats[element.team] = cats[element.team] || [];
    cats[element.team].push(element);
});

var i = 0;

Object.keys(cats).forEach(function(team) {
    let html = '';

    // Append the category header
    html = '<tr>';
    html += '<td>' + team + '</td>';
    html += '</tr>';
    $('table').append(html);

    // Loop through the results for this category
    cats[team].forEach(function(element) {
        var id = element.id;
        var teamId = element.team_id;
        var names = element.player;
        var result = element.result;
        var note = element.note;

        html = '<tr>';
        html += '<input type="hidden" name="Id[]" value="' + id + '"/>';
        html += '<input type="hidden" name="data[' + i + '][team_id]" value="' + teamId + '"/>';
        html += '<td>' + names + '</td>';
        html += '<td><input type="text" name="result[]" value="' + result + '"></td>';
        html += '</tr>';
        $('table').append(html);
    });

    // Append the textarea at the end of the results
    html = '<tr>';
    html += '<td><textarea placeholder="note..." name="data[' + i + '][Note]">' + note + '</textarea></td>';
    html += '</tr>';
    $('table').append(html);
    i++;
});

}

This is the output

database table

JSON output

{"groupData":{"id":"23","group_name":"Group B"},"results": 
[{"id":"2","team_id":"4","team":"Team 
B","player":"Deno","result":"14","note":"Lost"}, 
{"id":"3","team_id":"4","team":"Team 
B","player":"Niob","result":"26","note":"Lost"}, 
{"id":"4","team_id":"4","team":"Team 
B","player":"Skion","result":"76","note":"lost"}, 
{"id":"5","team_id":"5","team":"Team 
C","player":"Bela","result":"47","note":"won"}, 
{"id":"6","team_id":"5","team":"Team 
C","player":"yomi","result":"57","note":"won"}]}

Answer 1

You should set note value infront of cats[team].forEach(function(element) {}). Hope to help, my friend :))

    success: function(response) {

var cats = {};
response.results.forEach(function(element) {
    cats[element.team] = cats[element.team] || [];
    cats[element.team].push(element);
});

var i = 0;

Object.keys(cats).forEach(function(team) {
    let html = '';

    // Append the category header
    html = '<tr>';
    html += '<td>' + team + '</td>';
    html += '</tr>';
    $('table').append(html);

    var note;
    // Loop through the results for this category
    cats[team].forEach(function(element) {
        var id = element.id;
        var teamId = element.team_id;
        var names = element.player;
        var result = element.result;
        note = element.note;

        html = '<tr>';
        html += '<input type="hidden" name="Id[]" value="' + id + '"/>';
        html += '<input type="hidden" name="data[' + i + '][team_id]" value="' + teamId + '"/>';
        html += '<td>' + names + '</td>';
        html += '<td><input type="text" name="result[]" value="' + result + '"></td>';
        html += '</tr>';
        $('table').append(html);
    });

    // Append the textarea at the end of the results
    html = '<tr>';
    html += '<td><textarea placeholder="note..." name="data[' + i + '][Note]">' + note + '</textarea></td>';
    html += '</tr>';
    $('table').append(html);
    i++;
});

}