CODEWITHSUNDEEP
javascriptjquery
user5928872
user5928872

Reputation:

More efficient way to implement data into table

I am trying to feed a table with errors we get from a virtual machine, I use json to read the database outputs from the server. Listing one item is fine but If i want to do it for last 5 items of the database, I would repeat the code again and again which doesn't seem any efficient to me. Copy pasting the code below seems unethical :D And I couldn't structure the way I need to use. Function or object. I am open to suggestions.

Edit: copied the wrong block of code :) but it was structured the same so no difference I guess.

    $(function() {
  $.getJSON("#myURL", function(getStressTestErrorInfo1) {
    if (getStressTestErrorInfo2[0] !== undefined) {
      var stressTestError1 = getStressTestErrorInfo1[0];
      var stressTestErrorId1 = stressTestError1.StresstestId;
      var stressTestErrorRunId1 = stressTestError1.StresstestRunId;
      var stressTestErrorName1 = stressTestError1.Name;
      var stressTestErrorStackTrace1 = stressTestError1.StackTrace;
      var stressTestErrorTimestamp1 = stressTestError1.Timestamp;
      $('#stressTestErrorId1').text(stressTestErrorId1);
      $('#stressTestErrorRunId1').text(stressTestErrorRunId1);
      $('#stressTestErrorName1').text(stressTestErrorName1);
      $('#stressTestErrorStackTrace1').text(stressTestErrorStackTrace1);
      $('#stressTestErrorTimestamp1').text(stressTestErrorTimestamp1);
    };
  });
});

Upvotes: 0

Views: 52

Answers (2)

Dhruv Shah
Dhruv Shah

Reputation: 1651

Instead of adding data to the table, by accessing the ids, I'd suggest adding appending table-rows dynamically to the html based on the length of the data that you receive or based on the length of the data that you want to display.

Try this:

$(function () {
$.getJSON("#myURL", function (getStressTestErrorInfo1) {
    if (!getStressTestErrorInfo1) {
        var len = getStressTestErrorInfo1.length;
        var data = getStressTestErrorInfo1;
        var txt = "";
        if(len > 0){
           for(var i=0;i<len;i++){
           // dynamically generating a table-row for appending in the table.
               txt += "<tr><td>"+data[i].StresstestId + "</td><td>" +data[i]. StresstestRunId +"</td><td>" + data[i].Name + "</td><td>" + data[i].StackTrace + "</td><td>" + data[i].Timestamp + "</td></tr>" ;
                }
                if(txt != ""){
                 // #table is the selector for your table element in the html
                 $("#table").append(txt);
                }
            }
    };
  });
});

Upvotes: 1

Shashank
Shashank

Reputation: 2060

The code can be made generalized through the following way:

$(function () {
    $.getJSON("#myURL", function (getStressTestErrorInfo1) {
        if (!getStressTestErrorInfo2[0]) {
            var stressTestError1 = getStressTestErrorInfo1[0];
            updateData('stressTestErrorId1', stressTestError1.StresstestId);
            updateData('stressTestErrorRunId1', stressTestError1.StresstestRunId);
            updateData('stressTestErrorName1', stressTestError1.Name);
            updateData('stressTestErrorStackTrace1', stressTestError1.StackTrace);
            updateData('stressTestErrorTimestamp1', stressTestError1.Timestamp);
        };
    });
});

function updateData(idSelector, data) {
    $('#' + idSelector).text(data);
}

Upvotes: 0

Related Questions