Re-arrange HTML table data as per JSON Array

Question

I have 2 JSON arrays that are being fetched from Node API. However, I am having trouble displaying them on HTML table.

The JSON array

[ '127.0.0.1:27018', '127.0.0.1:27019', '127.0.0.1:27020' ]
[ 'SECONDARY', 'PRIMARY', 'SECONDARY' ]

AJAX call

   $.ajax({
    url: "http://localhost:8070/api/route",
    type: 'POST',
    dataType:'json',
    data: {hostname: str1, port2: str2 },
    success: function(res) {
       console.log(res);
       $.each(['result1', 'result2'], function(i, key) {
           console.log("Index",i);
           console.log("Item",key);

           $.each(res[key], function(index, value){
               console.log("key",index);   
               console.log("Value",value);
               divData='';
               divData='<tr><td>'+index+'</td><td>'+value+'</td></tr>';
               $('#restab').append(divData);   
           });
       });

       }
   });

The table comes-out this way (refer picture). I want array1 values on 1st column of the table and array2 values on the 2nd column.

Here are all the console logs

{result1: Array(3), result2: Array(3)}
Index result1
Item (3) ["127.0.0.1:27018", "127.0.0.1:27019", "127.0.0.1:27020"]
key 0
Value 127.0.0.1:27018
key 1
Value 127.0.0.1:27019
key 2
Value 127.0.0.1:27020
Index result2
Item (3) ["SECONDARY", "PRIMARY", "SECONDARY"]
key 0
Value SECONDARY
key 1
Value PRIMARY
key 2
Value SECONDARY

DontVoteMeDown · Accepted Answer · 2020-05-12 12:05:01Z

1

Check this out:

let res = {result1: [ '127.0.0.1:27018', '127.0.0.1:27019', '127.0.0.1:27020' ],
           result2: [ 'SECONDARY', 'PRIMARY', 'SECONDARY' ] },
  html = '';
  
$.each(res.result1, function(i, key) {
  html+=' <tr><td>'+key+'</td><td>'+res.result2[i]+'</td></tr>';
});
 
$('table').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Hostname</th>
    <th>Status</th>
  </tr>
</table>

edited May 12, 2020 at 12:05

answered May 12, 2020 at 10:56

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

2 Comments

nomadev95 Over a year ago

It is giving me the same thing. All the values appear in the 2nd column.

DontVoteMeDown Over a year ago

@nomadev95 ohh ok, now I got what you really want. Updated the code.

Collectives™ on Stack Overflow

Re-arrange HTML table data as per JSON Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related