Home > Enterprise >  Generate html table from json url with data from key, value also from parent without key
Generate html table from json url with data from key, value also from parent without key

Time:12-24

Im generating an html table with data from json url. I want to include parent value without key to these data.

Json structure:

{
    "gzpik1gqlnm":
        {"owner_name":"user02","room_name":"131","country":"EN","max":2,"current":1,"password":0},
            "d1vn67n7sgu":
                {"owner_name":"user09","room_name":"254","country":"EN","max":2,"current":1,"password":0}
}

Javascript:

    setInterval(function(){
  $.getJSON("somejson.url", function(data){
    var room_data = '';
    $("#roomtabletbody").empty();
   
     $.each(data, function(key, value){       
      room_data  = '<tr valign="top">';
      room_data  = '<td>' value.country '</td>';      
      room_data  = '<td>' value.owner_name '</td>';
      room_data  = '<td>' value.room_name '</td>';
      room_data  = '<td>' value.current '/' value.max '</td>';
      room_data  = '<td>' value.password '</td>';
      room_data  = '<td><a  href="">Join</a></td>';
      room_data  = '<tr>';

    });
    $('#roomtabletbody').append(room_data);
    
  });

        
    }, 1000);

generated table:

country owner_name  room_name   current/max password
  EN     user02         131          1/2       0
  EN     user09         254          1/2       0

table im trying to get at:

parent      country owner_name  room_name   current/max password
gzpik1gqlnm    EN    user02         131          1/2       0
d1vn67n7sgu    EN    user09         254          1/2       0

Whats the right direction?

CodePudding user response:

Before room_data = '<td>' value.country '</td>';, add : room_data = '<td>' key '</td>';

And success. If you feel this is the right answer don't forget to mark this as correct answer.

    setInterval(function(){
  $.getJSON("somejson.url", function(data){
    var room_data = '';
    $("#roomtabletbody").empty();
   
     $.each(data, function(key, value){       
      room_data  = '<tr valign="top">';
      room_data  = '<td>' key '</td>';
      room_data  = '<td>' value.country '</td>';      
      room_data  = '<td>' value.owner_name '</td>';
      room_data  = '<td>' value.room_name '</td>';
      room_data  = '<td>' value.current '/' value.max '</td>';
      room_data  = '<td>' value.password '</td>';
      room_data  = '<td><a  href="">Join</a></td>';
      room_data  = '<tr>';

    });
    $('#roomtabletbody').append(room_data);
    
  });

        
    }, 1000);

Don't forget to add new header in <thead>.

  • Related