More efficient way to implement data into table

Question

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

create a function that prints 1 result, and then call it 5 times... Or make an OOP class with methods allowing you to do this... there are several ways to do this, give it some trys — kevinniel
– kevinniel, Commented Mar 12, 2018 at 7:48

Dhruv Shah · Accepted Answer · 2018-03-12 08:07:42Z

1

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

answered Mar 12, 2018 at 8:07

Dhruv Shah

1,6711 gold badge10 silver badges22 bronze badges

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

2 Comments

user5928872 Over a year ago

wow I was thinking it would be way more complicated that this. Can I nest also another function on top of that which takes the url value?

user5928872 Over a year ago

one thing I didn't understand, why "txt +=" but not "txt ="

Shashank · Accepted Answer · 2018-03-12 07:56:58Z

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

Collectives™ on Stack Overflow

More efficient way to implement data into table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related