Sorting data to the HTML tables by their ID jQuery/javaScript

Question

I have an iteresting problem and I was trying to solve it for days.

I have a jQuery script which takes JSON object from the url and then put it into the array. The problem occurs when I have 3 different tables and script puts the data into 3 of them. I was trying to sort it by #id recognision, but it wasn't working at all.

This is a script which takes data from the server. The JSON object is: [{"Date": 20160721, "Failures": 5, "Hostname": "AIX", "Scan policy": "compliance-rhel6-int-prd"}, {"Date": 20160721, "Failures": 1, "Hostname": "Linux", "Scan policy": "compliance-rhel6-int-prd"}]

Script:

                   <script>
                        var url = 'http://jsonobj/_server_data'
                        $.getJSON(url,
                                function (data) {
                                    var tr;
                                    for (var i = 0; i < data.length; i++) {
                                        tr = $('<tr/>');
                                        tr.append("<td>" + data[i].Date + "</td>");
                                        tr.append("<td>" + data[i].Failures + "</td>");
                                        tr.append("<td>" + data[i].Hostname + "</td>");
                                        $('table').append(tr);
                                    }
                                });
                    </script>

What I am trying t o do is create two tables one for AIX one for Linux and store the data for that systems only. Right now the same data appears in two tables. I was t rying to sort it by getting $.(#hostname) as ID, but it didn't work.

Thank you for your help!

I'm not sure to properly understant what you need, but remove $("table").append(tr) and write table = $("<table/>"); table.append(tr);$("body").append(table); it is what you looking for ? — Jax Teller
– Jax Teller, Commented Jul 22, 2016 at 12:59

Wes Foster · Accepted Answer · 2016-07-22 13:04:17Z

1

Just have 2 tables on the page. One with the id of #AIX and the other with the id of #Linux

HTML:

<table id="AIX"></table>
<table id="Linux"></table>

Javascript:

<script>
    var url = 'http://jsonobj/_server_data'
    $.getJSON(url,
            function (data) {
                var tr;
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Date + "</td>");
                    tr.append("<td>" + data[i].Failures + "</td>");
                    tr.append("<td>" + data[i].Hostname + "</td>");

                    // This is where the magic happens
                    $('table#' + data[i].Hostname).append(tr);
                }
            });
</script>

Doing this, the tr elements will be appended only to the table which matches the ID of the hostname.

edited Jul 22, 2016 at 13:04

answered Jul 22, 2016 at 12:59

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

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

Comments

Maltesse · Accepted Answer · 2016-07-22 13:00:30Z

1

This should do the trick:

var AIX = [], Linux = [];
var url = "http://jsonobj/_server_data";
$.getJSON(url, function(data) {
  data = JSON.parse(data);
  for(var x in data) {
    if(data[x].Hostname == "AIX") {
      AIX[AIX.length] = data[x];
    } else if(data[x].Hostname == "Linux") {
      Linux[Linux.length] = data[x];
    }
  }
  printTables();
}); 

function printTables() {
   var tableAIX = document.getElementById('tableAIX');
   var newAIX = "";
   var tableLinux = document.getElementById('tableLinux');
   var newLinux = "";
   for(var x in AIX) {
      newAIX += "<tr><td>"+AIX[x].Date+"</td><td>"+AIX[x].Failures+"</td><td>"+AIX[x].Hostname+"</td></tr>";
   }
   for(var x in Linux) {
      newLinux += "<tr><td>"+Linux[x].Date+"</td><td>"+Linux[x].Failures+"</td><td>"+Linux[x].Hostname+"</td></tr>";
   }
   tableAIX.innerHTML = newAIX;
   tableLinux.innerHTML = newLinux;
}

With this as HTML:

<table id='tableAIX'></table>
<table id='tableLinux'></table>

edited Jul 22, 2016 at 13:00

Maltesse

671 gold badge2 silver badges8 bronze badges

answered Jul 22, 2016 at 12:57

ThijmenDF

1176 bronze badges

2 Comments

Jax Teller Over a year ago

you should optimate your code to generic for general use

Maltesse Over a year ago

Thank you for the answer. I choosed answer below as correct, because it is shorted and suit better for my problem. :)

user5066707 · Accepted Answer · 2016-07-22 13:05:14Z

0

Simple: iterate the tables.

$.getJSON(url, function (data) {
    var tr;
    for (var i = 0, $tables = $('table'), c; c = data[i]; i++) {
        $tr = $('<tr/>');
        $tr.append("<td>" + c.Date + "</td>");
        $tr.append("<td>" + c.Failures + "</td>");
        $tr.append("<td>" + c.Hostname + "</td>");
        $tables[i].appendChild($tr[0]);
    }
});

answered Jul 22, 2016 at 13:05

user5066707

Collectives™ on Stack Overflow

Sorting data to the HTML tables by their ID jQuery/javaScript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related