Unable to add rows dynamically when data is fetched javascript

Question

I am trying to display result in text boxes after fetching data with javascript.

While database contains multiple entries for the expected result, I am only able to display result in one row and the script is not adding additional rows dynamically. Solution needs to be implemented in javascript only.

var data1 = "test";
$.ajax({
    url : "EmployeeTaskServlet",
    type : "POST",
    data : {data1: data1},
    success : function(result){
        var taskList = $.parseJSON(result);
        document.getElementById("campo1").value = (taskList[i].minorTaskName);
        document.getElementById("campo2").value = (taskList[i].estimatedTime);
        document.getElementById("campo3").value = (taskList[i].minorTaskDetails);
        alert(taskList[0].taskStatus);
        document.getElementById("number-tasks-2").innerHTML = ( + taskList.length);
        //document.getElementById('currentStatusDB').value = (document.getElementById('currentStatusInput').value);
        var count = taskList.length;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="hide-row">
    <div class="col-lg-4 mb-1">
        <div class="card h-100 text-left">
            <div class="card-body">
                <div class="table-responsive">
                    <table style="border: none;" id="dynamic_field_time">
                        <tr>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo1" readonly/></td>
                            <td style="width: 20%;border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo2" readonly/></td>
                            <td style="border: none;"><input type="text" name="name[]" class="form-control name_list" id="campo3" readonly/></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Martin Adámek · Accepted Answer · 2017-10-24 06:31:36Z

4

You can create rows dynamically with jQuery like this:

// jQuery variant
function createRow(row) {
    var tr = $('<tr>');
    tr.append($('<td>').text(row.minorTaskName));
    tr.append($('<td>').text(row.estimatedTime));
    tr.append($('<td>').text(row.minorTaskDetails));
    $('#dynamic_field_time').append(tr);
}

var data1 = "test";
$.ajax({
    url: "EmployeeTaskServlet",
    type: "POST",
    data: {data1: data1},
    success: function(result){
        var taskList = $.parseJSON(result);
        taskList.forEach(function (row) {
            createRow(row);
        });
    }
});

Or with vanilla JS:

function createCell(value) {
    var td = document.createElement('td');
    td.innerText = value;

    return td;
}

function createRow(row) {
    var tr = document.createElement('tr');
    tr.appendChild(createCell(row.minorTaskName));
    tr.appendChild(createCell(row.estimatedTime));
    tr.appendChild(createCell(row.minorTaskDetails));
    document.getElementById('dynamic_field_time').appendChild(tr);
}

edited Oct 24, 2017 at 6:31

answered Oct 23, 2017 at 22:40

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tx-911 Over a year ago

Anyway via JavaScript only?

Martin Adámek Over a year ago

Well you tagged the question with jquery. Will add vanilla js too.

Martin Adámek Over a year ago

Here you go. Btw you still use jQuery for making the ajax request, that's the reason why I used it too. Do you want that code in vanilla JS too? More about that e.g. here sitepoint.com/guide-vanilla-ajax-without-jquery and $.parseJSON can be simply exchanged for vanilla JSON.parse.

user8822656 · Accepted Answer · 2017-10-24 03:00:21Z

0

You can use forEach fuction for iterating through array and create new template string;

$.ajax({
    url: "EmployeeTaskServlet",
    type: "POST",
    data: {data1: data1},
    success: function(result){
        var taskList = $.parseJSON(result);
        var template = taskList.map( item => {
           return `<tr><td>${item.minorTaskName}</td><td>${row.estimatedTime}</td><td>${row.minorTaskDetails}</td></tr>`
        })

        document.getElementById("number-tasks-2").innerHTML = template;
    }
});

answered Oct 24, 2017 at 3:00

user8822656

Collectives™ on Stack Overflow

Unable to add rows dynamically when data is fetched javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related